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";

score 1 · Answer 1 · answered Apr 23 '19 at 14:05

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>

score 0 · Answer 2 · answered Apr 23 '19 at 13:36

0

Use flexDirection to attach two.

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

answered Apr 23 '19 at 13:36

hong developer

13,291
4
38
68

score 0 · Answer 3 · answered Apr 23 '19 at 14:17

0

<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>

answered Apr 23 '19 at 14:17

Tejaswi katha

29
1
17

3

please add some explanation. code only answers are discouraged in SO – Ram Ghadiyaram Apr 23 '19 at 16:12

Remove space between 2 button in a row

3 Answers3