Skip to content

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

License

Notifications You must be signed in to change notification settings

thiagobrez/react-native-template-pro

Repository files navigation

react-native-template-pro

Maintenance GitHub license

Usage demo

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

📑 Requirements


▶️ Installation


react-native init MyMillionDollarApp --template pro

cd MyMillionDollarApp

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

📦 What's included


💻 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$');

📌 Roadmap


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

⚠️ Known issues


✏️ Contributing


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

📋 License


MIT

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published