Two buttons with equal width horizontally fill the screen in React Native

Question

I need to create two or more buttons which will be of equal width and horizontally aligned, based on screen width button width may vary.

Answer 1

You can wrap you Buttons into flexed Views :

import React, { Component } from 'react'; import { Button, View, StyleSheet } from 'react-native';  export default const FlexedButtons () => (   <View style={styles.container}>      <View style={styles.buttonContainer}>       <Button title="Button 1"/>     </View>     <View style={styles.buttonContainer}>       <Button title="Button 2"/>     </View>   </View> );  const styles = StyleSheet.create({   container: {     flex: 1,     flexDirection: 'row',     alignItems: 'center',     justifyContent: 'center',   },   buttonContainer: {     flex: 1,   } }); 

Here is a working example on Sketch: https://snack.expo.io/SyMpPSise

Answer 2

import React, { Component } from 'react'; import { Button, StyleSheet, View } from 'react-native';  export default class ButtonExample extends Component {   _onPressButton() {     alert('You tapped the button!')   }    render() {     return (       <View style={styles.container}>         <View style={styles.buttonContainer}>           <Button             onPress={this._onPressButton}             title="Press Me"           />         </View>         <View style={styles.buttonContainer}>           <Button             onPress={this._onPressButton}             title="Press Me"             color="#841584"           />         </View>         <View style={styles.alternativeLayoutButtonContainer}>           <Button             onPress={this._onPressButton}             title="This looks great!"           />           <Button             onPress={this._onPressButton}             title="OK!"             color="#841584"           />         </View>       </View>     );   } }  const styles = StyleSheet.create({   container: {    flex: 1,    justifyContent: 'center',   },   buttonContainer: {     margin: 20   },   alternativeLayoutButtonContainer: {     margin: 20,     flexDirection: 'row',     justifyContent: 'space-between'   } }); 

 <View style={styles.menuContainer}>                  <TouchableOpacity onPress={() => this.pressLink('Home')}>                  <View style={styles.imageTextContainer}>                       <Image                        source={require('./on.png')} />                       <Text style={{flex:1 ,color: '#fff',fontSize: 20,marginLeft: 20}} >Home</Text>                  </View>               </TouchableOpacity>                <TouchableOpacity onPress={() => this.pressLink('About')}>                   <View style={styles.imageTextContainer}>                       <Image                        source={require('./on.png')} />                       <Text style={{flex:1 ,color: '#fff',fontSize: 20,marginLeft: 20}} >About</Text>                  </View>                </TouchableOpacity>            </View>   const styles = StyleSheet.create({    menuContainer: {     flex: 0.52,     marginLeft: 5   },   imageTextContainer: {       marginLeft: 20,       padding: 10,       flexDirection: 'row',       justifyContent: 'space-between'   } });