react-native-navigation/website/docs/api-root.mdx

---
id: root-api
title: Root
sidebar_label: Root
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

## `setRoot()`
Used to set the UI of the application. Read more about the root hierarchy level in the [docs section](docs-root.mdx).

#### Parameters
| Name   | Required | Type                | Description                                                                                                            |
| ------ | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| layout | Yes      | [Layout](Layout.mdx) | Any type of layout. [BottomTabs](layout-BottomTabs.mdx), [Stack](stack-layout.mdx), [SideMenu](sideMenu-layout.mdx), [Component](layout-component.mdx) |

#### Example

<Tabs
  defaultValue='stack'
  values={[
    { label: 'With Stack layout', value: 'stack' },
    { label: 'With BottomTabs layout', value: 'bottomTabs' }
  ]
}>

<TabItem value='stack'>

```js
Navigation.setRoot({
  root: {
    stack: {
      children: [{
        component: {
          name: 'example.FirstTabScreen',
          passProps: {
            text: 'This is tab 1'
          }
        }
      }],
      options: {
        bottomTab: {
          text: 'Tab 1',
          icon: require('../images/one.png'),
          testID: 'FIRST_TAB_BAR_BUTTON'
        }
      }
    }
  }
});
```

</TabItem>

<TabItem value='bottomTabs'>

```js
Navigation.setRoot({
  root: {
    bottomTabs: {
      children: [{
        stack: {
          children: [{
            component: {
              name: 'example.FirstTabScreen',
              passProps: {
                text: 'This is tab 1'
              }
            }
          }],
          options: {
            bottomTab: {
              text: 'Tab 1',
              icon: require('../images/one.png'),
              testID: 'FIRST_TAB_BAR_BUTTON'
            }
          }
        }
      },
      {
        component: {
          name: 'navigation.playground.TextScreen',
          passProps: {
            text: 'This is tab 2'
          },
          options: {
            bottomTab: {
              text: 'Tab 2',
              icon: require('../images/two.png'),
              testID: 'SECOND_TAB_BAR_BUTTON'
            }
          }
        }
      }]
    }
  }
});
```

</TabItem>

</Tabs>