Start project React Native

. react-native-setup

Files:
  * .gitignore
  * index.android.js
  * index.ios.js
  * package.json
  * settings.json
  * src/actions/application/index.js
  * src/app.js
  * src/components/info.js
  * src/reducers/application/info.js
  * src/reducers/root.js
  * src/store/index.js
  * .eslintrc

.eslintrc

{
  "extends" : "airbnb",
  "rules" : {
    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
    "comma-dangle":"off"
  }
}

.gitignore

#vscode
.vscode
jsconfig.json

index.android.js

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

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

index.ios.js

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

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

package.json

// Add
{
  "scripts": {
    "openDebug": "open 'rndebugger://set-debugger-loc?host=localhost&port=8081'",
    "postinstall": "rndebugger-open"
  },
}

settings.json

// File VSCODE .vscode/settings
{
  "files.associations": {
    "**/src/actions/**/.js": "javascript",
    "**/src/reducers/**/.js": "javascript",
    "**/src/store/**/.js": "javascript",
    "**/src/**/*.js": "javascriptreact"
  }
}

src-actions-application-index.js

import packageInfo from '../../../package.json';

export const applicationTypes = {
  LOAD_PACKGE_INFO: 'LOAD_PACKGE_INFO'
};

export const loadPacageInfo = () => (dispatch) => {
  return dispatch(load(packageInfo));
};

const load = payload => ({
  type: applicationTypes.LOAD_PACKGE_INFO,
  payload
});

src-app.js

import React, { Component } from 'react';
import { View } from 'react-native';
import { Provider } from 'react-redux';

import store from './store';
import Info from './components/info';

class App extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.store = store.configure();
  }

  render() {
    return (
      <Provider store={this.store}>
        <View style={{ flex: 1 }}>
          <Info />
        </View>
      </Provider>
    );
  }
}

export default App;

src-components-info.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

import { connect } from 'react-redux';

import { loadPacageInfo } from '../actions/application';

class Info extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.props.loadPacageInfo();
  }

  render() {
    const { name, version } = this.props;
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>
          {name}
        </Text>
        <Text>
          {version}
        </Text>
      </View>
    );
  }
}

const mapStateToProps = state => {
  const { name, version } = state.application;

  return { name, version };
};

export default connect(mapStateToProps, { loadPacageInfo })(Info);

src-reducers-application-info.js

import { applicationTypes } from '../../actions/application';

const initialState = {
  version: '',
  name: ''
};

export default function info(state = initialState, action) {
  switch (action.type) {
    case applicationTypes.LOAD_PACKGE_INFO: {
      const { version, name } = action.payload;
      return { ...state, version, name };
    }
    default:
      return state;
  }
}

src-reducers-root.js

import { combineReducers } from 'redux';
import info from './application/info';

export default combineReducers({
  application: info
});

src-store-index.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';

import rootReducer from '../reducers/root';

const store = {
  configure: (initialState) => {

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? 
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        shouldHotReload: false
      }) : compose;

    const enhancer = composeEnhancers(
      applyMiddleware(thunk)
    );

    return createStore(rootReducer, enhancer);
  }
};

export default store;

NPM INSTALL REACT NATIVE DEBUG

brew update && brew cask install react-native-debugger
npm install --save-dev react-native-debugger-open
open 'rndebugger://set-debugger-loc?host=localhost&port=8081'

NPM INSTALL ESLINT

npm install --save-dev eslint-config-airbnb eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react

NPM INSTALL REDUX

npm install --save redux react-redux redux-thunk

NPM INSTALL

npm install