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
import React from 'react';
import { View } from 'react-native';
// Try removing the `flex: 1` on the parent View.
// The parent will not have dimensions, so the children can't expand.
// What if you add `height: 300` instead of `flex: 1`?
export default () => (
<View style={{ flex: 1 }}>
<View style={{ flex: 1, backgroundColor: 'powderblue' }} />
<View style={{ flex: 2, backgroundColor: 'skyblue' }} />
<View style={{ flex: 3, backgroundColor: 'steelblue' }} />
</View>
);
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
import React from 'react';
import { View, Text, Dimensions } from 'react-native';
export default () => {
const { width } = Dimensions.get('window')
return (
<View>
<Text style={{ padding: 10 }}>row (default)</Text>
<View style={{ flexDirection: 'row', width, height: width, backgroundColor: 'whitesmoke' }}>
<View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
</View>
<Text style={{ padding: 10, marginTop: 10 }}>column</Text>
<View style={{ flexDirection: 'column', width, height: width, backgroundColor: 'whitesmoke' }}>
<View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
</View>
</View>
);
}
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
import React from 'react';
import { View, Text, Dimensions } from 'react-native';
export default () => {
const { width } = Dimensions.get('window')
return (
<View>
<Text style={{ padding: 10 }}>flex-start</Text>
<View style={{ flexDirection: 'row', justifyContent: 'flex-start', backgroundColor: 'whitesmoke' }}>
<View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
</View>
<Text style={{ padding: 10, marginTop: 10 }}>center</Text>
<View style={{ flexDirection: 'row', justifyContent: 'center', backgroundColor: 'whitesmoke' }}>
<View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
</View>
</View>
);
}
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
import React from 'react';
import { View, Text, Dimensions } from 'react-native';
export default () => {
return (
<View>
<Text style={{ padding: 10 }}>stretch (default)</Text>
<View style={{ alignItems: 'stretch', backgroundColor: 'whitesmoke' }}>
<View style={{ height: 50, backgroundColor: 'powderblue' }} />
<View style={{ height: 50, backgroundColor: 'skyblue' }} />
<View style={{ height: 50, backgroundColor: 'steelblue' }} />
</View>
<Text style={{ padding: 10, marginTop: 10 }}>flex-start</Text>
<View style={{ alignItems: 'flex-start', backgroundColor: 'whitesmoke' }}>
<View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
</View>
<Text style={{ padding: 10, marginTop: 10 }}>center</Text>
<View style={{ alignItems: 'center', backgroundColor: 'whitesmoke' }}>
<View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
</View>
<Text style={{ padding: 10, marginTop: 10 }}>flex-end</Text>
<View style={{ alignItems: 'flex-end', backgroundColor: 'whitesmoke' }}>
<View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
</View>
</View>
);
}
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:
flex-direction: row;
align-items: flex-start;
position: static;
And React Native:
flex-direction: column;
align-items: stretch;
position: 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
Advances
4. React Native DatepickerAndroid
5. React native ScrollView scroll to position
6. How to align icon with text in react native
8. React Native Firebase Crashlytics
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
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?
