Giter VIP home page Giter VIP logo

react-native-template's Introduction

React Native Template

Moove It

This project aims to be a strong foundation for react-native applications. It provides a clear and organized structure, core dependencies, and boilerplate to jumpstart development.

Prerequisites

Base dependencies

Usage

Use Template button

Click the "Use this template" button above the file list, then use the Owner drop-down menu, and select the account you want to own the repository. Creating a repository from a template has the following advantages:

  • A repository created from a template starts with a single commit.
  • Commits to a repository created from a template do appear in your contribution graph.
  • Creating a repository from a template starts a new project quickly.

Option 1: Using React-Native-Rename

You can start by cloning this repository and using react-native-rename. In the current state of this project, it should give you no issues at all, just run the script, delete your node modules and reinstall them and you should be good to go.

Keep in mind that this library can cause trouble if you are renaming a project that uses Pods on the iOS side.

After that you should proceed as with any javascript project:

  • Go to your project's root folder and run npm install.
  • Run npm run ios or npm run android to start your application!

Option 2: Copy the structure to your project

If you want to roll on your own and don't want to use this as a template, you can create your own project and then copy the /src folder (which has all the code of your application) and update your index.js.

Keep in mind that if you do this, you'll have to install and link all dependencies (as well as adding all the necessary native code for each library that requires it).

Folder structure

This template follows a very simple project structure:

  • src: This folder is the main container of all the code inside your application.
    • actions: This folder contains all actions that can be dispatched to redux.
    • assets: Asset folder to store all images, vectors, etc.
    • components: Folder to store any common component that you use through your app (such as a generic button)
    • constants: Folder to store any kind of constant that you have.
    • controllers: Folder to store all your network logic (you should have one controller per resource).
    • localization: Folder to store the languages files.
    • navigation: Folder to store the navigators.
    • reducers: This folder should have all your reducers, and expose the combined result using its index.js
    • screens: Folder that contains all your application screens/features.
      • Screen: Each screen should be stored inside its own folder, and inside it a file for its code and a separate one for the styles and tests.
        • Screen.js
        • Screen.styles.js
        • Screen.test.js
    • selectors: Folder to store your selectors for each reducer.
    • storage: Folder that contains the application storage logic.
    • store: Folder to put all redux middlewares and the store.
    • test-utils: Folder to store tests-related utilities and components.
    • theme: Folder to store all the styling concerns related to the application theme.
    • App.js: Main component that starts your whole app.
  • index.js: Entry point of your application as per React-Native standards.

Splash screen customization

To customize the splash screen (logo and background color) use the CLI provided in the official docs.

Setup environments

Modify the environment variables files in root folder (.env.development, .env.production and .env.staging)

Android

A map associating builds with env files is already defined in app/build.gradle you can modify or add environments if needed.

For multiple enviroments to work you would need to change -keep class [YOUR_PACKAGE_NAME].BuildConfig { *; } on proguard-rules.pro file.

iOS

The basic idea in iOS is to have one scheme per environment file, so you can easily alternate between them.

To create a new scheme:

  • In the Xcode menu, go to Product > Scheme > Edit Scheme
  • Click Duplicate Scheme on the bottom
  • Give it a proper name on the top left. For instance: "qa"
  • Then edit the newly created scheme to make it use a different env file. From the same "manage scheme" window:

Expand the "Build" settings on left

  • Click "Pre-actions", and under the plus sign select "New Run Script Action"
  • Where it says "Type a script or drag a script file", type: echo ".env.qa" > /tmp/envfile replacing .env.qa with your file.

Styleguide

For coding styling we decided to go with ESLint and React Native community's styleguide.

react-native-template's People

Contributors

donatoaguirre24 avatar mcousillas6 avatar fedeojeda95 avatar jngalletto avatar sebastianpaz avatar jmzp avatar dependabot[bot] avatar

Stargazers

Roman 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.