Search code examples
javascriptcsstypescriptreact-nativenative-base

Add 2 buttons in the same line

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?

enter image description here

Solution

  • Generally when you want 2 component in the same line you could wrap them with a View and add flexDirection: 'row' to style.

    So you could add flexDirection: 'row' and justifyContent: 'space-between'(to space children components) to buttonView object in the styles