An React Native Starter Kit with Expo + NativeBase + Best configuration for VSCode IDE.

Breaking Changes in v2:

With the new releases from React Native and Expo, I need to update the project for continuous working. Version 1 is not working anymore and is replaced by version 2. If you want to know how to update version 1 to version 2, you can read it here in a post:

Updating ReactNativeExpo.js v1 to v2

This repository will help you to start your fresh new React Native project with Expo using the best practices to accelerate your coding.

• Ready to build with Expo.
• NativeBase integration. Best UI Kit for React Native.
• Domain-Driven file structure.
• Best configurations for VSCode.
• Module Resolver for fixing Relative Paths.
• Best Linting settings and complements.
• Ready to work with Prettier, Eslint integrations, and best practices.
• Redux, Redux-thunk, and Redux-persist for manage state.

Table of contents

• Installation
• Configuration
  • Visual Studio Code
  • Add-ons
  • Optional
• File Structure

Installation

Clone or download the repository and install the dependencies

# Clone the repository
git clone --depth 1 <https://github.com/boadude/React-Native-Expo-Starter.git>

# Go to React-Native-Expo-Starter directory
cd React-Native-Expo-Starter

# Install dependencies
npm install

# Start the project with Expo
npm start

Now, open Expo app on your Android or iPhone phone and scan the QR Code or go to the exp url. If you want, you can start a device simulator, follow the instructions in your console.

Configuration

To ensure our work, we use Visual Studio Code and a few add-ons that will make our job much cleaner and professional.

Visual Studio Code

Just go to Visual Studio Code webpage and download. Follow the installation instruction and that its.

Add-ons

To install the add-ons necessary to work faster and cleaner, we must go to the extension icon on the left panel and search all the add-on and installed.

• Auto Close Tag: Automatically close tags.
• Code Spell Checker: Spell-checker that works well with camelCase code.
• Eslint: Integrates ESLint into VSCode, to check-in coding time the mistakes.
• Path Intellisense: For autocompletion filenames.
• Prettier: Best code formatter ever.

Optional

• Material Icon Theme: Icons for folders and files.
• NPM: For validations of installed modules.

File Structure

The repository uses the Domain-Driven File Structure.

react-native-expo-starter/
 ├──.expo/                         * configuration for expo
 ├──.vscode/                       * configuration for vscode ide
 │   └──settings.json              * configurations for vscode and path intellisense
 ├──docs/                          * images for the repository (you can delete this folder)
 ├──src/                           * source files
 │   │
 │   ├──app/                       * app configurations
 │   │   ├──reducers.js            * configurations for the reducers
 │   │   └──store.js               * configurations for the store
 │   │
 │   ├──assets/                    * static assets
 │   │   ├──fonts/                 * customs fonts
 │   │   ├──images/                * images
 │   │   └──native-base-theme/     * nativebase theme for custom configurations
 │   │
 │   ├──common/                    * common components
 │   │
 │   ├──components/                * components source
 │   │   ├──dashboard/             * dashboard component
 │   │   ├──loading/               * loading component
 │   │   └──login/                 * login component
 │   │      ├──Login.js            * login container
 │   │      ├──LoginActions.js     * login actions
 │   │      ├──LoginReducers.js    * login reducers
 │   │      └──LoginStyles.js      * login styles
 │   │
 │   └──constants/                 * constants and customs
 │       ├──constants.js           * global constants
 │       └──errors.js              * custom errors messages
 │
 ├──.editorconfig                  * configuration for vscode
 ├──.eslintrc                      * configuration for eslint
 ├──.flowconfig                    * configuration for flow
 ├──babel.config.js                * configuration for module-resolver and babel
 ├──App.js                         * initial configuration for start the project
 ├──app.json                       * configuration por expo
 ├──index.js                       * expo starter
 ├──jsconfig.json                  * configuration for compiler
 └──package.json                   * what npm uses to manage its dependencies

Troubleshooting

Running iOS React Native

If you want to open the app on React Native, you can do it running:

npm run ios

Must be aware, if you are using Mac must install CocoaPods and run the installation process in the folder '/ios'

sudo gem install cocoapods
pod install

Native-base LTS

The project uses Native-base for developing UI. The latest version to date has a problem with a Font that uses and can't found in the dependency '@expo/vector-icons'.

/Users/boamacbookpro/Projects/reactNativeStarter/node_modules/native-base/dist/src/basic/IconNB.js
Module not found: Can't resolve '@expo/vector-icons/Fontisto' in '/Users/boamacbookpro/Projects/reactNativeStarter/node_modules/native-base/dist/src/basic'

For the moment, the only way to fix this is by installing version 2.13.8.

npm i -S [email protected]

Update Native-base

If you want to update Native-base to the newest version, you must follow the next steps:

# Extract the 'native-base-theme' in the root of the project
node node_modules/native-base/ejectTheme.js

# Replace 'src/assets/native-base-theme'for the newly copy 'native-base-theme' in the root folder