Navigate back to the homepage

React Native Flexbox

Infinitbility
Flexbox
January 24th, 2021 · 3 min read
React Native Flexbox

This Article Part of React Native Tutorial Series want to start from scrach follow below link

https://infinitbility.com/react-native/table-of-contents

In this article we are going to learn the basics of styling a component in React Native using Flexbox. If you have already used Flexbox for web with CSS, the same concepts are used in React Native as well. There are some minute differences between the both.


Flexbox

Flexbox is a one-dimensional layout system that we can use to create a row or a column axis layout. It makes our life easier to design and build responsive web pages without having to use tricky hacks and a lot of float and position properties in our CSS code. in simple language, flexbox use for responsive design.

what is responsive design?

responsive design gives same look and appearence on mobile as well as desktop and many devices.


Layout

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

Let’s discuss one by one with examples.


flex

In React Native flex does not work the same way that it does in CSS. flex is a number rather than a string, and it works according to the Yoga layout engine.

flex allow only positive numbers.

what if i put negative number & zero?

the component is normally sized according to width and height. However, if there’s not enough space, the component will shrink to its minWidth and minHeight.

we will use the same examples provided by react native for better understanding.

How Flex work ?

When using flex, we pass a number value. The larger the value, the higher the ratio of space a component will take compared to its siblings. A component with no siblings will fill its parent fully as long as the value is greater than 0. A flex value of 0 indicates that the component should not expand beyond its “intrinsic dimensions”. In the following example, we render one Text component with a flex value of 0, and another with a flex value of 1.

flex.js

1import React from 'react';
2import { View } from 'react-native';
3
4// Try removing the `flex: 1` on the parent View.
5// The parent will not have dimensions, so the children can't expand.
6// What if you add `height: 300` instead of `flex: 1`?
7export default () => (
8 <View style={{ flex: 1 }}>
9 <View style={{ flex: 1, backgroundColor: 'powderblue' }} />
10 <View style={{ flex: 2, backgroundColor: 'skyblue' }} />
11 <View style={{ flex: 3, backgroundColor: 'steelblue' }} />
12 </View>
13);

The intrinsic height of the text component is just large enough to fit the text itself. Note that flex defaults to 0 (use intrinsic dimensions), and that many components have an intrinsic width and height of 0 (such as View). If a component has a width or height of 0, nothing will render on the screen. This is a common source of confusion for beginners.


flexDirection

We use flexDirection to choose either a vertical or horizontal layout of children components. The two values we commonly use are:

  • row: Align children from left to right.
  • column: (default) Align children from top to bottom.

flexDirection.js

1import React from 'react';
2import { View, Text, Dimensions } from 'react-native';
3
4export default () => {
5 const { width } = Dimensions.get('window')
6
7 return (
8 <View>
9 <Text style={{ padding: 10 }}>row (default)</Text>
10 <View style={{ flexDirection: 'row', width, height: width, backgroundColor: 'whitesmoke' }}>
11 <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
12 <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
13 <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
14 </View>
15 <Text style={{ padding: 10, marginTop: 10 }}>column</Text>
16 <View style={{ flexDirection: 'column', width, height: width, backgroundColor: 'whitesmoke' }}>
17 <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
18 <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
19 <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
20 </View>
21 </View>
22 );
23}

The option we choose here determines the main axis of the layout. Our choice here will affect the meaning of the other layout properties.

There are two other options for flexDirection, row-reverse and column-reverse, which will reverse the order of the children. These are rarely used; instead of adjusting the layout, reverse the order of the children in the component's render method.


justifyContent

We use justifyContent to determine the distribution of children align the primary axis. Here are the options for values we can use:

  • flex-start: (default) Distribute children at the start of the main axis.
  • center: Distribute children in the center of the main axis.
  • flex-end: Distribute children at the end of the main axis.
  • space-between: Distribute children evenly along the main axis, with remaining space between the children.
  • space-around: Distribute children evenly along the main axis, with remaining space between the children, and also at the beginning and end of the main axis.

justifyContent.js

1import React from 'react';
2import { View, Text, Dimensions } from 'react-native';
3
4export default () => {
5 const { width } = Dimensions.get('window')
6
7 return (
8 <View>
9 <Text style={{ padding: 10 }}>flex-start</Text>
10 <View style={{ flexDirection: 'row', justifyContent: 'flex-start', backgroundColor: 'whitesmoke' }}>
11 <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
12 <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
13 <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
14 </View>
15 <Text style={{ padding: 10, marginTop: 10 }}>center</Text>
16 <View style={{ flexDirection: 'row', justifyContent: 'center', backgroundColor: 'whitesmoke' }}>
17 <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
18 <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
19 <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
20 </View>
21 </View>
22 );
23}

