How to put buttons on the right and left side in react native

Question

How can I add five buttons to the right side of my app? I've put five buttons on the left, and I need to put five more on the right, but I'm not sure how.

https://snack.expo.io/@therealsneh/vacation-spot-real Code snack.

Picture:

Picture of the app.

Answer 1

Is this what you want to achieve?

I added a view container that contains all your TouchableOpacities, then change it to flexDirection row to render horizontally, also wrapping them to next line if not fit enough

This is the code, you can also try in this snack expo

import React from 'react';
import {
  View,
  Button,
  Text,
  ScrollView,
  TouchableOpacity,
  StyleSheet,
  Image,
} from 'react-native';
import { List } from 'react-native-paper';
import SlidingUpPanel from 'rn-sliding-up-panel';

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Welcome to VacationSpot!</Text>

        <View
          style = {{
            flexDirection: 'row',
            flexWrap: 'wrap',
            justifyContent: 'space-between',
            marginHorizontal: 20
          }}
        >
          <TouchableOpacity onPress={() => this._panel.show()} style = {{ alignItems: 'center' }}>
            <Text style={styles.textOverImgButtonLeft}>Alberta: </Text>
            <Image
              style={styles.imgButtonleft}
              source={{
                uri:
                  'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Flag_of_Alberta.svg/1200px-Flag_of_Alberta.svg.png',
              }}
            />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this._panel.show()} style = {{ alignItems: 'center' }}>
            <Text style={styles.textOverImgButtonLeft}>British Columbia: </Text>
            <Image
              style={styles.imgButtonleft}
              source={{
                uri:
                  'https://cdn.britannica.com/77/6877-004-26251B48/Flag-British-Columbia.jpg',
              }}
            />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this._panel.show()} style = {{ alignItems: 'center' }}>
            <Text style={styles.textOverImgButtonLeft}>Manitoba: </Text>
            <Image
              style={styles.imgButtonleft}
              source={{
                uri:
                  'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Flag_of_Manitoba.svg/255px-Flag_of_Manitoba.svg.png',
              }}
            />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this._panel.show()} style = {{ alignItems: 'center' }}>
            <Text style={styles.textOverImgButtonLeft}>New Brunswick: </Text>
            <Image
              style={styles.imgButtonleft}
              source={{
                uri:
                  'https://shop.chandlersales.com/images/products/Flag_Imporium/a/nb_a.jpg',
              }}
            />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this._panel.show()} style = {{ alignItems: 'center' }}>
            <Text style={styles.textOverImgButtonLeft}>Nfld: </Text>
            <Image
              style={styles.imgButtonleft}
              source={{
                uri:
                  'https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Flag_of_Newfoundland_and_Labrador.svg/255px-Flag_of_Newfoundland_and_Labrador.svg.png',
              }}
            />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this._panel.show()} style = {{ alignItems: 'center' }}>
            <Text style={styles.textOverImgButtonRight}>Nove Scotia: </Text>
            <Image
              style={styles.imgButton}
              source={{
                uri:
                  'https://cdn.britannica.com/05/3105-004-7D8B6ACF/Flag-of-Nova-Scotia.jpg',
              }}
            />
          </TouchableOpacity>
        </View>
        <SlidingUpPanel ref={(c) => (this._panel = c)}>
          <View style={styles.container}>
            <Text style={styles.paragraph}>Slide down to go back</Text>
          </View>
        </SlidingUpPanel>
      </View>
    );
  }
}

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e9eeef',
    borderRadius: 30,
    height: 100,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    marginTop: 100,
  },
  title: {
    fontSize: 35,
    fontWeight: 'bold',
    marginTop: 70,
    marginBottom: 70,
    textAlign: 'center',
    fontFamily: '-apple-system, BlinkMacSystemFont',
  },
  imgButtonleft: {
    width: 120,
    height: 53,
    marginTop: 20,
    borderRadius: 10,
  },
  imgButton: {
    width: 120,
    height: 53,
    marginTop: 20,
    borderRadius: 10,
  },
  textOverImgButtonLeft: {
    fontWeight: 'bold',
    fontSize: 15,
    marginTop: 10,
  },
  textOverImgButtonRight: {
    fontWeight: 'bold',
    fontSize: 15,
    marginTop: 10,
  },
});

// Code to create a button that will take you to main screen

// <TouchableOpacity
//   onPress={() => this._panel.hide()}></TouchableOpacity>

//onPress={() => this._panel.show()}

Answer 2

You should apply to parent block contained buttons following rules:

.container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}