React Native Styling problems with flex positioning

Listing 1 Flex views with a 1:2 ratio, 1:3 ratio, and a 1:4 ratio.

…
 render() {
   return (
     <View style={styles.container}>
       <View style={[styles.flexContainer]}>
         <Example style={[{flex: 1},styles.darkgrey]}>A 50%</Example>  //A
         <Example style={[{flex: 1}]}>B 50%</Example>
       </View>
       <View style={[styles.flexContainer]}>                 // B
         <Example style={[{flex: 1},styles.darkgrey]}>C 33%</Example>
         <Example style={{flex: 2}}>D 66%</Example>
       </View>
       <View style={[styles.flexContainer]}>                 // C
         <Example style={[{flex: 1},styles.darkgrey]}>E 25%</Example>
         <Example style={{flex: 3}}>F 75%</Example>
       </View>
     </View>
   );
 }
 …

Listing 2 Adding flexDirection: ‘row’ to the parent container

flexContainer: {   // A
     width: 150,
     height: 150,
     borderWidth: 1,
     margin: 10,
     flexDirection: 'row'  // B
 },

Listing 3 Examples showing each of the justifyContent options

...
 render() {
   return (
     <View style={styles.container}>
       <FlexContainer style={[{justifyContent: 'center'}]}>  //A
         <Example>center</Example>
         <Example>center</Example>
       </FlexContainer>
       <FlexContainer style={[{justifyContent: 'flex-start'}]}> //B
         <Example>flex-start</Example>
         <Example>flex-start</Example>
       </FlexContainer>
       <FlexContainer style={[{justifyContent: 'flex-end'}]}> //C
         <Example>flex-end</Example>
         <Example>flex-end</Example>
       </FlexContainer>
       <FlexContainer style={[{justifyContent: 'space-around'}]}>  //D
         <Example>space-around</Example>
         <Example>space-around</Example>
       </FlexContainer>
       <FlexContainer style={[{justifyContent: 'space-between'}]}> //E
         <Example>space-between</Example>
         <Example>space-between</Example>
       </FlexContainer>
     </View>
   );
 }
 ...

Listing 4 Using non-default alignItems properties: center, flex-start, and flex-end

render() {
   return (
     <View style={styles.container}>
       <View style={[styles.flexContainer,{alignItems: 'center'}]}> //A
         <Example style={[styles.darkgrey]}>A 50%</Example>
         <Example>B 50%</Example>
       </View>
       <View style={[styles.flexContainer,{alignItems: 'flex-start'}]}> //B
          <Example style={[styles.darkgrey]}>C 33%</Example>
          <Example style={{flex: 2}}>D 66%</Example>
       </View>
       <View style={[styles.flexContainer,{alignItems: 'flex-end'}]}> //C
          <Example style={[styles.darkgrey]}>E 25%</Example>
          <Example style={{flex: 3}}>F 75%</Example>
       </View>
     </View>
   );
   }

Listing 5 Using alignSelf to override the parent container’s alignItems property

import React, { Component } from 'react';
 import { StyleSheet, Text, View} from 'react-native';
  
 export default class App extends Component<{}> {
     render() {
         return (
             <View style={styles.container}>
                 <FlexContainer style={[]}>
                     <Example align='auto'>auto</Example>  // A
                     <Example align='stretch'>stretch</Example> // B
                     <Example align='center'>center</Example> // C
                     <Example align='flex-start'>flex-start</Example> // D
                     <Example align='flex-end'>flex-end</Example> // E
                     <Example>default</Example> // F
                 </FlexContainer>
             </View>
         );
     }
 }
  
 const FlexContainer = (props) => (
     <View style={[styles.flexContainer,props.style]}>
         {props.children}
     </View>
 );
  
 const Example = (props) => (
     <View style={[styles.example,
                   styles.lightgrey,
                   {alignSelf: props.align || 'auto'}, // G
                   props.style
     ]}>
         <Text>
             {props.children}
         </Text>
     </View>
 );
  
 const styles = StyleSheet.create({
     container: {
         marginTop: 50,
         alignItems: 'center',
         flex: 1
     },
     flexContainer: {
         backgroundColor: '#ededed',
         width: 120,
         height: 180,
         borderWidth: 1,
         margin: 10
     },
     example: {
         height: 25,
         marginBottom: 5,
         backgroundColor: '#666666'
     },
 });

