From React to React Native
By: Steffy Lo
Tags: JavaScript, Programming, Mobile, React, React Native

New in React Native

I think the main difference of plain React vs. React Native is the styling and use of Flexbox. Besides that, it is a quick transition from ReactJS to React Native, like using the View or ScrollView component instead of div .

Styling

In React Native, you style your application using JavaScript. Most components accept a prop called style . It is basically a JavaScript object specifying style names and values that mostly follows how CSS works on the web, except names are written using camel casing (e.g. backgroundColor rather than background-color ).

Note: Styling on some components, like the Button component, will not work. So to style a button, you would want to place it under a View component and style that View component instead.

It is often cleaner to use StyleSheet.create to define several styles in one place, passing styles.container to one style prop and style.blueHeader to another style prop. For example:

Flexbox

In React Native, Flexbox is used to provide a responsive design to fit different screen sizes. Some of the more common properties are explained below. Everything can be seen in more detail in the official documentation.

According to the documentation, “ flex will define how your items are going to “fill” over the available space along your main axis.”

For example, the red view uses flex: 1 , the yellow view uses flex: 2 , and the green view uses flex: 3 . 1+2+3 = 6, which translates to the red view getting 1/6 of the space, the yellow view 2/6 of the space, and the green 3/6 of the space.

Photo from Expo.

flexDirection controls the direction in which the children of a node are laid out and represents the main axis. The cross axis is the axis perpendicular to the main axis.

column (default value): Aligns children from top to bottom.

(default value): Aligns children from top to bottom. column-reverse : Aligns children from bottom to top.

: Aligns children from bottom to top. row : Aligns children from left to right.

: Aligns children from left to right. row-reverse : Aligns children from right to left.

justifyContent describes how to align children within the main axis of their container.

flex-start (default value): Aligns children of a container to the start of the container’s main axis.

(default value): Aligns children of a container to the start of the container’s main axis. flex-end : Aligns children of a container to the end of the container’s main axis.

: Aligns children of a container to the end of the container’s main axis. center : Aligns children of a container in the center of the container’s main axis.

: Aligns children of a container in the center of the container’s main axis. space-between : Evenly space off children across the container’s main axis, distributing the remaining space between the children.

: Evenly space off children across the container’s main axis, distributing the remaining space between the children. space-around : Evenly space off children across the container’s main axis, distributing the remaining space around the children. Compared to space-between , using space-around will result in space being distributed to the beginning of the first child and the end of the last child.

: Evenly space off children across the container’s main axis, distributing the remaining space around the children. Compared to , using will result in space being distributed to the beginning of the first child and the end of the last child. space-evenly : Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items (the main-start edge and the first item, and the main-end edge and the last item) is exactly the same.

Photo from BitDegree.

alignItems describes how to align children along the cross axis of their container.

stretch (default value): Stretch children of a container to match the height of the container’s cross axis.

(default value): Stretch children of a container to match the height of the container’s cross axis. flex-start : Aligns children of a container to the start of the container’s cross axis.

: Aligns children of a container to the start of the container’s cross axis. flex-end : Aligns children of a container to the end of the container’s cross axis.

: Aligns children of a container to the end of the container’s cross axis. center : Aligns children of a container in the center of the container’s cross axis.

According to the docs:

“ flexWrap is set on containers and controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.”