Configure UI Kitten with react native navigation

How to configure UI Kitten if app is initialized with react-navigation?

import {createStackNavigator, createAppContainer} from 'react-navigation';
import Login from "./components/Login";
import Issues from "./components/Issues";
import Issue from "./components/Issue";
import Create from "./components/Create";
import Time from "./components/Time";

const MainNavigator = createStackNavigator({
    Home: {screen: Issues},
    Login: {screen: Login},
    Issues: {screen: Issues},
    Issue: {screen: Issue},
    Create: {screen: Create},
    Time: {screen: Time},
}, {
    transitionConfig: () => ({
        transitionSpec: {
            duration: 0,  // Set the animation duration time as 0 !!
        },
    }),
});

const App = createAppContainer(MainNavigator);

export default App;

[iyobo]

Anyway, here is how I got it to work:

import React from 'react';
import {mapping, light as lightTheme} from '@eva-design/eva';
import {ApplicationProvider, Button, Layout, Text} from 'react-native-ui-kitten';
import {ScreenOrientation} from 'expo';
import {StatusBar} from 'react-native';
import {createStackNavigator} from "react-navigation-stack";
import {EvaIconsPack} from '@ui-kitten/eva-icons';
import {createAppContainer} from "react-navigation";

import WelcomePage from './pages/WelcomePage';

const RoutedApp = createAppContainer(createStackNavigator({
    Home: {
        screen: WelcomePage,
    },
}));

export default class App extends React.Component {

    componentDidMount() {
        ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_LEFT);
    }

    render() {
        return (
            <ApplicationProvider mapping={mapping} theme={lightTheme}>
                <RoutedApp/>
            </ApplicationProvider>
        );
    }
}

[iyobo]

Screen oriententation is just a private need. You can ignore that.

The code snippet I posted is just to demonstrate how nothing much has changed. By the rules of react, whatever React Navigation’s createAppContainer function returns will be a component that you can use within your component tree.