How to style in react native

React Native is an open-source mobile application framework. This is my personal experience from my previous project, I learned about react native and recognize the way to style is completely different than usual, it does not use HTML or CSS. With React Native you style your application using JavaScript. All of the core components accept a prop named style. What do I mean by this, Here’s an example.

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

And the style names and values usually match how CSS works on the web, except names are written using camel casing. Every time when you style in react native, you have to import the component to your file and then you will be able to style (you can see the example from the previous picture above).

If you would like to style text you have to import the <Text> component from react native, this is an example.

In React Native, you must wrap all the text nodes inside of a <Text> component. You cannot have a text node directly under a <View>.

Flex

Flex will define how your items are going to “fill” over the available space along your main axis. Space will be divided according to each element’s flex property. Normally you will use flex: 1, which tells a component to fill all available space.

In the following example, the red, yellow, and green views are all children in the container view that have flex: 1 set. The red view uses flex: 1 , the yellow view uses flex: 2, and the green view uses flex: 3 . 1+2+3 = 6, which means that the red view will get 1/6 of the space, the yellow 2/6 of the space, and the green 3/6 of the space.

Height and Width

A component’s height and width define its size on the screen. There are two different ways to set the height and width of a component: Fixed Dimensions and Flex Dimensions.

Fixed Dimensions

Using fixed height and fixed width in style is the simplest way to set the dimension of the component. The dimensions of React Native component are unit-less, and they represent density-independent pixels.

Setting the dimension of components with fixed size is common and exactly the same size, regardless of screen dimensions.

Flex Dimensions

The flex property styles the component to expand and shrink it dynamically according to available space. Setting flex: 1 will fill all the available space to the component, and shared evenly among the other components of same as the parent. Higher the flex value, occupy components higher ratio of space compared to its siblings.

The react native styled you can research more on the react native docs. Have a ton of styles you can play with, I hope this blog can help you familiarize yourself a bit with react native styling.