React-native-navigation not returning from inside a component

Question

I am using react native navigation by wix for my application.

It is working fine if I just have the Navigation.startTabBasedApp in my application like this:

import React, { Component } from 'react';
import Amplify from 'aws-amplify-react-native';
import { Navigation } from 'react-native-navigation';
import { registerScreens } from './screens';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

registerScreens();

return Navigation.startTabBasedApp({
  tabs: [
    {
      label: 'Home',
      screen: 'pumped.HomeScreen',
      title: 'Pumped',
    },
    {
      label: 'Sell',
      screen: 'pumped.ListScreen',
      title: 'Sell an item',
    },
    {
      label: 'Profile',
      screen: 'pumped.ProfileScreen',
      title: 'Profile',
    },
  ],
});

However I want to render either a single screen or this tab based app conditionally based on wether the user is signed in or not. But when i add the two inside a app component and return either one based on a condition (true in my code just for testing) it doesn't return anything?

Here is my code:

import React, { Component } from 'react';
import Amplify from 'aws-amplify-react-native';
import { Navigation } from 'react-native-navigation';
import { registerScreens } from './screens';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

registerScreens();

class App extends Component {
  render() {
    if (true) {
      return Navigation.startSingleScreenApp({
        screen: {
          screen: 'pumped.RegisterScreen',
          navigatorStyle: {},
          navigatorButtons: {},
          title: 'Register',
        },
      });
    }
    return Navigation.startTabBasedApp({
      tabs: [
        {
          label: 'Home',
          screen: 'pumped.HomeScreen',
          title: 'Pumped',
        },
        {
          label: 'Sell',
          screen: 'pumped.ListScreen',
          title: 'Sell an item',
        },
        {
          label: 'Profile',
          screen: 'pumped.ProfileScreen',
          title: 'Profile',
        },
      ],
    });
  }
}

export default App;

Thanks.

score 0 · Answer 1 · answered Jan 25 '18 at 21:52

0

Try wrapping your returns in parentheses.

if (true) {
      return (
        Navigation.startSingleScreenApp({
          screen: {
            screen: 'pumped.RegisterScreen',
            navigatorStyle: {},
            navigatorButtons: {},
            title: 'Register',
          },
        })
      );
    }
    return ( 
      Navigation.startTabBasedApp({
        tabs: [
          {
            label: 'Home',
            screen: 'pumped.HomeScreen',
            title: 'Pumped',
          },
          {
            label: 'Sell',
            screen: 'pumped.ListScreen',
            title: 'Sell an item',
          },
          {
            label: 'Profile',
            screen: 'pumped.ProfileScreen',
            title: 'Profile',
          },
        ],
      })
    );

answered Jan 25 '18 at 21:52

Paddy Boroughs

36
2

I’ve tried this already, it works outside the component but within it still renders nothing, I need to return inside a component because I’m passing the app component to a hoc from Amazon Cognito – tygar Jan 25 '18 at 21:55
Does it work individually for each Navigation type when you remove the condition? Maybe try abstracting them to their own components. if (condition) return else return . – Paddy Boroughs Jan 25 '18 at 21:59
I’ve tried that aswell, it’s strange, doesn’t throw any errors, the JavaScript compiler compiles to 100% no errors, but it just stays on the splash page, I think it may have something to do with the code you install into the appdelegate file for iOS, it may need that to even start the app? – tygar Jan 25 '18 at 22:02
Do both of the Navigation components work separately? Check installation steps at https://wix.github.io/react-native-navigation/ and maybe re-install – Paddy Boroughs Jan 25 '18 at 22:22
Yeah work fine separately, yeh I’ve done it a couple time I think it needs one of the elements to actually start the app – tygar Jan 25 '18 at 22:31
Weird. If the condition picks a Navigation component or a dummy component (as opposed to one of two Navigation components), does it work? Another thing I'd try is returning this.renderNav() and specifying the navigation screen a the renderNav method. – Paddy Boroughs Jan 25 '18 at 22:41

score 0 · Answer 2 · answered Mar 11 '18 at 14:51

I have a similar approach as you. I am using aws-amplify (but not their HOC components) and redux. See this blog for more info with redux: https://medium.com/react-native-training/explanation-of-react-native-navigation-wix-with-redux-deabcee8edfc

export default class App extends React.Component {
  constructor(props: any) {
    super(props);
    store.subscribe(this.onStoreUpdate);
    store.dispatch({ type: 'INIT' }); // Trigger the onStoreUpdate function
  }

  onStoreUpdate = () => {
    const newLoginState = store.getState().get('auth').get('loginState');
    if (this.currentLoginState !== newLoginState) {
      this.currentLoginState = newLoginState;
      this.startApp(this.currentLoginState);
    }
  }

  startApp = (loginState: string) => {
    switch(loginState) {
      case 'signedOut':
        startLoginSingleScreen();
        return;
      case 'signedIn':
        startHomeTabs();
        return;
      default:
        console.log('Root not found!');
    }
  }
}

and in my index.ios.js and index.android.js:

import App from './App';

const app = new App();

React-native-navigation not returning from inside a component

2 Answers2