Git Product home page Git Product logo

shettayyy / react_native_seed Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 1.0 908 KB

A react native boilerplate for building cross-platform (ios and android) mobile application with necessary tools and architecture

License: MIT License

JavaScript 25.23% Shell 0.17% TypeScript 38.12% Starlark 1.72% Java 19.71% Ruby 2.15% Objective-C 12.91%
react react-native react-navigation redux-thunk redux redux-toolkit typescript ui-kitten sentry eslint

react_native_seed's Introduction

React Native Seed

This project is a React Native boilerplate that can be used as a base to build your a mobile application (iOS and android).

The starter kit provides you with the modern tools for building apps, improves developer efficiency and tries the best to uphold consistent code quality. The architecture has been configured observing the common patterns adopted by the react native community.

Add Shields

Coming soon - Shields/badges from shields.io

Getting Started

Usage

  • Install Node.js. Follow the installation steps for your respective operating system from the official documentation. Make sure you install the LTS version of Node.
  • Refer to the Environment Setup doc to set up react native on your system
  • You can download the boilerplate in 2 ways:
    • Use it as a template by clicking Use Template green button which can be found on the top right corner next to the Clone dropdown on the repositories GitHub page
    • Clone the project - git clone https://github.com/rashtay/react_native_beej.git <your project name>. Remove the previous git history: - rm -rf .git/.
  • Add the npm dependencies by running - yarn install
  • Use React Native Rename to update project name - $ npx react-native-rename <newName>. This isn't full proof. Search for react_native_seed in your project folder using VSCode's search found on the left hand toolbar and replace it with name you passed to react-native-rename a.k.a <newName>. Do check the android/app/src/main/java folder. It would have the react_native_seed folder. Rename the folder to your project name.
  • Run npx pod-install. DO NOT run it before yarn install
  • Run react-native run-ios
  • Start the packager with yarn startto verify if everything is working
  • Remove the LICENSE file and the "License" section from the README if you're not working on an open source project
  • Update the existing README.md file with the content related to your app.
  • You can now create a new git repository for your project (using git init) and make the first commit.

Tools and Libraries

The boilerplate has the following tools and libraries:

  • React Native to build your cross-platfotm mobile application
  • Redux toolkit redux wrapper for state management
  • React Navigation to handle routing and navigation in the app with a default splash screen and type definitions
  • Typescript for type checking and then compiling the code to plain/vanilla JavaScript
  • Husky to add precommit and prepush hooks
  • Lint Staged to lint the currently modified file
  • Prettier configured for formatting
  • Reactotron a desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
  • React Native Dotenv for setting environment variables
  • React Native AsyncStorage for storing data locally
  • React Native Sync Storage for accessing AsyncStorage synchronously
  • React Native UI Kitten as a UI library (something similar to Material UI for react). Refer the official documentation for more details
  • React Native Gesture Handler Gesture Handler aims to replace React Native's built in touch system called Gesture Responder System.
  • React Native Vector Icons is perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project.
  • React Native Bootsplash for setting the iOS/Android splash screen. It hasn't been set up as it would confuse the devs using the boilerplate for the 1st time. Please refer to the official documentation to learn how to set the splash screens
  • Sentry for error and performance monitoring. You'd have to initialize it with your own project keys. A utility tool has been added for capturing the exceptions

Path resolver

  • Let's say you have product.js file in src/components/product/ and you want to import utils/string.js.
  • So, instead of importing the file present in like ../../utils/string.js, you can import it like utils/string.
  • All the aliases can be found in babel.config.js and tsconfig.json.
  • If you want to add/remove aliases, make sure you add/remove to/from both the files

Global types

  • We have a types folder placed in the root.
  • You can add your globals types being used across the project and third party module declarations that currently doesn't have typescript support in this folder.

Debugging

  • Reactotron has been added for debugging the application. Download Reactotron. If are using an Android device or emulator run the following command to make sure it can connect to Reactotron:
adb reverse tcp:9090 tcp:9090
  • To log data to the Reactotron console, use tronlog. PLEASE NOTE, your project should not consist of any tronlog. Use it to log the values, review it and remove it from the code. You'd see an error if you don't remove it.
  • You can benchmark functions to find bottleneck. Follow benchmark guide. The plugin has already been configured.
  • Refer to the official documentation for debugging react native application

Linting

The project comes preconfigured with eslint and prettier . I've added support for react and typescript linting. I have listed the additional packages being used for linting:

  • eslint-plugin-standard
  • eslint-plugin-import
  • eslint-config-prettier

The eslint, prettier and typescript configuration files have been updated to accomodate the additional plugins.

I have made sure you cannot push the code if there are any lint or type related issues.

Release History

  • Coming soon

Contributing

React Native Seed welcomes contributions to our open source project. When contributing, please follow the Contributing guide.

Author

FAQ

If you run into any issues, go through the F.A.Q. file. Amongst other things, this document contains information about common issues.

Support

  • If any information is missing from the README file, want to raise a feature request or report any bug, please create a new issue with appropriate labels.

License

For licensing information, go through License file.

Coming Soon

react_native_seed's People

Contributors

shettayyy avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.