CODEWITHSUNDEEP
react-native
Morton
Morton

Reputation: 5760

How to set two buttons stick together?

I set two half oval buttons and try to set the position on center.

But I found they don't stick together, I try to change justifyContent: 'space-between' or 'space-around' is not working.

How to let Left button and Right button stick together ?

enter image description here

Here is my code:

return (
  <View style={{ justifyContent: 'center', marginTop: 50, flexDirection: 'row', backgroundColor: 'blue' }}>
    <TouchableOpacity style={[styles.buttonStyle, { width: 150, height: 50, borderBottomLeftRadius: 50, borderBottomRightRadius: 0, borderTopLeftRadius: 50, borderTopRightRadius: 0 }]}>
      <Text>Left</Text>
    </TouchableOpacity>
    <TouchableOpacity style={[styles.buttonStyle, { backgroundColor: 'orange', width: 150, height: 50, borderBottomLeftRadius: 0, borderBottomRightRadius: 50, borderTopLeftRadius: 0, borderTopRightRadius: 50 }]}>
      <Text>Right</Text>
    </TouchableOpacity>
  </View>
);

const styles = StyleSheet.create({
buttonStyle: {
    alignSelf: 'stretch',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'pink',
    borderWidth: 1,
    borderColor: 'transparent',
    marginLeft: 5,
    marginRight: 5
  },
});

Upvotes: 1

Views: 222

Answers (1)

Jaydeep Galani
Jaydeep Galani

Reputation: 4961

remove margins,

buttonStyle: {
    alignSelf: 'stretch',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'pink',
    borderWidth: 1,
    borderColor: 'transparent',
    marginLeft: 5,//this
    marginRight: 5// this
  },

Upvotes: 3

Related Questions