Example of flexGrow in React Native

Hello friends, In today’s tutorial we would learn about a layout prop flexGrow. The flexGrow prop used to define how many remaining space within a Parent container should be distributed among their children. Now the main point of tutorial is showing you How flexGrow works with flex direction row and column. Because I have test the code with both directions and it works differently each time. When we use flexDirection: ‘row’, with flexGrow: 1 at Root view component then it would increase the Width of children components. When we use flexDirection: ‘column’ with flexGrow: 1 on Parent then it would increase the Height of children. So in this tutorial we would learn about Example of flexGrow in React Native.

Contents in this project Example of flexGrow in React Native :-

1. Example of flexDirection: ‘column’ with flexGrow :- When we would use direction as column then parent component main axis is vertical so it increase the children in remaining space in vertical direction.


Example of flexGrow in React Native
2. Example of flexDirection: ‘row’ with flexGrow :- When we would use flex direction row and apply flex grow along with it, then its main axis is horizontal so the children components defined with flex grow should occupy all the remaining space in horizontal form.

3. Complete Source Code for App.js File :-

Leave a Reply

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