An React Native Starter Kit with Expo + NativeBase + Best configuration for VSCode IDE.
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.
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.
To ensure our work, we use Visual Studio Code and a few add-ons that will make our job much cleaner and professional.
Just go to Visual Studio Code webpage and download. Follow the installation instruction and that its.
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.
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
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
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 native-base@2.13.8
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