How can I use Native Base buttons in a way that they both appear to be in the same line? Currently, the second button is on the right as it should be, but it appears a bit lower than the first button. How can I fix this?
<View style={scaledAvailableTripsStyles.buttonView}><Button rounded style={scaledAvailableTripsStyles.button}><Text style={scaledAvailableTripsStyles.text}>Button 1</Text></Button><View style={scaledAvailableTripsStyles.rightButtonView}><Button rounded style={scaledAvailableTripsStyles.buttonBlack}><Text style={scaledAvailableTripsStyles.text}>Button 2</Text></Button></View></View>
Styling:
button: { width: moderateScale(170), height: moderateScale(40), backgroundColor: '#31C283', justifyContent: 'center', }, buttonBlack: { width: moderateScale(170), height: moderateScale(40), backgroundColor: '#2E3331', justifyContent: 'center', }, text: { fontSize: moderateScale(14, 0.7), }, searchField: { width: 300, }, buttonView: { paddingTop: 450, }, rightButtonView: { paddingLeft: 200, }
Edit:Got this after adding flexDirection. How can I make some space between the two buttons?