Learn how to develop a mobile app using Flexbox Layout in React Native. Also, check out the github repository to successfully implement the code.

1. Understanding
Flexbox
Layout in
React Native
https://www.bacancytechnology.com/

2. Introduction

3. If you have worked with mobile
applications development or frontend
development, you might be familiar with
designing an application using flexbox. If
you don’t know, then don’t worry. Just stick
to this tutorial till the end; you will come to
know the basics and implementation of
flexbox layout.
Let’s move ahead with our tutorial: Flexbox
Layout in React Native Application without
further ado.

4. Tutorial Goals

5. General discussion about flexbox layout
Different React Native layouts
Flexbox layout properties
Implementing flexbox layout in React
Native app
The first thing to know is what our tutorial
has for you. So, these are the main sections
that we will cover in this blog post.
So much knowledge, right? Moving towards
our first section. Let’s read about what
flexbox is and learn about its concept.

6. What is
Flexbox:
Fundamental
Concepts of
Flexbox Layouts

7. Flexible Box Module, popularly known as
flexbox, is a designing model that deals with
a one-dimensional layout of an application.
Now, what does this one-dimensional
layout means? Simple, it states that the
concept of flexbox relies on the layout with
one dimension at a time – it could be a row
or column.
Further, flexbox gives the freedom to
distribute the space between interface
items and powerful alignments capabilities.
Flexbox layout has made developers’ lives
easy by lessening application
responsiveness struggles.
Fundamental concepts of Flexbox Layout

8. Two Axes of Flexbox
Main Axis: It is defined by property flex-
direction
Cross Axis: It runs perpendicular to the
main axis
Flexbox deals with two axes –
Start and End Lines
Before, CSS had given more importance to
left-to-write writing mode and made it
default. But, with modern layout methods, a
wide range of writing modes was
introduced. Thus, it stopped the assumption
of text lines starting at the top left of the
document and ending at the right of the
document.

9. Flex Container
The area of the document on which we want
to apply the flex property can be said as a
flex container. To create a flex container,
you just need to set the display property(of
the area’s container) as flex or inline-flex.
And, items within the area’s container will
become flex items.

10. Looking for React Native
developers to build high-
performance mobile
applications?
Bacancy has the most
dedicated and skilled
developers. Contact us
today and hire React Native
developer!

11. React Native
Layout
Differences

12. React Native provides limited but sufficient
flexbox layout properties and values. The
main difference is that all the React Native
container elements are, by default, Flex
containers. There’s no need to add a display:
‘flex’. It avoids writing extra code.
Keep in mind that the child element of the
parent container can be positioned with the
property Flex item – ‘align-self’. Here’s an
example of applying the property align-
self:flex-end to Flex container (last box) that
contains child elements.

13. Here are different defaults for React native
development that makes flexbox more
advantageous.

14. Properties:
Flexbox Layout
in React Native

15. This section will discuss flexbox properties
that can enhance your application’s design.

16. Flexbox Layout
in React Native
Example

17. orange box
white box
green box.
Let’s implement flexbox in our React Native
application.
Our demo application will have a parent
container with three boxes:
The parent and child container is a View
Component.

18. // Layout const App = () => { return (
<View style={styles.container}>
<View style={styles.orangeBox} />
<View style={styles.whiteBox} />
<View style={styles.greenBox} />
</View> ); }; // Style const styles =
StyleSheet.create({ container: {
backgroundColor: '#454545', },
orangeBox: { width: 80, height: 80,
backgroundColor: 'orange', }, whiteBox: {
width: 80, height: 80, backgroundColor:
'white', }, greenBox: { width: 80, height: 80,
backgroundColor: 'blue', }, });
Output

19. After adding the property is flex: 1, the
space is split into a single group; thus, our
parent container will display on the entire
screen.
container: {
flex: 1,
backgroundColor: '#454545',
},
React Native Flex

20. Output

21. React Native Flex Direction
flexDirection controls the direction of child
elements of the parent container. Here are
the values you can add to flexDirection.
column– It is the default value. It aligns
child elements from top to bottom. On
enabling the wrapping, the next line will
start to the right of the first item to the
top container.
row– It aligns the elements from left to
the right. The next line will start under
the first element to the left container on
enabling the wrapping.
column- reverse– It aligns elements in
the reverse order – bottom to top. On
enabling the wrapping, the next line will
start to the right of the first item to the
bottom container.

22. row-reverse– It aligns elements in the
reverse order – right to left. The next
line will start under the first item to the
right container to enable the wrapping.
container: {
flex: 1,
flexDirection: 'row',
backgroundColor: '#454545',
},
Output

23. React Native Justify
Content
flex-start- It is the default value. Aligns
elements to the container’s main axis
start.
flex-end-Aligns elements to the
container’s main axis end.
center- Aligns elements to the
container’s main axis center.
justifyContent is used to align the child
elements within the main axis of the parent
container. You can set the elements
horizontally and vertically by setting
flexDirection as row and column.
The property offers a few more values are
stated below:

24. space-between- Evenly space off the
elements and distribute the remaining
spaces equally between the children
across the container’s main axis.
space-around- Evenly space off the
elements and distribute the remaining
spaces around the children across the
container’s main axis.
space-evenly- Evenly distributes the
elements. The spaces between the
adjacent items, first item and main-
start edge, and last item and main-end
edge are the same.
Let’s see a few examples.

25. justifyContent: ‘flex-start’
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-
start',
backgroundColor:
'#454545',
},
Output

26. Below are the screenshots of the output of
each of these values used for property
justifyContent.
justifyContent: ‘flex-end’

27. justifyContent: ‘center’
justifyContent: ‘space-around’

28. justifyContent: ‘space-between’
justifyContent: ‘space-evenly’

29. React Native Align Items
alignItems is used to align the child with the
cross axis of its parent container. Similar to
justifyContent that aligns with the main
axis, this property will align the children
with the cross axis.
Let’s take some examples.
alignItems: ‘flex-start’
container: {
flex: 1,
flexDirection: 'row',
justifyContent: flex-start',
alignItems: flex-start,
backgroundColor: '#454545',
},

30. Output
Below are the screenshots of each of these
values.
alignItems: ‘flex-end’

31. alignItems: ‘center’
So, this was understanding and
implementing the Flexbox layout in React
Native. I hope the purpose of the tutorial
was served as you expected.

32. Github
Repository:
Flexbox React
Native Example

33. If you wish to clone the repository and play
around with the code. Here’s the github
repo: flexbox-layout-demo.
If you want to practice more with an online
game interface, then you can play the game
flexbox froggy.

34. Conclusion

35. Flexbox is easy to maintain and understand;
once you have understood its concept, you
would love to work with it. If you have any
queries, suggestions, or feedback, write us
back. Also, feel free to suggest topics if you
want us to write a tutorial on them. Keep
learning!

36. Thank You
https://www.bacancytechnology.com/