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;

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>

Answer 2

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>