Remove space between 2 button in a row

Question

I have 2 button places in a row like this:

I want to remove the space between the two buttons and have them side by side in a row like this:

How can I achieve this?

My Code:

<View
  style={{
    flexDirection: "row",
    alignItems: "stretch",
    justifyContent: "center",
    marginTop: 10
  }}
>
  <View style={{ flex: 1 }}>
    <Button title="Button 1" />
  </View>
  <View style={{ flex: 1 }}>
    <Button title="Button 2" />
  </View>
</View>

I am using import { Button } from "react-native-elements";

Answer 1

There is default CSS of Button(react-native-elements) already applied to it like padding and margin. you have to override that css with your one and then apply flex and flexDirection to attach both Buttons.

Try this code

<View style={{flex: 1, flexDirection: 'row'}}>
   <Button style={{marginRight: 0}} title="Button 1" />
   <Button style={{marginLeft: 0}} title="Button 2" />
</View>

Answer 2

<View style={{flex:1}}>
<View style={{ flexDirection: "row"}}>
<View style={{flexGrow: 1, flexBasis: 1}}>
<Button title="one" />
</View>
<View style={{flexGrow: 1, flexBasis: 1}}>
<Button title="two" />
</View>
</View>

Answer 3

Use flexDirection to attach two.

<View style={{ flex: 1, flexDirection: "row" }}>
    <Button title="Button 1" />
    <Button title="Button 2" />
  </View>