How to place two buttons within the same row in react native?
11,391
Solution 1
Add View
parent to both Button
component with style flexDirection: 'row'
after </Text>
<View style={{ flexDirection: 'row' }}>
<View style={styles.button_1}>
<Button
title="Yes"
onPress={() => {
console.log('clicked');
}}
/>
</View>
<View style={styles.button_1}>
<Button
title="No"
onPress={() => {
console.log('clicked');
}}
/>
</View>
</View>
You can try this snack
Solution 2
Try this for full width without any spaces or margin JUST COPY PASTE
<View style={{ flexDirection: "row" }}>
<View style={{ flex: 1 }}>
<TouchableOpacity style={{ alignSelf: 'stretch',backgroundColor: '#2980B9' }} onPress={() => { onSavePress }}>
<Text style={{ alignSelf: 'center',
color: '#ffffff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10 }}>Save</Text>
</TouchableOpacity>
</View>
<View style={{borderLeftWidth: 1,borderLeftColor: 'white'}}/>
<View style={{ flex: 1}}>
<TouchableOpacity style={{ alignSelf: 'stretch',backgroundColor: '#2980B9'}} onPress={() => { onCancelPress }}>
<Text style={{ alignSelf: 'center',
color: '#ffffff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10 }}>Cancel</Text>
</TouchableOpacity>
</View>
</View>
Solution 3
To do that, I usually create a view, set its flexDirection
to 'row'
and put the button components inside of it. So, your code would look like this:
<View style={{ flexDirection: 'row' }}>
<Button title='Button 1'/>
<Button title='Button 2'/>
</View>
I hope it helps.
Comments
-
Linu Sherin almost 2 years
Within a popup dialog I want to buttons to be placed on the same line but now I'm getting like this https://i.stack.imgur.com/sJ30p.png.Following is the style given.
<PopupDialog ref={popupDialog => { this.popupDialog = popupDialog; }} dialogStyle={{ backgroundColor: "#ddd", height: 200, width:320, border:10,padding:10}} overlayBackgroundColor="#fff" dismissOnTouchOutside={true} > <View style={styles.dialogContentView}> <Text style={{fontSize:18}}>Are you sure you want to submit?</Text> <View style={styles.button_1}> <Button title="Yes" onPress={() => { console.log('clicked') }} /> </View> <View style={styles.button_1}> <Button title="No" onPress={() => { console.log('clicked') }} /> </View> </View> </PopupDialog> ..... .... dialogContentView: { flex: 1, flexDirection: 'column', justifyContent: 'space-between' }, button_1:{ width: '40%', height: 30,
}