I have the following code:
renderActionButtons(actionButtons){
let actionButtonsContent = actionButtons.map((button, i) => {
return <TouchableHighlight key={i} onPress={() => {this.updateConversation(button);}} style={globalStyle.actionButton} underlayColor='#f1f1f1'>
<View key={i}>
<Text style= {globalStyle.actionButtonText}>{ button }</Text>
</View>
</TouchableHighlight>
})
return actionButtonsContent
}
renderConversations(){
let conversationContent = this.state.conversationArray.map((convObj, i) => {
return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow,convObj.directionClass]}>
<Text style= {[globalStyle.conversationText,convObj.directionTextClass]}>{ convObj.text }</Text>
<View style= {globalStyle.actionButtonsContainer}>
{ this.renderActionButtons(convObj.actionButtons) }
</View>
</View>
})
return conversationContent
}
This is to render the following view:
I'm trying to wrap those pills inside the white container. Following are the styles I have used:
conversationContainer:{
maxWidth:310,
backgroundColor: 'white',
borderBottomRightRadius: 10,
borderTopRightRadius: 10,
borderBottomLeftRadius: 0,
borderTopLeftRadius: 10,
padding: 10,
marginTop: 10
},
actionButtonsContainer:{
flex:1,
flexDirection: 'row',
paddingTop: 10
},
actionButton:{
backgroundColor:primaryRed,
borderRadius:30,
padding: 7,
marginRight: 10
},
actionButtonText:{
color:'white',
fontSize:12,
alignSelf: 'center'
},
How can I wrap the child Elements inside the parent element so that it doesn't overflow like show in picture ?
To wrap React Native text on the screen, we can set flexWrap to 'wrap' .
Views wrap their content by default if 'flex' attribute is not set. If you need the view to fill parent width or height set 'alignSelf' attribute to "stretch". When flex is not set, the view does not wrap all of its children, it shrinks and children become overlapped so that the entire layout is not visible.
flexGrow describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
How do you center text in a view React Native? To make text align center horizontally, apply this Property (textAlign:”center”) . Now to make the text align vertically, first check direction of flex. To Make text align center apply same property ( textAlign:”center” ).
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
:
actionButtonsContainer:{
flex:1,
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 10
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With