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.