'Multiple Text components with a line break in React Native

I'm trying to get a paragraph to align properly in React Native but so far I have been unable to reach the desired look for it.

This component is a simple box with three main <Text/> components. Each one of these components has a completely different style and they receive a string variable passed down as props.

The final look I'm going for is:

Component look

I've tried building the component as follows:

<View style={layoutStyles.mainContainer}>
      <View style={layoutStyles.textContainer}>
        <Text style={textStyles.highlightedText}>{highlightedText}</Text>
        <View style={layoutStyles.contentContainer}>
          <Text style={textStyles.content}>{content}</Text>
        </View>
      </View>
      <Text style={textStyles.linkText}>{link}</Text>
      <View style={layoutStyles.exitContainer}>
        <Icon
          name="CROSS"
          style={textStyles.exitText}
          lineHeight={30}
          size={25}
        />
      </View>
    </View>

and styled it as so:

    export const layoutStyles = StyleSheet.create({
  mainContainer: {
    marginVertical: 40,
    alignSelf: 'center',
    width: 355,
    height: 74,
    borderRadius: 4,
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: 'blue',
  },
  textContainer: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    width: 180,
    backgroundColor: 'red',
  },
  contentContainer: {
    backgroundColor: 'green',
    alignSelf: 'flex-start',
  },
  exitContainer: {
    alignSelf: 'center',
    marginLeft: 20,
  },
});

export const textStyles = StyleSheet.create({
  highlightedText: {
    color: 'blue',
    fontSize: 12,
    lineHeight: 18,
    fontWeight: '600',
    backgroundColor: 'blue',
  },
  content: {
    color: 'blue',
    fontSize: 12,
    lineHeight: 18,
  },
  linkText: {
    color: 'grey',
    textDecorationLine: 'underline',
    fontSize: 12,
    lineHeight: 18,
  },
  exitText: {
    color: 'black',
  },
});

But as it is made obvious by the colors of the backgrounds, I've no idea how to align the text so the "content" drops down below the "highlighted text"

I'm clueless as to how to solve it. Any help is deeply appreciated.

my broken alignment

cssreactjsreact-native


Solution 1:[1]

I assume that you want the text to appear within the red square of your last image. That won't work because then the text would need to be defined inside that View. I would restructure so that you have three areas with text. Based on your last image, you could do this:

enter image description here

and here is how you could implement it

<View style={{alignSelf: 'center',marginVertical: 40, width: 355, height: 74, flexDirection: 'column' }} >
    <View style={{flexDirection: 'row'}} >
        <View >
            <Text>{'Highlighted text'}</Text>
        </View>
        <View style={{marginLeft: 10}} >
            <Text>{'then some regular'}</Text>
        </View>
        </View>
        <View >
            <Text>{'text which drops a line and goes on here'}</Text>
        </View>
    </View >

Edit: If the reason for wanting a line break is for the string to fit you could divide the string using substring into two different parts of appropriate size. To divide the string without splitting words, you could do something like this:

render() {
    const { highlightedText, content } = this.props
    const characterLimit = 20;
    let splitIndex = characterLimit; 
    while(content.charAt(splitIndex) !== ' ' && splitIndex > 0) { 
        splitIndex--;
    }
    const first = content.substring(0, splitIndex);
    const second = content.substring(splitIndex + 1, content.length);
    return (
        <View style={{alignSelf: 'center',marginVertical: 40, width: 355, height: 74, flexDirection: 'column' }} >
            <View style={{flexDirection: 'row'}} >
                <View >
                    <Text>{highlightedText}</Text>
                </View>
                <View style={{marginLeft: 10}} >
                    <Text>{first}</Text>
                </View>
            </View>
            <View >
                <Text>{second}</Text>
            </View>
        </View >
    );

Solution 2:[2]

Use Text components like this:

<Text style={style1}> 
  {'Highlighted text'}
  <Text style={style2}>
   {'text2'}
  </Text>
</Text>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 UDAIF M C

Related Questions