alignItems

We use alignItems to determine the alignment of children along the cross axis. The cross axis is the axis that runs perpendicular to the main axis, e.g. if our flex-direction is column then our main axis is vertical and our cross axis is horizontal. Here are the options for values we can use:

  • stretch: (default) Stretch children to fill the parent.
  • flex-start: Align children at the start of cross axis.
  • flex-end: Align children at the end of cross axis.
  • center: Align children at the center of cross axis.
  • baseline: Align children along a common baseline. Individual children can be set to be the reference baseline for their parents.

alignItems.js

1import React from 'react';
2import { View, Text, Dimensions } from 'react-native';
3
4export default () => {
5 return (
6 <View>
7 <Text style={{ padding: 10 }}>stretch (default)</Text>
8 <View style={{ alignItems: 'stretch', backgroundColor: 'whitesmoke' }}>
9 <View style={{ height: 50, backgroundColor: 'powderblue' }} />
10 <View style={{ height: 50, backgroundColor: 'skyblue' }} />
11 <View style={{ height: 50, backgroundColor: 'steelblue' }} />
12 </View>
13 <Text style={{ padding: 10, marginTop: 10 }}>flex-start</Text>
14 <View style={{ alignItems: 'flex-start', backgroundColor: 'whitesmoke' }}>
15 <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
16 <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
17 <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
18 </View>
19 <Text style={{ padding: 10, marginTop: 10 }}>center</Text>
20 <View style={{ alignItems: 'center', backgroundColor: 'whitesmoke' }}>
21 <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
22 <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
23 <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
24 </View>
25 <Text style={{ padding: 10, marginTop: 10 }}>flex-end</Text>
26 <View style={{ alignItems: 'flex-end', backgroundColor: 'whitesmoke' }}>
27 <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
28 <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
29 <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
30 </View>
31 </View>
32 );
33}

Note that stretch will not stretch a child if its width is set explitly (or height in the case of a flexDirection: row parent).

Differences from CSS

The most important difference between flexbox in CSS and React Native are the default values.

Here are the defaults for CSS:

1flex-direction: row;
2align-items: flex-start;
3position: static;

And React Native:

1flex-direction: column;
2align-items: stretch;
3position: relative;

Defaulting to a column layout on mobile is reasonable, since phones are by far the most common mobile device, and most of the time they’re used in a vertical layout.

There are a few other differences, such as flex only supporting a single number value in React Native, but the framework will generally warn you if you try to do something that isn’t supported.

More From React Native Tutorial

Basics

  1. Introduction To React Native
  2. React Native Environment Setup using expo
  3. React Native Environment Setup for windows
  4. React Native Environment setup on Mac OS
  5. React Native Environment setup on linux
  6. React Native Project Structure
  7. React Native State
  8. React Native Props
  9. React Native Styling
  10. React Native Flexbox
  11. React Native Text
  12. React Native Textinput
  13. React Native Commands
  14. React Native ScrollView

Advances

  1. React Native Dark Mode
  2. React Native Fonts
  3. React Native SQLite
  4. React Native DatepickerAndroid
  5. React native ScrollView scroll to position
  6. How to align icon with text in react native
  7. React Native Image
  8. React Native Firebase Crashlytics
  9. React Native Async Storage
  10. React Native Share

Error & Issue Solution

  1. Task :app:transformDexArchiveWithDexMergerForDebug FAILED In React Native
  2. Expiring Daemon because JVM heap space is exhausted In React Native
  3. Task :app:transformNativeLibsWithMergeJniLibsForDebug FAILED In React Native
  4. Unable to determine the current character, it is not a string, number, array, or object in react native
  5. App crashed immediately after install react native video or track player
  6. how to delete SQLite database in android react native
  7. React native material dropdown twice click issue
  8. How to get the current route in react-navigation?
  9. how to disable drawer on the drawer navigation screen?
  10. Image not showing in ios 14 react native

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

More articles from Infinitbility

React Native Styling

React Native Styling

React Native Tutorial - React Native Styling

January 17th, 2021 · 1 min read
React Native Props

React Native Props

React Native Tutorial - React Native Props

January 15th, 2021 · 2 min read
© 2021 Infinitbility
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]