Migrating from react-native-navigation V1 to V2

Question

After I have upgraded successfully from RN 0.55.4 to 0.59.10 I found that RNN V1 is not working So I have migrated to RNN V2. In addition I needed to change the code, because it seems that the function “Navigation.startSingleScreenApp ({ “ did not work with RNN V2. The problem that I could not transfer the props Using RNN V2 and also this.props.navigator is not used anymore in RNN V2.

Can someone show me the correct way to modify the code using RNN2 and set Root with props? or at least let me know how to make Navigation.startSingleScreenApp recognized function in RN 0.59.+ ? My app.js is:

import React, {Component} from 'react';
import {
    AppRegistry,
    View,
    I18nManager
} from 'react-native';
import { Global } from '@settings';
I18nManager.forceRTL(Global.RTL)
import { Navigation } from 'react-native-navigation';
import { registerScreens } from './containers';
registerScreens();

console.disableYellowBox = true;

Navigation.startSingleScreenApp({
    screen: {
        screen: 'name.SplashLayout1',
        title: "HOME",
        navigatorStyle: {
            navBarHidden: true
        }
    },
    animationType: "none"
});

my index.js

import React, {Component} from 'react';
import {
    View,
    StyleSheet,
    Dimensions,
} from 'react-native';
import FastImage from 'react-native-fast-image'
import {EgaTheme} from '@EgaMaterials';
import { Navigation } from 'react-native-navigation';

import { Theme } from './common/BlogTheme.style';
import Config from './common/Config'

import { Global } from '@settings';

var {height, width} = Dimensions.get('window');
var _ = require('lodash');

import { WordpressService, NofiticationService } from '@services';


export default class BlogThemeLayout extends Component {
    constructor(props) {
        super(props);

        this.state = {
            visible: true,
        };
    }
    componentWillMount() {

        WordpressService.startWordpressApp(this, Config.THEME_SETTINGS.menuID);
        EgaTheme.setTheme(Theme, null);
       // this.startApp()
    }

    startApp() {


        Navigation.startSingleScreenApp({

            screen: {

              screen: 'name.Homescreen', 
              title: 'Welcome', 
              navigatorStyle: {
                navBarBackgroundColor: Theme.colors.primary,
                navBarTextColor: Theme.colors.text.light,
                navBarButtonColor: Theme.colors.text.light
              },
              navigatorButtons: {} 
            },
            appStyle: {
              navBarBackgroundColor: Theme.colors.primary,
              navBarTextColor: Theme.colors.text.light,
              navBarButtonColor: Theme.colors.text.light,
              navBarNoBorder: true,
              orientation: 'portrait',
              disableOpenGesture: true,
              topBarElevationShadowEnabled: false
            }, //
            drawer: {
                left: {
                    screen: 'name.drawer',
                    passProps: {
                        SECTIONS_MENU: Global.SECTIONS_MENU_WORDPRESS,
                    }
                },

                appStyle: {
                  navBarBackgroundColor: Theme.colors.primary,
                  navBarTextColor: Theme.colors.text.light,
                  navBarButtonColor: Theme.colors.text.light,
                  navBarNoBorder: true,
                  orientation: 'portrait',
                  disableOpenGesture: true
                }, 
                disableOpenGesture: true
            },
            passProps: {
                SECTIONS_MENU: Global.SECTIONS_MENU_WORDPRESS
            },
            animationType: 'fade'
        });



    }

    render() {

        return this.renderLoadingView()
    }

    renderLoadingView() {
        return (

            <View style={styles.loading}>
              <FastImage resizeMode={FastImage.resizeMode.cover}
                         style={{ position: 'absolute', left: 0, top: 0, width: width, height: height }} source={require('./images/splash.jpg') }/>

                {/* { Platform.OS == 'ios' && <Spinner visible={this.state.visible} /> } */}

            </View>

        );
    }
}

const styles = StyleSheet.create({
    loading: {
        flex: 1,
        position: 'absolute',
        width: width,
        height: height,
        zIndex: 9,
        backgroundColor: 'white',
        justifyContent: "center",
        alignItems: "center"
    },
});

Migrating from react-native-navigation V1 to V2

0 Answers0