1.3.11 • Published 5 years ago
react-native-template-pro v1.3.11
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
- 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
- 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
1.3.11
5 years ago
1.3.10
5 years ago
1.3.9
6 years ago
1.3.8
6 years ago
1.3.7
6 years ago
1.3.6
6 years ago
1.3.5
6 years ago
1.3.4
6 years ago
1.3.3
6 years ago
1.3.2
6 years ago
1.3.1
6 years ago
1.3.0
6 years ago
1.2.3
6 years ago
1.2.2
6 years ago
1.2.1
6 years ago
1.2.0
6 years ago
1.1.6
6 years ago
1.1.5
6 years ago
1.1.4
6 years ago
1.1.3
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago