Navigation in app with React-Native

Question

Im starting with React Native development (and component-based development too) and I have doubts about how to organize my application.

The first thing it´s about my application screens. Every page has to be component stored in a single .JS file? I have to use React-Native navigator and include them?

Thanks a lot!

Answer 1

Yes, you can stored component into a single js file like an object.

For example Store.js:

import Login from './components/Login';
import Welcome from './components/Welcome';

export default {
  Login: {
    index: 'login',
    component: Login
  },
  Welcome: {
    index: 'welcome',
    component: Welcome
  }
}

In index.ios.js or index.android.js, you can use Navigator with an initialRoute:

<Navigator
  initialRoute={Store.Login}
  renderScene={(route, navigator) =>
    <Text>Hello {route.title}!</Text>
  }
/>

Then you can pass props navigator to another children component to make a navigation flow.