React-native navigation experimental example?

Question

I started using react-native few weeks ago. For my first app, I used navigator for the navigation with its navigationbar component to display title and left/right hand side buttons. After reading facebook has dropped its support for the navigator and developing navigation experimental or navigation-rfc (will call 'NavExp' to make it short), I am trying to use the NavExp. But I can't get my head around it.

App menu: DrawerLayout for android, TabIOS for IOS. And will have navbar to display the title and right(content-specific menu - print, copy)/left(for menu) button depending on the content.

1. What is the difference between navigator and the NavExp? (it says it offers redux or flux style navigation, also can't understand it)
2. What is the purpose of reducer?(Which one to use? (Stack, Find))
3. NavigationRootContainer?
4. Where to declare all my states, since these are constants?
5. What is the difference between action and state?
6. For navigators we had renderScene function to actually render the scene, in NavExp

Garett

Answer 1

That's a whole lot to unpack in one SO question, so you're probably going to be better served by doing some research and then splitting this question into several smaller questions. Here's some pointers to get you started.

Overall: The purpose of the new NavigationExperimental is to create a stateless navigation structure for React Native, following the same principles as React. The old Navigator component was more reliant on maintaining and mutating state than the new NavExp. If you think about how React likes to take a set of props and then render out a full new UI whenever something changes, the new NavExp is meant to facilitate that a little more.

This because even more useful when you use a Flux-like pattern for managing state in your application. I would suggest reading up on Flux, or in my opinion, the more easy to grasp Redux implementation of the pattern.

That answers to an extent #1, and you'll better understand the answer to #2 after going through those links.

3. NavigationRootContainer is a helpful element (though not necessary) that provides some of the structure and functionality when using NavExp. The examples from Facebook utilize it. If you are implementing NavExp with something like Redux, you do not need to use one because you would be duplicating the usage of reducers.

4. I'm assuming you are talking about the states when deciding to render out the appropriate scene/card/screen? These can be declared anywhere, and really are just strings. You don't even need to declare them anywhere.

5. State is the collection of data and variables that make up the moving parts of your application. For example, if you had a shopping cart app you would store the customer's name and the contents of their cart in your application's state, as well as what screen they were currently on, what screen they had previously been on, etc. Anything that can change goes in state.

Actions are like shooting a flare into the sky to alert other parts of your application that something has changed. User adds a new item to their cart? Send an ITEM_ADDED_TO_CART action, along with the ID of the item. User presses a button to the main screen? Send a NAVIGATE_TO_SCREEN action, along with an identifier for the home screen. Actions get processed by reducers, and reducers make changes to the state and then tell React Native to start re-rendering everything.

6. This wasn't formed as a question, but you have a renderScene method with NavExp as well, which functions in a nearly identical way: it spits out the contents of the screen, whatever it should be.

(FYI, I don't have any official word on this, but if you are already comfortable with Navigator and have implemented it, you are probably fine continuing with it for the foreseeable future, instead of rewriting your app to take advantage of NavigationExperimental.)

Mirisola

i started developing an app, i don't know any of the two so i think it would be more logical to go with NavExp. where can we find the docs? are there any or is it too soon? – Intermeddle

@Intermeddle No docs yet, though they should hopefully be coming soon. You can look at the UIExample project's implementation of it. I also put together a small demo app of using NavExp and Redux. Last tip: make sure you learn Redux before you try to combine Redux/Flux with navigation. – Mirisola

I would also recommend looking into github.com/aksonov/react-native-router-flux It uses new Navigation API and provides examples – Glogau

Answer 2

Based on the comments from here you should use NavigationExpermiental: https://github.com/facebook/react-native/issues/6184

Here's a nice example to get you started: https://github.com/thebakeryio/react-native-complex-nav

import { View, NavigationExperimental } from 'react-native';
import React, { Component } from 'react';
import styles from './styles';
import { connect } from 'react-redux';
import ApplicationTabs from '../ApplicationTabs';
import NewItem from '../NewItem';
const { CardStack: NavigationCardStack } = NavigationExperimental;

class GlobalNavigation extends Component {
    render() {
        return (
            <NavigationCardStack
                direction={'vertical'}
                navigationState={this.props.navigation}
                onNavigate={this.props.onNavigate}
                renderScene={this._renderScene.bind(this)}
                renderOverlay={this._renderHeader.bind(this)}
                style={styles.main}
            />
        );
    }

    _renderHeader(props) {
        return null;
    }

    _renderScene(props) {
        if (props.scene.navigationState.key === 'applicationTabs') {
            return (
                <View style={{flex: 1}}>
                    <ApplicationTabs />
                </View>
            );
        }

        if (props.scene.navigationState.key === 'new') {
            return (
                <View style={{flex: 1}}>
                    <NewItem onClose={this._onCloseNewItem.bind(this)} />
                </View>
            );
        }
    }

    _renderTitleComponent(props) {
        return null;
    }

    _onCloseNewItem() {
        this.props.onNavigate({
            type: 'BackAction'
        });
    }
}

function mapDispatchToProps(dispatch) {
    return {
        dispatch
    };
}

function mapStateToProps(state) {
    return {
        navigation: state.get('globalNavigation')
    };
}

export default connect(mapStateToProps, mapDispatchToProps, (stateProps, dispatchProps, ownProps) => {
    return Object.assign({}, dispatchProps, stateProps, {
        onNavigate: (action) => {
            dispatchProps.dispatch(
                Object.assign(action, {
                    scope: stateProps.navigation.key
                })
            );
        }
    });
})(GlobalNavigation);

Leyes