Skip to main content
Version: Next

Understanding Layout

Understanding vertical and horizontal keys

Nano makes it easy to place components in horizontal and vertical directions in a screen. it uses keys v1, v2, v3, v4, v5 ..... vn to place components vertically and uses keys h1, h2, h3, h4, h5 ..... hn to place components horizontally.

Vertically placing components:

For example, consider we need to display two text components like below.

const text1 = {
component: NANO.TEXT,
value: "TEXT 1",
props: {
style: {
fontSize: 10,
}
}
};

const text2 = {
component: NANO.TEXT,
value: "TEXT 2",
props: {
style: {
fontSize: 10,
}
}
};

Now we want to place it vertically one after one, we can do it by using any one of vertical keys, I am using v1 key here.

const screen = {
name: 'Welcome',
screen: {
v1: [text1, text2]
}
};

Horizontally placing components:

We can place two components horizontally by using any one of horizontal keys, I am using h1 here.

const screen = {
name: 'Welcome',
screen: {
h1: [text1, text2]
}
};

If you need more than one horizontal/vertical layouts, use different vertical or horizontal keys, the same keys should not be re-used.