CODEWITHSUNDEEP
javascriptreact-native
RaideR
RaideR

Reputation: 937

React Native: Why my text breaks like this and why is it not respecting the container margin?

I want to display multiple elements next to each other in React Native (with a flex wrap if there are too many elements or if the elements are too long). Each element consists of an icon and a text. If the text is too long, the text should break into the next line.

I tried different things with flexGrow and flexShrink but nothing had the desired effect. Here is my code (expo snack):

export default function App() {

  function iconWithText(text) {
    return (
      <View style={styles.iconWithTextWrapper}>
        <View style={{paddingRight: 10, backgroundColor: 'grey'}}>
            <Text>Icon</Text>
        </View>
        <View style={{backgroundColor: 'yellow'}}>
          <Text>{text}</Text>
        </View>
      </View>
    )
  }

  return (
    <View style={styles.container}>
      {iconWithText('short text')}
      {iconWithText('short text')}
      {iconWithText('this is a long, long, long text that does break very ugly')}
    </View>
  );
}



const styles = StyleSheet.create({
  container: {
    marginTop: 50,
    marginHorizontal: 50,
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'flex-start',
  },
  iconWithTextWrapper: {
    flexDirection: 'row',
        margin: 10,
  }
});

Here is the corresponding result - as you can see the margin of the whole container is not respected and the text does not break very well:

Text breaks ugly and margin not respected

Why is the right margin of the container not respected, why does the text break like this and how can I fix this?

Upvotes: 0

Views: 450

Answers (1)

Moistbobo
Moistbobo

Reputation: 2962

Try adding a flex:1 to your text style.

edit:

I played around in your snack and came up with this: https://snack.expo.io/@moistbobo/iconwithtext

Please see if this fits your use case.

Upvotes: 1

Related Questions