I have a list of icons inside my styled container that are displayed in a flexDirection:'row' but when there is more icons than width of view, they dont break to next line, but continue on to the right out of view. How do I get the content to break to the next line if it reaches max width?

Styling:

var styles = StyleSheet.create({ container: { width: SCREEN_WIDTH, //width of screen flexDirection:'row', backgroundColor: 'transparent', marginTop:40, paddingLeft:10, paddingRight:10, flex: 1, }, iconText:{ paddingLeft:10, paddingRight:10, paddingTop:10, paddingBottom:10 },
});

Render:

<View style={styles.container}> <TouchableHighlight onPress={() => this.changeIcon(indexToChange, icons[0])} underlayColor='#F7F7F7'> <Text style={styles.iconText}><IonIcons name={icons[0]} size={30} color="#555" /></Text> </TouchableHighlight> <TouchableHighlight onPress={() => this.changeIcon(indexToChange, icons[1])} underlayColor='#F7F7F7'> <Text style={styles.iconText}><IonIcons name={icons[1]} size={30} color="#555" /></Text> </TouchableHighlight> <TouchableHighlight onPress={() => this.changeIcon(indexToChange, icons[2])} underlayColor='#F7F7F7'> <Text style={styles.iconText}><IonIcons name={icons[2]} size={30} color="#555" /></Text> </TouchableHighlight> ...//more continued on
</View>

When the icons reach the width to the right they dont break to the bottom. Is this possible?

3 Answers

You can add flexWrap: 'wrap' and alignItems: flex-start (or anything other than stretch to your container style.

If you don't specify align-items or if you set align-items: stretch, each column in the first row will take as much height as possible, pushing the second row below kind of like in the screenshot below:

4

For my case, I only needed to add flex-shrink: 1 or flexShrink: 1, to the parent of my Text component that I wanted to wrap.

I did not need or benefit from align-items: flex-start or flex-wrap: wrap etc. Again, might just be my use-case, but that worked for me.

just put multiline as follows

 <TextInput multiline style={[ styles.input, propStyleTextInput, {flexShrink: 1}]} onChangeText={(e) => onChangeNumber(e, id)} value={number} placeholder={placeholder} keyboardType={keyboardType} />

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy