react-native-template-pro

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

:bookmark_tabs: Requirements

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

:arrow_forward: Installation

react-native init MyMillionDollarApp --template pro

cd MyMillionDollarApp

react-native run-ios or react-native run-android

:package: 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
• React Native Linear Gradient: gradient styles
• Formik & Yup: easy form handling

:computer: Jetbrains Webstorm snippets

See how to create and use

• comp (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({});

• rcomp (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 = {
  //TODO: data
  error: PropTypes.shape({
    $storeProp$: PropTypes.bool
  }),
  loading: PropTypes.shape({
    $storeProp$: PropTypes.bool
  }),
};

const styles = StyleSheet.create({

});

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

const mapDispatchToProps = dispatch => {
  return {
    actions: {
      $storeProp$: bindActionCreators($storeProp$Actions, dispatch),
    }
  };
};

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

• scomp (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$;

• con (console.display)

console.display('$var$', $var$);

• tron (console.tron)

console.tron('$var$');

:pushpin: Roadmap

• [x] Integrate mobile database
• [ ] Fully integrate react-navigation to redux
• [∞] Add more reusable components

:warning: Known issues

• Unknown named module: 'NativeModules' - RN 0.56

:pencil2: Contributing

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

:clipboard: License

MIT