React is an easy to use framework for building front end apps.
NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.
In this article, we’ll look at how to build an app with NativeScript React.
Flexbox Layout with Justify Content
We can set the justifyContent prop of a flexboxLayout to add spacing between the child components.
For example, we can write:
import * as React from "react";
export default function Greeting({ }) {
return (
<flexboxLayout
flexDirection="column-reverse"
justifyContent="space-around"
backgroundColor="#3c495e"
>
<label text="first" height={70} backgroundColor="red" />
<label
text="second"
alignSelf="center"
width={70}
height={70}
backgroundColor="green"
/>
<label
text="thirdnflex-end"
alignSelf="flex-end"
width={70}
height={70}
backgroundColor="blue"
/>
<label text="fourth" height={70} backgroundColor="yellow" />
</flexboxLayout>
);
}
space-around adds space around the label s.
column-reverse place items in a column, starting from the bottom.
alignSelf changes the position of items across the main axis.
GridLayout
We can use the GridLayout component to place items in a grid.
For example, we can write:
import * as React from "react";
export default function Greeting({ }) {
return (
<gridLayout
columns="115, 115"
rows="115, 115"
>
<label text="0,0" row={0} col={0} backgroundColor="red" />
<label text="0,1" row={0} col={1} backgroundColor="green" />
<label text="1,0" row={1} col={0} backgroundColor="blue" />
<label text="1,1" row={1} col={1} backgroundColor="yellow" />
</gridLayout>
);
}
We add the label s and set their location with the row and col props.
The columns and rows props have the width of the columns and the height of the rows respectively.
Grid Layout with Star Sizing
We can set the star sizing to allot space proportionally to child elements.
For instance, we can write:
import * as React from "react";
export default function Greeting({ }) {
return (
<gridLayout
columns="*, 2*"
rows="2*, 3*"
backgroundColor="#3c495e"
>
<label text="0,0" row={0} col={0} backgroundColor="red" />
<label text="0,1" row={0} col={1} backgroundColor="green" />
<label text="1,0" row={1} col={0} backgroundColor="blue" />
<label text="1,1" row={1} col={1} backgroundColor="yellow" />
</gridLayout>
);
}
The columns prop sets the first column to take 1/3 of the screen’s width and the 2nd column takes 2/3.
And the rows prop sets the first column to take 2/5 of the screen’s width and the 2nd column takes 3/5.
Grid Layout with Fixed and Auto-Sizing
We can mix fixed-size items with automatically sized items.
For instance, we can write:
import * as React from "react";
export default function Greeting({ }) {
return (
<gridLayout
columns="80, auto"
rows="80, 80"
backgroundColor="#3c495e"
>
<label text="0,0" row={0} col={0} backgroundColor="red" />
<label text="0,1" row={0} col={1} backgroundColor="green" />
<label text="1,0" row={1} col={0} backgroundColor="blue" />
<label text="1,1" row={1} col={1} backgroundColor="yellow" />
</gridLayout>
);
}
We set the columns prop to 80px and automatically sized to fit the content with auto respectively.
And we set both rows to have 80px height respectively.
Conclusion
We can add flexbox and grid layouts into our mobile app with React NativeScript.
