CODEWITHSUNDEEP
react-nativereact-native-elementsreact-native-button
3iL
3iL

Reputation: 2176

Remove space between 2 button in a row

I have 2 button places in a row like this:

enter image description here

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

enter image description here

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

Upvotes: 2

Views: 2745

Answers (3)

Tejaswi katha
Tejaswi katha

Reputation: 39

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

Upvotes: 0

Ankit Dubey
Ankit Dubey

Reputation: 243

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>

Upvotes: 1

hong developer
hong developer

Reputation: 13906

Use flexDirection to attach two.

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

Upvotes: 0

Related Questions