react native flex 2

<View style={{ flex: 1, flexDirection: 'column', marginTop: 25 }}>

<View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', marginTop: 25 }}>

<View style={{ flex: 1, flexDirection: 'column',  flexWrap: 'wrap', marginTop: 25 }}>

<View style={{ flex: 1, flexDirection: 'column', flexWrap: 'wrap', 

alignContent: 'center', marginTop: 25 }}>

<View style={{ flex: 1, flexDirection: 'column', flexWrap: 'wrap', 

alignContent: 'stretch', marginTop: 25 }}>

<View style={{ flex: 1, flexDirection: 'column', flexWrap: 'wrap', 

alignContent: 'space-between', marginTop: 25 }}>

<View style={{ flex: 1, flexDirection: 'column', flexWrap: 'wrap', 

alignContent: 'space-around', marginTop: 25 }}>

import React, { Component, useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import useInterval from 'react-useinterval';

function PoolBall(props) {
  return (
    <View style={{ ...styles.ball, backgroundColor: props.color }} >
      <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
        <View style={{ ...styles.number, backgroundColor: 'white' }}>
          <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
            <Text>{props.label}</Text>
          </View>
        </View>
      </View>
    </View>
  )
}

function PoolBallStripe(props) {
  return (
    <View style={{ ...styles.ball, backgroundColor: 'lightgrey' }} >
      <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
        <View style={{ ...styles.stripe, backgroundColor: props.color }}>
          <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
            <View style={{ ...styles.number, backgroundColor: 'white' }}>
              <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
                <Text>{props.label}</Text>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}

export default function FlexDirectionBasics() {

  return (
    <View style={{ flex: 1, flexDirection: 'column', marginTop: 25 }}>

      <PoolBall color='yellow' label={1} />


      <PoolBall color='blue' label={2} />
      <PoolBall color='red' label={3} />


      <PoolBall color='violet' label={4} />
      <PoolBall color='orange' label={5} />
      <PoolBall color='green' label={6} />


      <PoolBall color='brown' label={7} />
      <PoolBall color='black' label={8} />
      <PoolBallStripe color='yellow' label={9} />
      <PoolBallStripe color='blue' label={10} />


      <PoolBallStripe color='red' label={11} />
      <PoolBallStripe color='violet' label={12} />
      <PoolBallStripe color='orange' label={13} />
      <PoolBallStripe color='green' label={14} />
      <PoolBallStripe color='brown' label={15} />

    </View>
  );
}


const styles = StyleSheet.create({
  ball: {
    width: 50,
    height: 50,
    borderRadius: 25,
    flexDirection: 'column',
    justifyContent: 'center',
    marginVertical: 25
  },
  number: {
    width: 20,
    height: 20,
    borderRadius: 10,
  },
  stripe: {
    width: 30,
    height: 50,
    borderRadius: 11,
    flexDirection: 'column',
    justifyContent: 'center'
  }
});

reference:
http://chuanshuoge2.blogspot.com/2019/10/react-native-flex.html