I want 2 buttons side by side in react native

Question

I am new to react native and I am trying to achieve 2 buttons side by side I have tried it and I couldn't achieve it as I have already inserted 2 buttons it is appearing one below another

Here is my code:

      <View style={styles.buttonStyle}>
        <Button
         title={"Pause"}
         style={styles.buttonStyle}
         onPress={() => {
           this.setState({ paused: true });
         }}
          color="#841584"
        />
        </View>
         <View style={styles.buttonStyle}>
          <Button
             title={"Play"}
            onPress={() => {
            this.setState({ paused: false });
         }}
         color="green"
       />
      </View>
     </View>
     );
    }
   }
  const styles = StyleSheet.create({
     backgroundVideo: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
   right: 0
  },
 buttonStyle: {
    marginHorizontal: 20,
    marginTop: 5
  }
 });
 export default VideoPlayer;

Disentomb

Answer 1

The property that defines rendering direction is called flexDirection, it can be set to column (default, render items vertically) or row (renders items horizontally).

So to achieve the desired effect you need to add the style property flexDirection:"row" to the View that contain the buttons. Your code would look something like:

<View style={{ flexDirection:"row" }}>
    <View style={styles.buttonStyle}>
        <Button>Button 1</Button>
    </View>
    <View style={styles.buttonStyle}>
        <Button>Button 2</Button>
    </View>
</View>

Nereidanereids

How can I make them appear in 2 different sides? – Disentomb

I'm not sure what you mean by 2 different sides, but you can use the style properties justifyContent and alignItems to tell the div where to position it's children. – Nereidanereids

Answer 2

You just need flexDirection: 'row'. Please refer below edit

<View style={styles.buttonStyleContainer}>
            <Button
             title={"Pause"}
             style={styles.buttonStyle}
             onPress={() => {
               this.setState({ paused: true });
             }}
              color="#841584"
            />
              <Button
                 title={"Play"}
                onPress={() => {
                this.setState({ paused: false });
             }}
             color="green"
           />

         </View>
         );
        }
       }
      const styles = StyleSheet.create({
         backgroundVideo: {
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
       right: 0
      },

    buttonStyleContainer: {
       flex: 1,
       flexDirection: 'row',
       marginHorizontal: 20,
        marginTop: 5,
      }
     });
     export default VideoPlayer;

Moldavia

I wanted 2 buttons in side by side but here I can fin only one button – Disentomb

Answer 3

Try it out

<View style={{ flexDirection: "row" }}>
    <View style={styles.buttonStyle}>
        <Button title={"Button 11"}/>
        <Button title={"Button 12"}/>
    </View>
    <View style={styles.buttonStyle}>
        <Button title={"Button 21"}/>
        <Button title={"Button 22"}/>
    </View>
</View>

Mortality

Answer 4

Probably you are looking for something like this:

<View style={styles.container}>
    <View style={styles.item}>
        <Button>Button 1</Button>
    </View>
    <View style={styles.item}>
        <Button>Button 2</Button>
    </View>
</View>

const styles = StyleSheet.create({
    container: { // Container that controls the items
        flex: 1,
        flexDirection: 'row', // Align children from left to right
        flexWrap: 'wrap',
        alignItems: 'flex-start' // Align children to the start of the container's cross axis
    },
    item: { // Adjusting the item width to achieve a side-by-side layout
        width: '50%'
    }
})

More about styling in React Native: https://reactnative.dev/docs/flexbox

Fachan

Answer 5

This worked for me:

<View style={{marginRight:10}}>
   <Button onPress={() => console.log('First')} style={styles.button} title='|<' />
</View>
<View style={{marginRight:10}}>
   <Button onPress={() => console.log('Previous')} style={styles.button} title='<' />
</View>
<View style={{marginRight:10}}>
   <Button onPress={() => console.log('Next')} style={styles.button} title='>' />
</View>
<View>
   <Button onPress={() => console.log('Last')} style={styles.button} title='>|' />
</View>

Shoddy