CODEWITHSUNDEEP
react-nativetexttags
Emerald
Emerald

Reputation: 874

Display text inline in react native

Is there any way I can display text such in the picture?

enter image description here

This is my current code :

render() {
    return (
        <View style={{flex: 1}}>
            <ScrollView scrollEnabled={true}>
                <View style={{ flexDirection: 'row' }}>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                </View>
            </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
  badge: { 
    backgroundColor: '#f16622',
    color: '#fff',
    padding: 5, 
    marginRight: 5, 
    alignSelf: 'flex-start', 
    borderRadius: 4 
  }
});

But my code cannot display like in the picture I want. Instead of displaying them all, it became like this :

enter image description here

Upvotes: 3

Views: 4237

Answers (1)

Shivam
Shivam

Reputation: 3131

You need to wrap your children elements within the View. With flexbox, you have the flexWrap property, it defines whether the flex items are forced in a single line or can be wrapped. By default it's set to nowrap. Set it to wrap: change <View style={{ flexDirection: 'row' }}> to <View style={styles.badgeContainer}>

    <View style={styles.badgeContainer}>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
    </View>

And try to apply the following styles to the badge container View. 

badgeContainer:{
  flex:1,
  flexDirection: 'row',
  flexWrap: 'wrap'
}

Upvotes: 4

Related Questions