React-native-ui-kitten: Configure UI Kitten with react native navigation

[vitaliyzolotoy]

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;

[32penkin]

Hi @vitaliyzolotoy. Thanks for the issue. You can check our "exapmple" application with RNUK an RN included: https://github.com/akveo/kittenTricks

[itryp]

Hi @32penkin thanks for your answer, however RN is now in version 4 which is highly different from the version used on the kittenTricks (RN 3). Can someone produce an example how to use the Header component with react-navigation 4? Thanks :)

[32penkin]

Hi @itryp! Thanks for the reply. We're gonna update Kitten Tricks application soon so stay tuned :)

[harisrozak]

still have no answer?

[32penkin]

Hi @harisrozak. Thank you for your reply. Unfortunately, our main goal is developing the ui-framework. Support for a test application has a slightly lower priority. The integration of libraries that solve various problems in the application is undoubtedly the responsibility of the developer. We will undoubtedly do this a bit later, so stay tuned.

[iyobo]

@32penkin Yikes. What a response. I don't think people need you to do that much work. Just a simply sample code here will do showing how RN4, Kitten and react-navigation can be configured to work together...unless you're saying that this combo will not work together right now?

Again, I don't think the OP or anyone wants you to rebuild the kitchensink app. We would just like some information on whats possible with this combo.

[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>
        );
    }
}

[artyorsh]

@iyobo thanks for posting this. Does it mean this issue is actual when supporting multiple orientations? I'm sorry we were not able to test it. But in case it's actual, we'll definitely think about optimizing root components.

[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.