Setup React-Native Development Environment

Install Tools

1. Install expo-cli

sudo npm install -g expo-cli

2. Install Xcode

3. Install Android Studio

4. Install Visual Code

and update Visual Code setting to enable formatonsave.

Then install Visual Code extension, including

• React Native Tools
• React-Native/React/Redux Snippet
• Prettier
• Material Icon Theme

5. Install React Native Debugger

brew update && brew cask install react-native-debugger

Start a new project

1. Create an expo project

expo init wiselyApp

Choose a Blank template.

Then try to start the app in simulator to verify the project is created successfully.

npm start

2. Commit to github

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/BWisely-App/wiselyApp.git
git push -u origin main

3. Do expo eject

expo eject

Input the Android package name and iOS bundle Id as desired.

Install dependency libraries

• @react-native-community/hooks
• react-native-gesture-handler
• formik@2.1.4
• yup
• @react-navigation/native
• react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
• @react-navigation/stack
• @react-navigation/bottom-tabs
• expo-image-picker
• react-i18next i18next
• lottie-react-native (https://lottiefiles.com/)
• react-native-youtube

Reference

1. https://reactnative.dev/docs/linking-libraries-ios (step 1 and step 2)