CODEWITHSUNDEEP
javascriptreactjsreact-nativejsx
Anu
Anu

Reputation: 1742

How to place two buttons within the same row in react native?

Within a popup dialog I want to buttons to be placed on the same line but now I'm getting like this https://i.sstatic.net/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,

}

Upvotes: 3

Views: 14416

Answers (3)

Gui Herzog
Gui Herzog

Reputation: 5615

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.

Upvotes: 3

kumar kundan
kumar kundan

Reputation: 2057

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>

Upvotes: 5

Fadel Trivandi Dipantara
Fadel Trivandi Dipantara

Reputation: 648

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

Upvotes: 7

Related Questions