React-native-router-flux: Getting Unhandled JS Exception: undefined is not an object (evaluating 'child.props.clone')

Created on 8 Aug 2017 · 5Comments · Source: aksonov/react-native-router-flux

I am using:

react-native-router-flux v4.0.0-beta.17
react-native v0.4.6
react v16.0.0-alpha.12
react-native 0.46.1

Wanted to setup a new react native application and installed react-native-router-flux.

scenes.js have the following:

import { Actions, Scene } from 'react-native-router-flux'
import Routes from '../routes/index'

console.log("Routes", Routes);

const createScenes = () => {
    return Routes.childRoutes.map((route)=>{
        return <Scene
                key={route.path}
                component={route.component}
                title={route.title} 
               />
    });
}

const navigationBarStyle = {
  backgroundColor: 'white'
}

const scenes = Actions.create(
  <Scene key="app" navigationBarStyle={navigationBarStyle}>
    <Scene
        key={Routes.indexRoute.path}
        component={Routes.indexRoute.component}
        title={Routes.indexRoute.title} />
    {createScenes()}
  </Scene>
)

export default scenes

in my router.js I have this:

import { Router } from 'react-native-router-flux'
import scenes from './scenes'

const getSceneStyle = () => ({
  flex: 1,
  backgroundColor: '#fff',
  shadowColor: 'black',
  shadowOffset: { width: 2, height: 4 },
  shadowOpacity: 0.7,
  shadowRadius: 5,
})

export default () => (
  <Router
    scenes={scenes}
    getSceneStyle={getSceneStyle}
  />
)