Multiple Text components with a line break in React Native

Question

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 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:

I've tried building the component as follows:


      
        {highlightedText}
        
          {content}
        
      
      {link}

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.

user_4862855 · Answer

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:

and here is how you could implement it


    
        
            {'Highlighted text'}
        
        
            {'then some regular'}
        
        
        
            {'text which drops a line and goes on here'}

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 (
        
            
                
                    {highlightedText}
                
                
                    {first}
                
            
            
                {second}
            
        
    );

user_17534485 · Answer

Use Text components like this:

 
  {'Highlighted text'}
  
   {'text2'}

Multiple Text components with a line break in React Native

2 Answers