react-native-template-pro

React Native template with a nice folder structure, navigation, database and async and debugging tools support.

Requirements

---

• React Native properly installed (building projects with native code)
• Reactotron properly installed
• Knowledge on Redux and Redux-Saga
• Knowledge on Realm database

Installation

---

react-native init MyMillionDollarApp --template pro

cd MyMillionDollarApp

yarn add --dev reactotron-react-native reactotron-redux reactotron-redux-saga

or

npm install --save-dev reactotron-react-native reactotron-redux reactotron-redux-saga

What's included

---

• Folder structure
• Reactotron: debugging
• Redux: state management
• Redux Saga: async calls
• React Navigation: routing and navigation
• Realm: mobile database
• Prop Types: typing for component props
• React Native Vector Icons: huge set of customizable icons

Jetbrains Webstorm snippets

---

See how to create and use

• Stateful component

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {View, Text, StyleSheet} from 'react-native';

export default class $ComponentName$ extends Component {
  render() {
    return (
      <View>
        <Text>$ComponentName$</Text>
        $END$
      </View>
    );
  }
}

$ComponentName$.propTypes = {};
const styles = StyleSheet.create({});

• Stateful Redux component

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as $storeProp$Actions from '../actions/$storeProp$';
import {View, Text, StyleSheet} from 'react-native';

class $ComponentName$ extends Component {
  render() {
    return (
      <View>
        <Text>$ComponentName$</Text>
        $END$
      </View>
    );
  }
}

$ComponentName$.propTypes = {
  data: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.array
  ]),
  error: PropTypes.boolean,
  loading: PropTypes.boolean,
};

const styles = StyleSheet.create({});

const mapStateToProps = state => ({
  data: state.$storeProp$.data,
  error: state.$storeProp$.error,
  loading: state.$storeProp$.loading
});
const mapDispatchToProps = dispatch => bindActionCreators($storeProp$Actions, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)($ComponentName$);

• Stateless component

import React from 'react';
import PropTypes from 'prop-types';
import {
  View,
  Text
} from 'react-native';

const $ComponentName$ = () => (
    <View>
      <Text>$ComponentName$</Text>
      $END$
    </View>
);

$ComponentName$.propTypes = {};

export default $ComponentName$;

Roadmap

---

• Integrate mobile database
• Fully integrate react-navigation to redux
• Add more reusable components

Known issues

---

• Unknown named module: 'NativeModules' - RN 0.56

Contributing

---

This is an initial release, feel free to submit your issues or PR's!

License

---

MIT