Question 256840 in React native Question posted in
The official React Native documentation can be found here.

React Native Text Overflows the Screen Width with FlexWrap

I am trying to implement a component in react native where i have a row of and components but i can’t achieve the result i want.

the current code:

      <View style={{
        flexDirection: 'row',
        alignItems: 'center',
        flexWrap: 'wrap'
      }}>
        <View style={{ backgroundColor: 'red', borderRadius: 100, paddingHorizontal: 10 }}>
          <Text style={{ fontSize: 12, lineHeight: 18 }}>test</Text>
        </View>
        <Text style={{ fontSize: 12, lineHeight: 18 }}>
          afnsdas idaspidn apdnasdk asdnkasdn sdknsdk sdknd sdasdas
        </Text>
      </View>

The bubble "test" is shown on one line and then random text inside goes overflow and jumps on a new line. If i make it shorter and create a separate component, it works fine.

How to to achieve the result of showing long string on the same line with bubble "test" and make text break line only when it reaches the end of view?

image

wanted result:
enter image description here

Tags:

2

Answers


  1. 0

    The second Text goes overflow and jumps on a new line because you have flexWrap: 'wrap' in the parent View.

    The solution is very simple: Just remove this flexWrap: 'wrap' style.

    By the ways, you should set flex: 1 to secound Text to make it break line when it reaches the end of view correctly:

        <View style={{
      flexDirection: 'row',
      alignItems: 'center',
      // flexWrap: 'wrap',
    }}>
      <View style={{ backgroundColor: 'red', borderRadius: 100, paddingHorizontal: 10 }}>
        <Text style={{ fontSize: 12, lineHeight: 18 }}>test</Text>
      </View>
      <Text style={{ fontSize: 12, lineHeight: 18, flex: 1 }}>
        afnsdas idaspidn apdnasdk asdnkasdn sdknsdk sdknd sdasdas
      </Text>
    </View>
    Login or Signup to reply.
  2. 0

    To achiеvе thе dеsirеd layout in Rеact Nativе, whеrе you havе a row with a bubblе "tеst" and tеxt that brеaks to a nеw linе only whеn it rеachеs thе еnd of thе viеw, you can makе usе of a combination of flеx and flеxWrap propеrtiеs along with somе additional styling. Hеrе’s how you can modify your codе:

    <View style={{
  flexDirection: 'row',
  alignItems: 'center',
  flexWrap: 'wrap',
  maxWidth: '100%', // Ensure the view doesn't exceed its parent width
}}>
  <View style={{ backgroundColor: 'red', borderRadius: 100, paddingHorizontal: 10 }}>
    <Text style={{ fontSize: 12, lineHeight: 18 }}>test</Text>
  </View>
  <Text style={{
    fontSize: 12,
    lineHeight: 18,
    flex: 1, // Allow the text to take up remaining space
    marginLeft: 10, // Add some spacing between the bubble and text
  }}>
    afnsdas idaspidn apdnasdk asdnkasdn sdknsdk sdknd sdasdas
  </Text>
</View>

    If you add maxWidth: ‘100%’ to the parent view and set the text margin flex: 1 and marginLeft: 10, you will ensure that the text is divided into new lines only when it reaches the end of the view, and you have a gap between the bubble and the text that will be there.

    These rules should help you find the settings you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search