React Native - Flexbox




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 - 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.

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',
      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'
   },
})

Output

React Native - Flexbox

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',
      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



Frequently Asked Questions

+
Ans: React Native - Styling view more..
+
Ans: React Native - Props view more..
+
Ans: React Native - State view more..
+
Ans: React Native - Flexbox view more..
+
Ans: React Native - ListView view more..
+
Ans: React Native - Text Input view more..
+
Ans: React Native - ScrollView view more..
+
Ans: React Native - Images view more..
+
Ans: React Native - HTTP view more..
+
Ans: React Native - Buttons view more..
+
Ans: React Native - Animations view more..
+
Ans: React Native - Debugging view more..
+
Ans: React Native - Router view more..
+
Ans: React Native - Running IOS view more..
+
Ans: React Native - Running Android view more..
+
Ans: React Native - View view more..
+
Ans: React Native - WebView view more..
+
Ans: React Native - Modal view more..




Rating - NAN/5
533 views

Advertisements