Want create site? Find Free WordPress Themes and plugins.

Once you have complete understanding of State and Props in React Native here, we are with all about style and Layout Flex in React Native.

With React Native, you style your app using JavaScript. The majority of the core components accept a prop named style. The style names and their values generally match how CSS works on the web, aside from names are written using camel casing, e.g. backgroundColor rather than background-color.

The style prop can be a simple old JavaScript object. That is the simplest and what we typically use for example code. You can pass an array of styles too – the last style in the array has priority, so you can use this to inherit styles.

As a component develops in complexity, it is often cleaner to use StyleSheet.create to characterize several styles in one place.

Here’s an example:

react native example

Layout with Flexbox

A component can indicate the layout of its children using the flexbox algorithm. Flexbox is intended to give a consistent layout on various screen sizes.

You will typically use a combination of flexDirection, alignItems, and justifyContent to achieve the correct layout. 

Flex Direction

Flex Direction regulates the direction in which the children of a node are spread out. This is also alluded to as the main axis. The cross axis is perpendicular axis to the main axis or the axis in which the wrapping lines are laid out in.

  • Row 

    Align children from left to right. If wrapping is allowed then the next line will start under the first item on the left of the container.

  • Column (default value) 

    Align children from top to bottom. If allowed is permitted then the next line will start to the left first item on the top of the container.

  • row-reverse

    Align children from right to left. If wrapping is allowed then the next line will start under the first item on the right of the container.

  • column-reverse

    Align children from bottom to top. If wrapping is allowed then the next line will start to the left first item on the bottom of the container.

react code sample

Justify Content

JustifyContent illustrates how to align children within the main axis of their container. For instance, you can utilize this property to center a child horizontally inside a container with flexDirection set to row or vertically inside a container with flexDirection set to the column.

react justify example

We have many properties of justifyContent but in the above example, I use only two. You can elaborate on all properties by practice.

  • Flex-start
  • Flex-end
  • Center
  • space-between
  • space-around
  • space-evenly

As this we use justifyContent we can also utilize align-item, align-self, align-content and flex-wrap.

 

Did you find apk for android? You can find new Free Android Games and apps.