wix-playground / react-native-navigation-v1-v2-adapter

React Native Navigation v1 to v2 adapter
MIT License
49 stars 17 forks source link

TypeError: _reactNativeNavigation.Navigation.startSingleScreenApp is not a function. #10

Open terreb opened 6 years ago

terreb commented 6 years ago

I've been using RNN v1. Due to some issues that won't be addressed since it's not getting support any more I'm moving to RNN v2. To see if if it works fine before rewriting the code to new API I would like to try it with the adapter. I followed the instructions to set up the ios project. When I run the app I get TypeError: _reactNativeNavigation.Navigation.startSingleScreenApp is not a function

Here is my App.js:

import CodePush from 'react-native-code-push'
import React, { Component } from 'react'
import { Platform } from 'react-native'
import { Provider } from 'react-redux'
import { persistStore } from 'redux-persist'
import { Navigation, ScreenVisibilityListener } from 'react-native-navigation-v1-v2-adapter'
import registerScreens from './screens/index'
import { authenticate } from './services/Auth/actions'
import store from './store'
import { iconsMap, iconsLoaded } from './services/AppIcons'
import {
          ONBOARDING, SCREEN_1, SCREEN_2, SCREEN_3, SCREEN_4
} from './screens/constants'
 import { COLOR_PRIMARY, COLOR_PRIMARY_MUTED, COLOR_WHITE } from './styles/index'

export default class App extends Component {

    constructor( props ) {
        super( props )
        iconsLoaded.then( () => {
            this._init()
        } )
    }

    _init() {
        persistStore( store, null, () => {
            registerScreens( store, Provider )

            store.subscribe( this._onStoreUpdate.bind( this ) )

            this._onStoreUpdate()
        } )
    }

    _onStoreUpdate() {
        const { root } = store.getState().navigation

        if ( this.currentRoot !== root ) {
            this.currentRoot = root
            this._startApp( root )
        }
    }

    _startApp( root ) {
        switch ( root ) {
            case 'onboarding':
                Navigation.startSingleScreenApp( {
                    screen: {
                        screen: ONBOARDING, 
                        title: 'Onboarding',
                        navigatorStyle: {
                            navBarHidden: true
                        }
                    }
                } )
                return

            case 'tabs':
                const navigatorButtons = {
                    rightButtons: [
                        {
                            icon: iconsMap[ 'bars' ],
                            id: 'sideDrawerToggle'
                        }
                    ]
                }
                Navigation.startTabBasedApp( {
                    tabs: [
                        {
                            label: 'Screen 1',
                            screen: SCREEN_1,
                            title: 'Screen 1',
                            navigatorButtons,
                        },
                        {
                            label: 'Screen 2 ',
                            screen: SCREEN_2,
                            title: 'Screen 2',
                            navigatorButtons,
                        },
                        {
                            label: 'Screen 3',
                            screen: SCREEN_3,
                            title: 'Screen 3',
                            navigatorButtons,

                        },
                        {
                            label: 'Screen 4',
                            screen: SCREEN_4,
                            title: 'Screen 4',
                            navigatorButtons,

                        },
                    ],
                    drawer: {
                        right: { 
                            screen: 'app.Drawer',
                            passProps: {}, 
                        disableOpenGesture: true,
                    },
                } )
                return

            default:
                console.log( 'Not Root Found' )
        }
    }
}
trialsNow commented 5 years ago

Did anyone figure this out? I have the same issue.

terreb commented 5 years ago

@trialsNow, when I was toying with the adapter it was completely broken, so I did full scale migration to v2 and it mostly works as expected now.

trialsNow commented 5 years ago

hmm .. i am still facing the same issue even with latest native navigation.. Can you help me? I am stuck

"dependencies": { "@babel/runtime": "^7.1.5", "react": "16.5.0", "react-native": "0.57.0", "react-native-app-intro-slider": "^1.0.1", "react-native-navigation": "latest" },

App.js import { Navigation } from 'react-native-navigation'; import { AppRegistry } from 'react-native'; import IntroSlider from './modules/home/components/IntroSlider';

Navigation.registerComponent('example.HomeScreen', () => IntroSlider); Navigation.startSingleScreenApp({ screen: { screen: 'example.HomeScreen', title: 'Title' } });

IntroSlider.js import React, { Component } from 'react'; import { StyleSheet } from 'react-native'; import {Navigation} from 'react-native-navigation'; import AppIntroSlider from 'react-native-app-intro-slider'; import startMainTab from './Home';

const styles = StyleSheet.create({ image: { width: 200, height: 200 }, text: { color: '#FFFFFF', fontSize: 20 }, title: { fontSize: 28, fontWeight: 'bold', color: 'white', backgroundColor: 'transparent', textAlign: 'center', marginTop: 16 } });

const slides = [ { key: 's1', text: 'Best Recharge offers', title: 'Mobile Recharge', titleStyle: styles.title, textStyle: styles.text, image: { uri: 'http://aboutreact.com/wp-content/uploads/2018/08/mobile_recharge.png' }, imageStyle: styles.image, backgroundColor: '#20d2bb' }, { key: 's2', title: 'Flight Booking', titleStyle: styles.title, text: 'Upto 25% off on Domestic Flights', image: { uri: 'http://aboutreact.com/wp-content/uploads/2018/08/flight_ticket_booking.png' }, imageStyle: styles.image, backgroundColor: '#febe29' }, { key: 's3', title: 'Great Offers', titleStyle: styles.title, text: 'Enjoy Great offers on our all services', image: { uri: 'http://aboutreact.com/wp-content/uploads/2018/08/discount1.png' }, imageStyle: styles.image, backgroundColor: '#22bcb5' }, { key: 's4', title: 'Best Deals', titleStyle: styles.title, text: ' Best Deals on all our services', image: { uri: 'http://aboutreact.com/wp-content/uploads/2018/08/best_deals1.png' }, imageStyle: styles.image, backgroundColor: '#3395ff' }, { key: 's5', title: 'Bus Booking', titleStyle: styles.title, text: 'Enjoy Travelling on Bus with flat 100% off', image: { uri: 'http://aboutreact.com/wp-content/uploads/2018/08/bus_ticket_booking.png' }, imageStyle: styles.image, backgroundColor: '#f6437b' }, { key: 's6', title: 'Train Booking', titleStyle: styles.title, text: ' 10% off on first Train booking', image: { uri: 'http://aboutreact.com/wp-content/uploads/2018/08/train_ticket_booking.png' }, imageStyle: styles.image, backgroundColor: '#febe29' } ];

class IntroSlider extends Component { constructor(props) { super(props); this.state = { showRealApp: false }; }

onDone = () => { this.setState({ showRealApp: true }); };

onSkip = () => { this.setState({ showRealApp: true }); };

render() { const { showRealApp } = this.state; if (showRealApp) { startMainTab(); } return (

);

} }

export default IntroSlider;

AppDelegate

