Let's initialize a React Native project using React Native's CLI. The project will be named birdGame and will be available for iOS and Android devices:

react-native init --version="0.46.4" birdGame

As this one is a simple game, we will only need one screen in which we will position all our sprites moving, showing, or hiding them depending on the state of the game, which will be managed by Redux. Therefore, our folder structure will be in line the standard Redux apps:

The actions folder will only contain one file as there are only three actions which may happen in this game ( start , tick, and bounce). There is also a sounds folder to store the sound effect which will be played every time the parrot passes a pair of rocks:

For each sprite, we will create a component so we can move it, show it, or hide it easily:

Again, only one reducer will be needed to process all our actions. We will also create two helper files:

main.jswill serve as the entry point for both iOS and Android and will be responsible to initialize Redux:

The rest of the files are generated by React Native's CLI.

Let's now review the package.json file we will need to set the dependencies up in our project:

/*** package.json ***/

{
  “name": “birdGame",
  “version": “0.0.1",
  “private": true,
  “scripts": {
    “start": “node node_modules/react-native/local-cli/cli.js start",
    “test": “jest"
  },
  “dependencies": {
    “react": “16.0.0-alpha.12",
    “react-native": “0.46.4",
    “react-native-sound": “^0.10.3",
    “react-redux": “^4.4.5",
    “redux": “^3.5.2"
  },
  “devDependencies": {
    “babel-jest": “20.0.3",
    “babel-preset-react-native": “2.1.0",
    “jest": “20.0.4",
    “react-test-renderer": “16.0.0-alpha.12"
  },
  “jest": {
    “preset": “react-native"
  }
}

Apart from Redux libraries, we will import react-native-sound, which will be in charge of playing any sounds in our game.

After running npm install, we will have our app ready to start coding. As happened in previous apps, the entry point for our messaging app will be the same code both in index.ios.js for iOS and in index.android.js for Android, but both will delegate the initialisation logic to src/main.js:

/*** index.ios.js and index.android.js ***/ 

import { AppRegistry } from 'react-native';
import App from './src/main';

AppRegistry.registerComponent('birdGame', () => App);

src/main.js is responsible for initializing Redux and will set GameContainer as the root component in our app:

/*** src/main.js ***/

import React from “react";
import { createStore, combineReducers } from “redux";
import { Provider } from “react-redux";

import gameReducer from “./reducers/game";
import GameContainer from “./components/GameContainer";

let store = createStore(combineReducers({ gameReducer }));

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <GameContainer />
      </Provider>
    );
  }
}

We use GameContainer as the root of the component tree in our app. As a regular Redux app, a <Provider />component is in charge of supplying the store to all the components which require reading or modifying the application state.