React Native Navigation with react-native-vector-icons

layouts.ts

interface Layouts {
  [name: string]: LayoutRoot;
}

const layouts: Promise<Layouts> = new Promise(resolve => {
  Promise.all([
    Icon.getImageSource("people"),
    Icon.getImageSource("message")
  ]).then(icons => {
    resolve({
      auth: {
        root: {
          component: {
            name: "auth.LoginScreen"
          }
        }
      },

      home: {
        root: {
          bottomTabs: {
            id: "BottomTabs",
            children: [
              {
                stack: {
                  children: [
                    {
                      component: {
                        name: "collab.CollabScreen"
                      }
                    }
                  ],
                  options: {
                    bottomTab: {
                      text: "Collab",
                      icon: icons[0]
                    }
                  }
                }
              },
              {
                stack: {
                  children: [
                    {
                      component: {
                        name: "messages.MessagesScreen"
                      }
                    }
                  ],
                  options: {
                    bottomTab: {
                      text: "Messages",
                      icon: icons[1]
                    }
                  }
                }
              }
            ]
          }
        }
      }
    });
  });
});

export function goToAuthScreen() {
  layouts.then(({ auth }) => {
    Navigation.setRoot(auth);
  });
}

export function goToHomeScreen() {
  layouts.then(({ home }) => {
    Navigation.setRoot(home);
  });
}

Thank you, it helps me.

P.S. I have integrated it together with react-native-dark-theme and react-native-navigation works pretty bad with style changing on the fly.