  • (BOOL)application:(UIApplication )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions { NSURL *jsCodeLocation;

    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions]; //jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; self.window.backgroundColor = [UIColor whiteColor]; return YES; }

@end

Error: _reactNativeNavigation.Navigation.startSingleScreenApp is not a function. (In '_reactNativeNavigation.Navigation.startSingleScreenApp({ screen: { screen: 'example.HomeScreen', title: 'Title' } })', '_reactNativeNavigation.Navigation.startSingleScreenApp' is undefined) 2018-11-19 11:37:04.676 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: _reactNativeNavigation.Navigation.startSingleScreenApp is not a function. (In '_reactNativeNavigation.Navigation.startSingleScreenApp({ screen: { screen: 'example.HomeScreen', title: 'Title' }

terreb commented 5 years ago

@trialsNow, there is really no such a function in RNN2. Docs.

trialsNow commented 5 years ago

The docs link is broken. I am confused now, the startsinglescreenapp and starttabbasedapp was available in v1. Is it not anymore?

trialsNow commented 5 years ago

oh got it.. its setroot now .. thank you so much @terreb

theRealGupta commented 5 years ago

@trialsNow did you find any solution to this? please post your solution I am also getting the same issue.

trialsNow commented 5 years ago

@anupgupta-arg I was using the v1 methods. The starttabbased and startsingleapp methods are obsolete.. here is what needs to be done. https://wix.github.io/react-native-navigation/#/docs/top-level-api-migration

However I must admit, I loved v1 more. V2 seems complicated to understand for a beginner. I still cant host a good tab based app with v2. With V1 I did it in an hour of looking at it.

kenreilly commented 5 years ago

I've run into a ton of deprecated, renamed, or otherwise changed function names, constructors, and other various things while using this and other RN libraries. I highly suggest that at some point it becomes standard practice to throw meaningful error messages that indicate when a function is or is about to be deprecated, instead of simply dropping them cold and leaving developers with no clue as to what changed or why. Yes, we can read documentation, however when there are multiple sets of documentation, multiple versions of things, and a resulting plethora of conflicting examples, this can get very confusing when the API changes drastically and produces no meaningful error messages or other clues. Just a suggestion.

man-of-sbk commented 5 years ago

@anupgupta-arg I was using the v1 methods. The starttabbased and startsingleapp methods are obsolete.. here is what needs to be done. https://wix.github.io/react-native-navigation/#/docs/top-level-api-migration

However I must admit, I loved v1 more. V2 seems complicated to understand for a beginner. I still cant host a good tab based app with v2. With V1 I did it in an hour of looking at it.

omg, finally :)) the link is exactly what i'm looking for. I'm following a tutorial teaching RN with RNN v1, and it just drives me crazy with apis from v1. whatever, tks for sharing the link