Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
terreb opened this issue Aug 17, 2018 · 10 comments

Comments

@terreb
Copy link

terreb commented Aug 17, 2018

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
Copy link

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

@terreb
Copy link
Author

terreb commented Nov 19, 2018

@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
Copy link

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
Copy link
Author

terreb commented Nov 19, 2018

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

@trialsNow
Copy link

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

@trialsNow
Copy link

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

@theRealGupta
Copy link

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

@trialsNow
Copy link

@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
Copy link

kenreilly commented Jan 16, 2019

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
Copy link

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants