sanjeevyadavit/react-native-boilerplate

A Robust React Native boilerplate to kickstart your new app 🔥

This project is a React Native boilerplate that provides an architecture optimized for building solid cross-platform mobile applications through separation of concerns between the UI and business logic to help you kickstart your new app

When starting new apps I found myself repeatedly setting up my project with same packages over and over again so I decided to automate this process

This boilerplate consists of various elements and best practices I learned while going though apps written by various talented developers in the React Native Community ⚡

While this mostly consists of how I organize my projects but can be easily extended to suit any workflow 😄

If you face any issue then feel free to open a issue so we can solve it together 😃

Feel free to leave a ⭐ as motivation if this was useful to you 😄

📪 Index

• Content

• Project Structure

• Getting Started

• Rename the project

• Storybook

• Documentations

📦 Content:

- React Native (0.62.2)
- Clean Directory Layout
- Internationalization (i18n)
- Theme Implementation (with dark mode)
- Storybook Setup
- Packages:
    - Redux (with redux-saga)
    - React Navigation (version 5)
    - React Native Vector Icons

🔍 Project Structure:

[WIP]

🚀 Getting Started:

1. Clone the repository, by tying this command in terminal

   git clone https://github.com/alexakasanjeev/react-native-boilerplate.git && cd react-native-boilerplate

   Optional: Make sure to remove the existing git history and initialize the project with your own

   rm -rf .git/
   git init
   git add .
   git commit -m 'project init'
   git remote add origin <your remote repo>
   git push -u origin master

2. Install the dependencies

   npm install && ( cd ios && pod install )

For Android

Run the following command while the emulator is open or a device is connected via adb.

npx react-native run-android

For iOS

Run the following commands to install pods and run the app on iPhone simulator

cd ios && pod install && cd ..
npx react-native run-ios

📝 Rename the project:

Rename the project with the name and bundle identifier of your choosing Note: it is advised to do so in a new branch

git checkout -b rename
npx react-native-rename <new_name> -b <bundle_identifier>

✨ Run Storybook

To run Storybook follow these steps

1. Change the value of SHOW_STORYBOOK variable in index.js from false to true

2. Open a terminal and run storybook server

   npm run storybook

3. In another terminal run npm start or yarn start command to view stories

📖 Docs

• Understanding the file structure
• Theme Module explanation
• Contributing to this project
• Roadmap

🔔 Updates

The boilerplate will follow latest React Native releases as soon as libraries and tools used here are compatible. I will personally try update this as I use this boilerplate in production 😄

🗃️ Similar project

• magento_react_native - Project using this boilerplate code(almost 😅)

• React Native Boilerplate by Karan Pratap Singh

📣 Acknowledgements

• README-Template.md by Karan Pratap Singh

♥️ Donate

If this project help you, or to help acclerate development, you can give me a cup of coffee 😄 :

🛡 License

This project is under the MIT License - see the LICENSE.md file for details

react-native-boilerplate's Issues

Create branch redux-thunk, that uses thunk middleware instead of saga

Is your feature request related to a problem? Please describe.
Currently the branch redux-saga, you are force to use redux-saga and generators, the saga implementation can be replaced by redux-thunk

Describe the solution you'd like
Replace all sagas.js files from store folder and implement thunk support

Implement dark mode functionality

• Create new color set for dark mode, which can be toggled in the app.

• A new module has been added to help you support "dark mode" by allowing you to find out the users preferred color scheme. You can either query this using the imperative API:

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}

first complete #8 issue

Discussion: Improve Boilerplate code

Are there certain things to report that are not a bug or feature?
If you have some suggestion on improving the boilerplate code or thinks something is missing,
this is a good place to start. 😄

Share your ideas.

Build the project on iOS and test

Are there certain things to report that are not a bug or feature?
The app hasn't been tested on iOS device, need to build and properly test on iOS device. Follow the instructions mentioned in README file

• To update ios/ReactNativeBoilerplate.xcodeproj/project.pbxproj file follow instructions
• Fix any linking problem if occurs
• Take screenshots for iOS

Update React Native to 0.62.2

Is your feature request related to a problem? Please describe.
Manually update the React-Native version to 0.62.2

Describe the solution you'd like
Follow similar steps mentioned here

Additional context
To update ios/ReactNativeBoilerplate.xcodeproj/project.pbxproj file follow instructions

Upgrade react-navigation to version 5

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Additional context
Add any other context or screenshots about the feature request here.

Add prettier.js

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Additional context
Add any other context or screenshots about the feature request here.

Implement internationalization

Implement i18n.js file for localization support

Update API module by simplifying it

Is your feature request related to a problem? Please describe.

• Expose api endpoint directly instead of request object
• Add a logger which will print api request & api response in neat way, to help in debugging

Describe the solution you'd like
here's the code, which can be modified further

/**
 * Set this to false, to stop API logging
 */
const SHOW_LOG = true;

export default class Logger {
  static describeRequest(request = {}) {
    if (!SHOW_LOG || process.env.NODE_ENV !== 'development') {
      return;
    }
    //------------------------------------------
    console.group('WEBSERVICE: REQUEST');
    console.log(`URI: ${request.url}`);
    console.log(`METHOD: ${request.method}`);
    //------------------------------------------
    if (request.params) {
      console.groupCollapsed('PARAMS');
      console.log(request.params);
      console.groupEnd();
    }
    //--------------------------------------------
    console.groupCollapsed('HEADERS');
    console.table(request.headers);
    console.groupEnd();
    //-------------------------------------------
    if (request.data) {
      console.group('BODY');
      console.log(request.data);
      console.groupEnd();
    }
    //--------------------------------------------
    console.groupEnd();
  }

  static describeSuccessResponse(response) {
    if (!SHOW_LOG || process.env.NODE_ENV !== 'development') {
      return;
    }
    //----------------------------------------------
    console.group('WEBSERVICE: RESPONSE');
    console.log(`URI: ${response.request._url}`);
    console.log(`STATUS: ${response.status}`);
    console.log(`STATUS TEXT: ${response.statusText}`);
    //----------------------------------------------
    console.groupCollapsed('DATA');
    console.log(response.data);
    console.groupEnd();
    //--------------------------------------------------
    console.groupEnd();
  }

  static describeErrorResponse(error) {
    if (!SHOW_LOG || process.env.NODE_ENV !== 'development') {
      return;
    }
    //-----------------------------------------------------
    console.group(
      '%c Error ',
      'color: white; background-color: #D33F49',
      'WEBSERVICE: RESPONSE',
    );
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      const request = error.response.request || error.request || {};
      console.log(`URI: ${request._url}`);
      console.log(`STATUS: ${error.response.status}`);
      //--------------------------------------------
      console.groupCollapsed('HEADERS');
      console.table(request.headers);
      console.groupEnd();
      //------------------------------------------------
      console.groupCollapsed('DATA');
      console.log(error.response.data);
      console.groupEnd();
      //------------------------------------------------
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(`URI: ${error.request._url}`);
      //--------------------------------------------
      console.groupCollapsed('REQUEST');
      console.log(error.request);
      console.groupEnd();
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log(`UNKNOWN ERROR: ${error.message}`);
    }
    console.groupCollapsed('CONFIG');
    console.log(error.config);
    console.groupEnd();
    console.groupEnd();
  }
}

Additional context
Add any other context or screenshots about the feature request here.

"Buy me a coffee" link is broken

"Buy me a coffee" link is broken. Please fix it and provide a way to support you (github sponsor can be another way).

Extract typography, spacing & dimens from theme module into constant folder

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Additional context
Add any other context or screenshots about the feature request here.

Add Drawer Layout with appbar icons

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Additional context
Add any other context or screenshots about the feature request here.

Update React Native to 0.63.3

Is your feature request related to a problem? Please describe.
Upgrade React Native version to 0.63.3

Describe the solution you'd like
Follow these steps to upgrade react native

1. Run the upgrade command

   react-native upgrade
   

   Some files will not get upgraded, those files need to be changes manually

2. Open React Native upgrade helper and choose 0.62.2 in left column and latest react native version(0.63.3) in right column
   

3. Files which were not changes automatically in Step 1, modified them manually using step 2

4. Run and test App on both Android & iOS

Additional context
Official React Native upgrade guide
To upgrade ios/magento_react_native.xcodeproj/project.pbxproj file follow this guide

TODO

• Upgrade react native from 0.59.5 to ^0.61.3
• Test entire app for any case of failure