Flexbox is the default in React Native, but we don’t have to opt into it, meaning you don’t need to set display: flex in a style.

const styles = StyleSheet.create({
  card: {
    display: 'flex' // this is unnecessary
  }
});

Notice that the available values include integers greater than or equal to 0.

import React from "react";
import { StyleSheet, View } from "react-native";

export default function App() {
  return (
    <>
      <View style={{ backgroundColor: "#7cb48f", flex: 1 }} />
    </>
  );
}

Let’s look at a second example using the following code:

import React from "react";
import { StyleSheet, View } from "react-native";

export default function App() {
  return (
    <>
      <View style={{ backgroundColor: "#7cb48f", flex: 1 }} />
      <View style={{ backgroundColor: "#7CA1B4", flex: 3 }} />
    </>
  );
}

FlexDirection determines the direction children should render. You can code with values: column, row, column-reverse, and row-reverse, but the default is column.

import React from "react";
import { StyleSheet, View } from "react-native";

export default function App() {
  return (
    <>
      <View style={styles.container}>
        <View style={styles.square} />
        <View style={styles.square} />
        <View style={styles.square} />
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#7CA1B4",
    flex: 1,
    alignItems: "center", // ignore this - we'll come back to it
    justifyContent: "center", // ignore this - we'll come back to it
    flexDirection: "column"
  },
  square: {
    backgroundColor: "#7cb48f",
    width: 100,
    height: 100,
    margin: 4,
  },
});

<img data-attachment-id="52901" data-permalink="https://blog.logrocket.com/a-guide-to-flexbox-properties-in-react-native/flexdirection-creating-column/" data-orig-file="https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column.png" data-orig-size="828,1792" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="Flex direction property creating a column of three green squares" data-image-description data-image-caption data-medium-file="https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column-139x300.png" data-large-file="https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column-473x1024.png" loading="lazy" class="aligncenter wp-image-52901 size-large jetpack-lazy-image" src="https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column-473x1024.png" alt="Flex Direction Property Creating A Column Of Three Green Squares On The Center Of Mobile Screen" width="473" height="1024" data-lazy-srcset="https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column-473x1024.png 473w, https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column-139x300.png 139w, https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column-768x1662.png 768w, https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column-710x1536.png 710w, https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column.png 828w" data-lazy-sizes="(max-width: 473px) 100vw, 473px" data-lazy-src="https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column-473x1024.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"><img data-attachment-id="52901" data-permalink="https://blog.logrocket.com/a-guide-to-flexbox-properties-in-react-native/flexdirection-creating-column/" data-orig-file="https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column.png" data-orig-size="828,1792" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="Flex direction property creating a column of three green squares" data-image-description="" data-image-caption="" data-medium-file="https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column-139x300.png" data-large-file="https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column-473x1024.png" loading="lazy" class="aligncenter wp-image-52901 size-large" src="https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column-473x1024.png" alt="Flex Direction Property Creating A Column Of Three Green Squares On The Center Of Mobile Screen" width="473" height="1024" srcset="https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column-473x1024.png 473w, https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column-139x300.png 139w, https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column-768x1662.png 768w, https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column-710x1536.png 710w, https://blog.logrocket.com/wp-content/uploads/2021/06/flexdirection-creating-column.png 828w" sizes="(max-width: 473px) 100vw, 473px" /> Now, let’s change the direction from a column to a row using flexDirection of row.

import React from "react";
import { StyleSheet, View } from "react-native";

export default function App() {
  return (
    <>
      <View style={styles.container}>
        <View style={styles.square} />
        <View style={styles.square} />
        <View style={styles.square} />
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#7CA1B4",
    flex: 1,
    alignItems: "center", // ignore this - we'll come back to it
    justifyContent: "center", // ignore this - we'll come back to it
    flexDirection: "row",
  },
  square: {
    backgroundColor: "#7cb48f",
    width: 100,
    height: 100,
    margin: 4,
  },
});