React Native - Flexbox

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

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

Layout

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

The following table shows the possible options.

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

App.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 ,
      apgnItems:  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 
   },
})

Output

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.

App.js

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

const App = (props) => {
   return (
      <View style = {styles.container}>
         <View style = {styles.redbox} />
         <View style = {styles.bluebox} />
         <View style = {styles.blackbox} />
      </View>
   )
}

export default App

const styles = StyleSheet.create ({
   container: {
      flexDirection:  column ,
      justifyContent:  space-between ,
      apgnItems:  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 
   },
})

Previous Page Print Page Next Page   Advertisements