Mobi Lab / We make robots talk to humans

React Native Template

The purpose of this project is to serve as a solid template for React Native applications. It provides clear structure, fundamental dependencies, and boilerplate to kick-start development with TypeScript.

Requirements

• ts-node
• environment setup for React Native

How to use

npx react-native init <app-name> --template https://github.com/LabMobi/react-native-project-creator

Project Environments

This template creates 3 environments. Development, Staging and Production.

Content

This template will setup the following libs:

• React Navigation: Navigation
• React Navigation Stack: Stack Navigation
• React Navigation Tab: Tab Navigation
• i18next & react-i18next: Multilanguage support
• Axios: API Calls
• Async Storage: Asynchronous, persistent, key-value storage system
• React Redux: Global State management
• reduxjs/toolkit: The official, opinionated, batteries-included toolset for efficient Redux development
• react-native-keyboard-aware-scroll-view: A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.
• React-Native-SVG: SVG Support
• React Native Config: Environment Variables
• React Native Rename: Change name and bundle identifier easily

Optional libs

• React Native UI Lib

  optional and native dependencies are not installed

• React Native Vector Icons
• React Native Device Info
• React Query
• React Hooks Form
• Yup

Components:

• Typography
• Icon
• Container

The following tools are also setup:

• Typescript
• Eslint
• Prettier
• Husky

Other Features:

• Multilanguage Support
• Dark & Light Theme Support

How to change bundle identifier (Optional)

npx react-native-rename "APP_NAME" -b "bundle_identifier"

After renaming project you should clean, build, and reinstall third party dependencies to get it running properly with the new name and bundle identifier.

https://github.com/junedomingo/react-native-rename

Change bundle identifier manually (Optional)

Based on the React Native version you are using there are bunch of files that have to be changed on both platforms (Android and iOS)

List of files to edit:

iOS

[application_build_scheem].plist (this is a dict/xml file that contains keys that are used by default if no changes added to project (react-native-cli init type of project)

Android

1. strings.xml (change app_name key value)
2. manifest.xml (change package attribute)
3. build.gradle (change applicationId value)
4. MainActivity.java (change java class package)
5. MainApplication.java (change java class package)

We also need to change the folder paths to match new name -- change com.oldName to com.newname.mobile, then change folder paths from app/src/java/com/oldName/ to app/src/java/com/newname/mobile/.

Ref: https://stackoverflow.com/a/44481467/10693194

Contact

Mobi Lab

Email: hello@lab.mobi

Twitter: https://mobile.twitter.com/LabMobi

Web: https://lab.mobi/