React Native - Flexbox


Advertisements


To accommodate different screen sizes, React Native offers Flexbox support.

We will use the same code that we used in our React Native - Styling chapter. We will only change the PresentationalComponent.

Layout

To achieve the desired layout, flexbox offers three main properties − flexDirection justifyContent and alignItems.

The following table shows the possible options.

Property Values Description
flexDirection 'column', 'row' Used to specify if elements will be aligned vertically or horizontally.
justifyContent 'center', 'flex-start', 'flex-end', 'space-around', 'space-between' Used to determine how should elements be distributed inside the container.
alignItems 'center', 'flex-start', 'flex-end', 'stretched' Used to determine how should elements be distributed inside the container along the secondary axis (opposite of flexDirection)

If you want to align the items vertically and centralize them, then you can use the following code.

src/components/home/Home.js

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'

const Home = (props) ⇒ {
   return (
      <View style = {styles.container}>
         <View style = {styles.redbox} />
         <View style = {styles.bluebox} />
         <View style = {styles.blackbox} />
      </View>
   )
}
export default Home

const styles = StyleSheet.create ({
   container: {
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'grey',
      height: 600
   },
   redbox: {
      width: 100,
      height: 100,
      backgroundColor: 'red'
   },
   bluebox: {
      width: 100,
      height: 100,
      backgroundColor: 'blue'
   },
   blackbox: {
      width: 100,
      height: 100,
      backgroundColor: 'black'
   },
})
React Native Flexbox Center

If the items need to be moved to the right side and spaces need to be added between them, then we can use the following code.

src/components/home/Home.js

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'

const Home = (props) ⇒ {
   return (
      <View style = {styles.container}>
         <View style = {styles.redbox} />
         <View style = {styles.bluebox} />
         <View style = {styles.blackbox} />
      </View>
   )
}
export default Home

const styles = StyleSheet.create ({
   container: {
      flexDirection: 'column',
      justifyContent: 'space-between',
      alignItems: 'flex-end',
      backgroundColor: 'grey',
      height: 600
   },
   redbox: {
      width: 100,
      height: 100,
      backgroundColor: 'red'
   },
   bluebox: {
      width: 100,
      height: 100,
      backgroundColor: 'blue'
   },
   blackbox: {
      width: 100,
      height: 100,
      backgroundColor: 'black'
   },
})
React Native Flexbox Right

The following example shows how you can style black and yellow boxes using flexbox. Each container uses different properties.

src/components/home/Home.js

import React, { Component } from 'react'
import { View, Image, StyleSheet } from 'react-native'

const Home = () ⇒ {
   return (
      <View>
         <View style = {style.container1}>
         <View style = {style.blackImg}/>
         <View style = {style.yellowImg}/>
      </View>

      <View style = {style.container2}>
         <View style = {style.blackImg}/>
         <View style = {style.yellowImg}/>
      </View>

      <View style = {style.container3}>
         <View style = {style.blackImg}/>
         <View style = {style.yellowImg}/>
      </View>

      <View style = {style.container4}>
         <View style = {style.blackImg}/>
         <View style = {style.yellowImg}/>
      </View>

      <View style = {style.container5}>
         <View style = {style.blackImg}/>
         <View style = {style.yellowImg}/>
      </View>
   )
}
export default Home

const style = StyleSheet.create ({
   container1: {
      borderBottomWidth: 1,
      borderBottomColor: '#f4c842'
   },
   container2: {
      flexDirection: 'row',
      justifyContent: 'space-around',
      alignItems: 'center',
      borderBottomWidth: 1,
      borderBottomColor: '#f4c842'
   },
   container3: {
      flexDirection: 'row',
      justifyContent: 'flex-end',
      borderBottomWidth: 1,
      borderBottomColor: '#f4c842'
   },
   container4: {
      alignItems: 'center',
      borderBottomWidth: 1,
      borderBottomColor: '#f4c842'
   },
   container5: {
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
   },
   blackImg: {
      backgroundColor: 'black',
      height: 90,
      width: 90
   },
   yellowImg: {
      backgroundColor: 'yellow',
      height: 50,
      width: 50
   }
})
React Native Flexbox Black Yellow

Advertisements
E-Books Store