Can I use Navigation? or any examples?

#1

hi there:

I tried some Navigation samples somewhere else. However, they do not work for CRNA samples. I got
errors like:

Navigator is deprecated and has been removed from this package. It can now be installed and imported
from ‘react-native-deprecated-custom-components’ instead of ‘react-native’. Learn about alternative
navigation solutions at http://facebook.github.io/react-native/docs/navigation.html

Thanks a lot!

#2

Hi @tm1813,

Here you have bunch of example on react-navigation doc

And here it is an example:

  render() {
    const MainNavigator = TabNavigator({
      welcome: { screen: WelcomeScreen },
      auth: { screen: AuthScreen },
      main: {
        screen: TabNavigator({
          map: { screen: MapScreen },
          deck: { screen: DeckScreen },
          review: {
            screen: StackNavigator({
              review: { screen: ReviewScreen },
              settings: { screen: SettingsScreen }
            })
          }
        }, {
            tabBarOptions: {
              style: {
                backgroundColor: '#22313F'
              },
              labelStyle: { fontSize: 12 },
              showIcon: true,
              iconStyle: { width: 24 }
            },
            tabBarPosition: 'bottom',
            lazyLoad: true,
        })
      }
    }, {
      navigationOptions: {
        tabBarVisible: false
      },
      tabBarOptions: {
        style: {
          width: SCREEN_WIDTH,
          backgroundColor: '#22313F'
        }
      },
      tabBarPosition: 'bottom',
      lazyLoad: true,
      lazy: true,
      swipeEnabled: true,
      animationEnabled: false
    });

    return (
      <Provider store={store}>
        <MainNavigator />
      </Provider>
    );
  }
}
#3

Hey there, @tm1813 !

I just started learning about navigation today. It’s actually very simple. Here’s how you do it in CRNA.

import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return <Text>Hello, Navigation!</Text>;
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
});

export default class App extends React.Component {
  render() {
    return (
      <SimpleApp />
    );
  }
}

As you can see, everything is similar except the last part. You just have to add <SimpleApp /> . It depends on the name of const that you give. It cannot be App since the name of the class is also App

Let me know if this helps or I just made things more complicated.

Cheers