[Solved]-Simulate display: inline in React Native-Reactjs

try this, simple and clean.

<text style={{ fontfamily: 'custom_font', ... }}>
   <text>lorem ipsum</text>
   <text style={{ color: "red" }}>&nbsp;dolor sit amet.</text>
</text>

result:

lorem ipsum dolor sit amet.

i had the following use case:

i needed a text that can wrap with different sizes, and throughout that text, i wanted to underscore some of the words (to indicate that they are clickable).

it's quite simple expect for the case that you can't control the underline in any way (how close is it, what color is it, so on) - this led me through the rabbit hole, and eventually coming up with the solution of splitting every word, and wrapping it in separate text component, wrapped with view.

i'll paste the code here:

import react from 'react';
import { stylesheet, view, touchableopacity, text } from 'react-native';
import colors from '../../styles/colors';
import fonts from '../../styles/fonts';

const styles = stylesheet.create({
  container: {
    flex: 1,
  },
});

export default class salttext extends react.component {

  gettheme (type) {

    if (type === 'robomonoregular10gray') {
      return {
          fontsize: fonts.sizes.ten,
          fontfamily: fonts.robotomono_regular,
          color: colors.getcoloropacity(colors.gray, 70),
          lineheight: fonts.sizes.ten + 10
      };
    }

    throw new error('not supported');
  }

  splittext (text) {
    const parts = [];
    const maps = [];

    let currentpart = '';
    let matchindex = 0;

    for (const letter of text) {

      const isopening = letter === '[';
      const isclosing = letter === ']';

      if (!isopening && !isclosing) {
        currentpart += letter;
        continue;
      }

      if (isopening) {
        parts.push(currentpart);
        currentpart = '';
      }

      if (isclosing) {
        parts.push(`[${matchindex}]`);
        maps.push(currentpart);
        currentpart = '';
        matchindex++;
      }
    }

    const partsmodified = [];
    for (const part of parts) {
      const splitted = part
        .split(' ')
        .filter(f => f.length);

      partsmodified.push(...splitted);
    }

    return { parts: partsmodified, maps };
  }

  render () {

    const textprops = this.gettheme(this.props.type);
    const children = this.props.children;

    const gettextstyle = () => {
      return {
        ...textprops,
      };
    };

    const gettextunderlinestyle = () => {
      return {
        ...textprops,
        borderbottomwidth: 1,
        bordercolor: textprops.color
      };
    };

    const getviewstyle = () => {
      return {
        flexdirection: 'row',
        flexwrap: 'wrap',
      };
    };

    const { parts, maps } = this.splittext(children);

    return (
      <view style={getviewstyle()}>
        {parts.map((part, index) => {

          const key = `${part}_${index}`;
          const islast = parts.length === index + 1;

          if (part[0] === '[') {
            const mapindex = part.substring(1, part.length - 1);
            const val = maps[mapindex];
            const onpresshandler = () => {
              this.props.onpress(parseint(mapindex, 10));
            };
            return (
              <view key={key} style={gettextunderlinestyle()}>
                <text style={gettextstyle()} onpress={() => onpresshandler()}>
                  {val}{islast ? '' : ' '}
                </text>
              </view>
            );
          }

          return (
            <text key={key} style={gettextstyle()}>
              {part}{islast ? '' : ' '}
            </text>
          );
        })}
      </view>
    );
  }
}

and usage:

  renderprivacy () {

    const opentermsofservice = () => {
      linking.openurl('https://reactnativecode.com');
    };

    const openprivacypolicy = () => {
      linking.openurl('https://reactnativecode.com');
    };

    const onurlclick = (index) => {
      if (index === 0) {
        opentermsofservice();
      }

      if (index === 1) {
        openprivacypolicy();
      }
    };

    return (
      <salttext type="robomonoregular10gray" onpress={(index) => onurlclick(index)}>
        by tapping create an account or continue, i agree to salt\'s [terms of service] and [privacy policy]
      </salttext>
    );
  }

this is the end result:

you can only nest text nodes without using flex to get the desired effect. like this: https://facebook.github.io/react-native/docs/text

<text style={{fontweight: 'bold'}}>
  i am bold
  <text style={{color: 'red'}}>
    and red
  </text>
</text>

i haven't found a proper way to inline text blocks with other content. our current "hackish" workaround is to split every single word in a text string into its own block so flexwrap wraps properly for each word.