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)

1import React, {Component} from 'react';
2import PropTypes from 'prop-types';
3import {View, Text, StyleSheet} from 'react-native';
4
5export default class $ComponentName$ extends Component {
6  render() {
7    return (
8      <View>
9        <Text>$ComponentName$</Text>
10        $END$
11      </View>
12    );
13  }
14}
15
16$ComponentName$.propTypes = {};
17const styles = StyleSheet.create({});

• rcomp (stateful redux component)

1import React, {Component} from 'react';
2import PropTypes from 'prop-types';
3import {connect} from 'react-redux';
4import {bindActionCreators} from 'redux';
5import * as $storeProp$Actions from '../actions/$storeProp$';
6import {View, Text, StyleSheet} from 'react-native';
7
8class $ComponentName$ extends Component {
9  
10  render() {
11    
12    return (
13      <View>
14        <Text>$ComponentName$</Text>
15        $END$
16      </View>
17    );
18    
19  }
20  
21}
22
23$ComponentName$.propTypes = {
24  //TODO: data
25  error: PropTypes.shape({
26    $storeProp$: PropTypes.bool
27  }),
28  loading: PropTypes.shape({
29    $storeProp$: PropTypes.bool
30  }),
31};
32
33const styles = StyleSheet.create({
34
35});
36
37const mapStateToProps = state => ({
38  data: {
39    $storeProp$: state.$storeProp$.data
40  },
41  error: {
42    $storeProp$: state.$storeProp$.error
43  },
44  loading: {
45    $storeProp$: state.$storeProp$.loading
46  },
47});
48
49const mapDispatchToProps = dispatch => {
50  return {
51    actions: {
52      $storeProp$: bindActionCreators($storeProp$Actions, dispatch),
53    }
54  };
55};
56
57export default connect(mapStateToProps, mapDispatchToProps)($ComponentName$);

• scomp (stateless component)

1import React from 'react';
2import PropTypes from 'prop-types';
3import {
4  View,
5  Text
6} from 'react-native';
7
8const $ComponentName$ = () => (
9    <View>
10      <Text>$ComponentName$</Text>
11      $END$
12    </View>
13);
14
15$ComponentName$.propTypes = {};
16
17export default $ComponentName$;

• con (console.display)

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

• tron (console.tron)

1console.tron('$var$');

:pushpin: Roadmap

---

• 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