Simple master/detail view with header

[Paul-Todd]

Hi,

Does anyone have a simple example of how to create a master view (list) that when selected goes to another view with a header - ie emulating the IOSNavigator

What I am looking for is how to setup the base classes. At the moment I have:

NavigationReducer.StackReducer for state management since we push and pop views Then in the main component I start off with a NavigationRootContainer which creates a NavigationCardStack and then renders the appropriate scene. I also have a render over lay in the NavigationCardStack which is supposed to create a header but does not work for some reason (undefined is not an object (evaluating 'this.props.navigationProps.scenes'))

const AppStateReducer = NavigationReducer.StackReducer({
    initialState: {
        key: 'root',
        index: 0,
        children: [
            {key: 'list', type: 'root page'}
        ]
    }
});

export default class App extends Component {
    constructor(props, context) {
        super(props, context);
    }
    componentWillMount() {
        this._renderNavigation = this._renderNavigation.bind(this);
        this._renderTitleComponent = this._renderTitleComponent.bind(this);
        this._renderHeader = this._renderHeader.bind(this);
        this._renderScene = this._renderScene.bind(this);
    }
    render() {
        return (
            <NavigationRootContainer
                reducer={AppStateReducer}
                persistenceKey="mykey"
                renderNavigation={this._renderNavigation}
                ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
            />
        );
    }

    _renderNavigation(navigationState, onNavigate) {
        if (!navigationState) {
            return null;
        }

        return (
            <NavigationCardStack
                navigationState={navigationState}
                renderOverlay={this._renderHeader}
                renderScene={this._renderScene}
            />
        );
    }

    _renderScene(props: NavigationSceneRendererProps) {
        switch (props.scene.key) {
            case 'list': {
                return <MyListView />
            }
            break;
            case 'first': {
                return <MyChildView />
            }
            break;
        }

        return null;
    }

    _renderHeader(props) {
        return (
            <NavigationHeader
                {...props}
                renderTitleComponent={this._renderTitleComponent}
            />
        );
    }

    _renderTitleComponent(props) {

        return (
            <NavigationHeader.Title style={{backgroundColor: 'green'}}>
                'MyApp'
            </NavigationHeader.Title>
        );
    }
}

[aaronksaunders]

I agree 100% these examples are currently not documented well and overly complex when one is just getting started. Since for the last month the documentation has stated that this is the Navigator that will be supported, any updates would be appreciated

@Paul-Todd I cobbled something together that actually works.. React-Native NavigationExperimental - Sample App

[Paul-Todd]

Thanks!