React-native styling View, Flex Dimensions, Flexbox

In this article, we learn about react-native styling view, flex dimensions, flexbox layout and how to use these using these components you can design awesome UI. All components in react-native accept common props called style 

React native view

In react native all components must be displayed inside View, without view we can not render components on the screen

This is not gone be displayed until you set height and width to parent View

You can stylesheet to text as well as View as follows

flex: 1 will expand the view and fill all available space make sure its parent dimension is greater than 0, otherwise it won’t be work to avoid this you must set height, width or flex to parent view if you don’t set height, width or flex to view it will be considered as 0

we can set height and width dynamically with respect to window

now you can add your own logic using these height and width i suggest you to make another file for style called Style.js and make new directory under root folder called CSS and keep this Style.js in CSS folder so that you can access it globally

Code for Style.js

Now just import this Style.js like below

Usage you can add style from here also

Flex Dimensions

To know more about Flex dimensions please check this react-native official website click here

Flexbox

It provide consistent layout on different screen sizes, that’s why it is very useful

If we remove flexWrap: ‘wrap’ from style then have to add horizontal scroll view like below

When we remove height width and add flex: 1 then

Let’s change  flexDirection: ‘column’ see the result

React-native Flex direction Flexbox
React-native Flex direction Flexbox

Now, we can render this view inside a loop to display dynamic data don’t need to create Adapter for displaying list just put view inside a loop like below

This is how we can render dynamic data

Thank you 🙂 enjoy coding…

2 Replies to “React-native styling View, Flex Dimensions, Flexbox”

Leave a Reply

Your email address will not be published. Required fields are marked *