index.ios.js

// note:
// this is the entry point for the entire app

import React, { Component, AppRegistry } from 'react-native';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';

import * as reducers from './reducers';

// import all screen components here (they are regular React components that are connected to the store)
import ExampleScreen from './ExampleScreen';
import SecondScreen from './SecondScreen';

// import the start function from app.ios.js
import startApp from './app';

// let's create our store
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);

// notes:
// react-native-controllers requires us to register in AppRegistry every component we want to show as a screen (since they're all separate react roots)
// we also need to wrap each screen with a Provider and pass our store, so it makes sense to do these together
// since every screen is its own react root, it needs to be wrapped by its own Provider (they all share the same store)

AppRegistry.registerComponent('ExampleScreen', () => class extends Component {
  render() {
    return (
      <Provider store={store}>
        <ExampleScreen {...this.props} />
      </Provider>
    );
  }
});

AppRegistry.registerComponent('SecondScreen', () => class extends Component {
  render() {
    return (
      <Provider store={store}>
        <SecondScreen {...this.props} />
      </Provider>
    );
  }
});

// this is exported from app.ios.js and causes our app to actually be mounted
startApp();