react-native-template-manogel v1.0.4

Project Content

• About the Project
  • Dependecies Configured
  • File Structure
  • Installation
    • Additional Step on Android
• Contact

About the project

This project aims to create a template that can be used when designing projects using React Native, as the process of installing and configuring libs at the beginning of a project can generate some complexity and often even errors that delay the process. thus disrupting the flow of development.

Dependencies configured

• React Native
• Redux
  • Redux Saga
• React Navigation
• React Native Gesture Handler
• React Native Safe Area Text
• React Native Reanimated
• React Navigation Tabs
• React Navigation Stack
• Axios
• Prop Types
• Styled Components
• React Native Vector Icons
• React Native MasckedView
• Reactotron
  • reactotron-react-native
  • reactotron-redux
  • reactotron-redux-saga
• Babel
  • babel-eslint
  • babel-plugin-root-import
  • babel-plugin-transform-remove-console
• ESLint
  • eslint-config-airbnb
  • eslint-plugin-import
  • eslint-plugin-jsx-a11y
  • eslint-plugin-react
  • eslint-plugin-react-native
  • eslint-plugin-import-helpers
  • eslint-import-resolver-babel-plugin-root-import
  • eslint-plugin-react
  • eslint-plugin-react-hooks
• Prettier
  • eslint-plugin-prettier
  • eslint-config-prettier
• EditorConfig

File Structure

rocketseat-advanced
├── src/
│   ├── config/
│   │   ├── ReactotronConfig.js
│   │   └── StatusBarConfig.js.js
│   ├── pages/
│   │   └── Main/
│   │       ├── index.js
│   │       └── styles.js.js
│   ├── services/
│   │   ├── api.js
│   │   └── storage.js
│   ├── store/
│   │   ├── ducks/
│   │   │   └── index.js
│   │   ├── sagas/
│   │   │   └── index.js
│   │   └── index.js
│   ├── styles/
│   │   ├── colors.js
│   │   ├── metrics.js
│   │   └── index.js
│   ├── index.js
│   └── routes.js
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── babel.config.js
├── dependencies.json
├── devDependencies.json
├── index.js
├── jsconfig.js
├── LICENSE
├── package.json
└── README.md

Installation

npx react-native init ProjectName --template manogel

This will create the project with all template dependencies properly installed and linked, as well as the configuration files that are copied to the project.

Additional Step on Android

Open the file android/app/src/main/java/<project_package>/MainActivity.java, and start by importing the packages as below:

// ...
import com.facebook.react.ReactActivity;
// Imports Added
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

Create a new method getMainComponentName():

public class MainActivity extends ReactActivity {
  @Override
  protected String getMainComponentName() { ... }
  // Method Added
  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }
}

Contact

Manoel Gomes - Github - manoelgomes53@gmail.com