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.
Grid Layout with Mixed Sizing and Merged Cells
We can merge cells with the colSpan and rowSpan props.
For example, we can write:
import * as React from "react";
export default function Greeting({ }) {
return (
<gridLayout
columns="40, auto, *"
rows="40, auto, *"
backgroundColor="#3c495e"
>
<label text="0,0" row={0} col={0} backgroundColor="red" />
<label text="0,1" row={0} col={1} colSpan={2} backgroundColor="green" />
<label text="1,0" row={1} col={0} rowSpan={2} backgroundColor="blue" />
<label text="1,1" row={1} col={1} backgroundColor="yellow" />
<label text="1,2" row={1} col={2} backgroundColor="purple" />
<label text="2,1" row={2} col={1} backgroundColor="orange" />
<label text="2,2" row={2} col={2} backgroundColor="white" />
</gridLayout>
);
}
We set the colSpan prop to make the label span 2 columns.
And we set the rowSpan to make the label span 2 rows.
StackLayout
The stackLayout component lets us add items that are stacked one on top of another.
For instance, we can write:
import * as React from "react";
export default function Greeting({ }) {
return (
<stackLayout backgroundColor="#3c495e">
<label text="first" height={70} backgroundColor="red" />
<label text="second" height={70} backgroundColor="green" />
<label text="third" height={70} backgroundColor="blue" />
</stackLayout>
);
}
We put the label s in the stackLayout so that they’re stacked on top of each other.
Horizontal Stacking
We can set the orientation to 'horizontal' so that we make the items display side by side.
To do this, we write:
import * as React from "react";
export default function Greeting({ }) {
return (
<stackLayout orientation="horizontal" backgroundColor="#3c495e">
<label text="first" height={70} backgroundColor="red" />
<label text="second" height={70} backgroundColor="green" />
<label text="third" height={70} backgroundColor="blue" />
</stackLayout>
);
}
to do this.
Stack Layout with Horizontally Aligned Children
Child components can be horizontally aligned.
For instance, we can write:
import * as React from "react";
export default function Greeting({ }) {
return (
<stackLayout backgroundColor="#3c495e">
<label
text="left"
horizontalAlignment="left"
width={33}
height={70}
backgroundColor="red"
/>
<label
text="center"
horizontalAlignment="center"
width={33}
height={70}
backgroundColor="green"
/>
<label
text="right"
horizontalAlignment="right"
width={33}
height={70}
backgroundColor="blue"
/>
<label
text="stretch"
horizontalAlignment="stretch"
height={70}
backgroundColor="yellow"
/>
</stackLayout>
);
}
We set the horizontalAlignment prop to align them label to where we want them.
Setting the prop to 'stretch' makes it span the whole width of the screen.
Horizontal Stack Layout with Vertically Aligned Children
We can vertically align child items in the stackLayout .
To do this, we write:
import * as React from "react";
export default function Greeting({ }) {
return (
<stackLayout orientation="horizontal" backgroundColor="#3c495e">
<label
text="top"
verticalAlignment="top"
width={70}
height={33}
backgroundColor="red"
/>
<label
text="middle"
verticalAlignment="middle"
width={70}
height={33}
backgroundColor="green"
/>
<label
text="bottom"
verticalAlignment="bottom"
width={70}
height={33}
backgroundColor="blue"
/>
<label
text="stretch"
verticalAlignment="stretch"
width={70}
backgroundColor="yellow" />
</stackLayout>
);
}
to set the orientation to 'horizontal' to make the label s align vertically.
verticalAlignment is set to align the item to the position we want.
When it’s set to 'stretch' , it’ll span the whole height of the screen.
Conclusion
We can add a grid and stack layout into our mobile app with React NativeScript.
