React Native template with a nice folder structure, navigation, database and async and debugging tools support.
- React Native properly installed (building projects with native code)
- Reactotron properly installed
- Knowledge on Redux and Redux-Saga
- Knowledge on Realm database
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
- 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
- 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$;- Integrate mobile database
- Fully integrate react-navigation to redux
- Add more reusable components
- Unknown named module: 'NativeModules' - RN 0.56
This is an initial release, feel free to submit your issues or PR's!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent