Why can't the main React box start with React Native Router Flux + Redux?

Question

I use the following components to create a React Native + Redux application:

• Real router stream
• Change Source Box

I tried to execute exactly the example presented on how to implement the box , but when navigating to where the box should be displayed using Actions.drawer , I get an error message:

But if I try to go to the Scene, through Actions.home , inside the box scene, nothing will happen, but the REACT_NATIVE_ROUTER_FLUX_RESET action is still called via redux-logger .

I tried to follow the example for sure, but no luck. What can i do wrong?

Here is my setup for a scene using Redux:

 // @flow import React, { Component } from 'react' import { ActionConst, Actions, Router, Scene, } from 'react-native-router-flux' import { Provider, connect, } from 'react-redux' import configureStore from './store/configureStore' import Login from './components/Login' import Home from './components/Home' import NavDrawer from './components/NavDrawer' const RouterWithRedux = connect()(Router) const store = configureStore() export default class App extends Component { render() { return ( <Provider store={store}> <RouterWithRedux> <Scene key='root'> <Scene component={Login} initial={true} key='login' title='Login'/> <Scene key="drawer" component={NavDrawer}> <Scene component={Home} key='home' title='Home' type='reset' initial={true}/> </Scene> </Scene> </RouterWithRedux> </Provider> ) } } 

Then I press the button in Login and launches Actions. to go to.

NavDrawer:

 import React, { PropTypes } from 'react' import Drawer from 'react-native-drawer' import { Actions, DefaultRenderer } from 'react-native-router-flux' import NavDrawerPanel from './NavDrawerPanel' export default class NavDrawer extends Component { componentDidMount() { Actions.refresh({key: 'drawer', ref: this.refs.navigation}); } render() { const children = state.children; return ( <Drawer ref="navigation" type="displace" content={<NavDrawerPanel />} tapToClose openDrawerOffset={0.2} panCloseMask={0.2} negotiatePan tweenHandler={(ratio) => ({ main: { opacity: Math.max(0.54, 1 - ratio) }, })} > <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} /> </Drawer> ); } } 

And NavDrawerPanel:

 import React from 'react'; import {PropTypes} from "react"; import { StyleSheet, Text, View, } from "react-native"; import { Actions } from 'react-native-router-flux'; const NavDrawerPanel = (props, context) => { const drawer = context.drawer; return ( <View style={styles.container}> <TouchableHighlight onPress={Actions.home}> <Text>Home Page</Text> </TouchableHighlight> <TouchableHighlight onPress={Actions.login}> <Text>Login Page</Text> </TouchableHighlight> </View> ) } const styles = StyleSheet.create({ container: { flex: 1, padding: 30, backgroundColor: 'black' }, }) 

EDIT Here is what is imported when Scene + Redux is configured:

 // @flow import React, { Component } from 'react' import { ActionConst, Actions, Router, Scene, } from 'react-native-router-flux' import { Provider, connect, } from 'react-redux' import configureStore from './store/configureStore' import Login from './components/Login' import Home from './components/Home' import NavDrawer from './components/NavDrawer' 

EDIT 2 - console.log (this.props)

Running console.log (this.props) in the Login component:

When Actions.home () from the Input component:

When Actions.drawer () from Login component:

EDIT 3 - console.log (this.props) inside NavDrawer.js

NavDrawer is never displayed, therefore console.log (this.props) is not registered

But with console.log (this.props) inside NavDrawer.js and Actions.home I get:

And with console.log (this.props) inside NavDrawer.js and Actions.drawer, I get:

Answer 1

Not sure if this is a problem, but you don't seem to import TouchableHighlight into the NavDrawerPanel component, therefore:

 import { StyleSheet, Text, View, TouchableHighlight } from "react-native"; 

Answer 2

I think you are passing the wrong navigationState value to the DefaultRenderer. It should be

const { navigationState: { children } } = this.props;

In your class NavDrawer

 import React, { PropTypes } from 'react' import Drawer from 'react-native-drawer' import { Actions, DefaultRenderer } from 'react-native-router-flux' import NavDrawerPanel from './NavDrawerPanel' export default class NavDrawer extends Component { componentDidMount() { Actions.refresh({key: 'drawer', ref: this.refs.navigation}); } render() { //const children = state.children; //wrong const { navigationState: { children } } = this.props; return ( <Drawer ref="navigation" type="displace" content={<NavDrawerPanel />} tapToClose openDrawerOffset={0.2} panCloseMask={0.2} negotiatePan tweenHandler={(ratio) => ({ main: { opacity: Math.max(0.54, 1 - ratio) }, })} > <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} /> </Drawer> ); } } 

Answer 3

I am not an expert in this, but I run action-native-router-flux and action-native-drawer in my application without any problems. Some of the differences that I see between your code and mine are:

• You have two scenes set to initial={true} . This can ruin the router.
• I don't move directly to the box using Actions.drawer , but instead go to the home scene using Actions.home .

If none of this works, can you share the render() function of your home component?

Answer 4

Not sure if this is what you are working on, but for others using these libraries you definitely don't want to use the box as a scene. It should wrap your entire router like this:

 <Drawer ref={(ref) => { this.drawer = ref; }} type="displace" useInteractionManager content={ <SideMenuContent open={this.state.sideMenuOpen} openDrawer={this.openDrawer} closeDrawer={this.closeDrawer} /> } tapToClose openDrawerOffset={0.08} negotiatePan onOpenStart={() => { this.setState({ sideMenuOpen: true }); }} onClose={() => { this.setState({ sideMenuOpen: false }); }} > <RouterWithRedux scenes={this.scenes} /> </Drawer> 

How we connected it, and it works well. Then we simply pass these functions to our scenes as needed:

 openDrawer = () => { this.drawer.open(); } closeDrawer = () => { this.drawer.close(); }