React Native Tutorial Part - 7 | React Native Tutorial For Beginners | Learn2Earn Labs | Hindi

Hey Learners,
Here is one of our lecture recording of React Native. It will help you in understanding the topics and development concepts.

LAYOUTS IN REACT NATIVE
The layout system is a fundamental concept that needs to be mastered in order to create great layouts and UIs.
React Native uses both fixed & flex layouts in order to create app UIs.

FIXED & FLEX LAYOUTS

Fixed Layouts
The general way to set the dimensions of a component is by adding a fixed width and height to style.
Setting the dimension of component with fixed size is common and exactly the same size, regardless of screen dimensions.

Flex Layouts
Flex is the acronym for Flexible Box, which means elastic layout to provide maximum flexibility for box-like models.
The main idea of the Flex layout is to give the container the ability to have its sub-items change its width, height (or even order) to best fill the available space.
Normally we will use flex: 1, which tells a component to fill all available space, shared evenly amongst other components with the same parent.

FLEXBOX IN REACT NATIVE
Flexbox is a layout technique that is used to structure the layout of your application in a responsive manner.
Flexbox is designed to provide a consistent layout on different screen sizes.
Flexbox layout’s only available for use on View components.
In React Native, by default, the Main Axis is vertical while the Cross Axis is horizontal in Flexbox layouts.

We can easily make flex layouts with yoga layouts ---https://yogalayout.com/playground/

PROPERTIES RELATED TO FLEXBOX
Below we have following properties that we can use with flexbox in React Native :-
a) flex
b) flexDirection
c) flexBasis
d) flexGrow
e) flexShrink
f) flexWrap
g) justifyContent
h) alignItems
i) alignSelf
j) flexWrap


DEVICE HEIGHT & WIDTH IN REACT NATIVE
React native components did support the percentage(%) format like we have already seen in web applications.
We will use Dimensions component / api of react-native to get the Height and Width of the Device.

1) Getting Dimensions of Device Window
The 'window' property calculates the available width/height without the soft menu & status bar.
Size of the visible Application window.
a) Importing Dimension API ------ import {Dimensions } from "react-native";
b) Getting Device Width ------- const screenWidth = Math.round(Dimensions.get('window').width);
c) Getting Device Height -------- const screenHeight = Math.round(Dimensions.get('window').height);

2) Getting Dimensions of Device Screen

The 'screen' property calculates the available width/height with the soft menu & status bar.
Size of the device's screen.
a) Importing Dimension API ------ import {Dimensions } from react-native;
b) Getting Device Width ------- const screenWidth = Math.round(Dimensions.get('screen').width);
c) Getting Device Height -------- const screenHeight = Math.round(Dimensions.get('screen').height);


COLORS & TYPOGRAPHY IN REACT NATIVE

a) Colors In React Native

Method 1 - Using Colors
We also include the default text color hex values for each platform.
We can also fetch colors from,
a) HTMLColorCodes -- https://htmlcolorcodes.com/
b) Colordrop.io -- https://colordrop.io/
c) UIColorPicker.com -- https://uicolorpicker.com/

Method 2 - Using Package
react-native-typography is a package that provides a set of text styles and helpers that provide great rendering on iOS, Android and the web.
Command to install package ---- npm i react-native-typography / yarn add react-native-typography.

b) Typography In React Native

Method 1 -- By Using Google Fonts
Google Fonts is a library of more than a thousand free and open source font families, an interactive web directory for browsing the library, and APIs for using the fonts via CSS and Android.

Method 2 -- By Using Package
react-native-typography is a package that provides a set of text styles and helpers that provide great rendering on iOS, Android and the web.
Command to install package ---- npm i react-native-typography / yarn add react-native-typography.

Hope you enjoyed this tutorial! Don’t forget to subscribe to my channel.
https://www.youtube.com/channel/UCf4bJDvTPqiY2hGI51Q22jQ

If you have any query then visit our website-
https://www.learntoearnlabs.com/

If you want to connect with the trainer then here is the LinkedIn profile link
https://www.linkedin.com/in/rohitsinghprofile/

Have a good time ahead!
Thank you