Rocket Help

IGNITE LAB 3 - REACT NATIVE

Target • Technologies • Route

💡 Target

Build an user request support mobile app for Android and iOS (Hybrid) using React Native

🛠 Technologies

The main technologies that has been used in this project were:

Type	Tools	References
Programming Language (App)	REACT NATIVE	https://reactnative.dev/
Programming Language (App)	TYPESCRIPT	https://www.typescriptlang.org/
Open source platform	EXPO BARE WORKFLOW	https://expo.dev/
IDE	VISUAL STUDIO CODE (VS CODE)	https://code.visualstudio.com/
Design Interface Tool	FIGMA (Prototype - UX/UI)	https://www.figma.com/
UI Utility-first Component Library	NATIVE BASE	https://nativebase.io/
Graphic components	PHOSPHOR ICONS	https://phosphoricons.com/
Navigation between pages	REACT NAVIGATION	https://reactnavigation.org/
Database	FIREBASE	https://console.firebase.google.com/
React Native support Library for Firebase	REACT NATIVE FIREBASE	https://rnfirebase.io/

Database

IDE

UX/UI

Frontend

🔎 Route

1. Part 1 - The beginning of the React Native specialization
   • Build the project prototype: https://www.figma.com/file/15HnazfsI1NFV13fIXy1wu/React-Native-Insider-5?node-id=0%3A1
   • Install VS Code (IDE)
   • Install "R Component" extension at VS Code
   • Install Expo CLI: npm install --global expo-cli
   • Create a new project: expo init my-app (bare workflow)
   • Navigate to project directory: cd my-app
   • Open the project on VS Code: code .
   • Change App.js to App.tsx
   • Create and set tsconfig.json at root
   • Install Native Base on project:
     • yarn add native-base
     • expo install react-native-svg
     • expo install react-native-safe-area-context
   • Install React Navigation on project:
     • expo install @react-navigation/native
     • expo install react-native-screens
     • expo install react-native-safe-area-context
     • expo install @react-navigation/native-stack
   • Start the development server: expo start
   • Configure the Expo Go on a mobile device or use an emulator
   • Open the app on a mobile device:
     • On your iPhone or iPad, open the default Apple "Camera" app and scan the QR code you see in the terminal
     • On your Android device, press "Scan QR Code" on the "Projects" tab of the Expo Go app and scan the QR code you see in the terminal.


2. Part 2 - Visual design project & Navigation
   • Set project assets and styles
   • Install fonts on project: expo install expo-font @expo-google-fonts/roboto
   • Create screens:
     • Signin.tsx
     • Home.tsx
     • Register.tsx
     • Details.tsx
   • Create new components:
     • Loading.tsx
     • Input.tsx
     • Button.tsx
     • Filter.tsx
     • Order.tsx
     • Header.tsx
     • CardDetails.tsx
   • Create DTOs (Data Transfer Object):
     • OrderFirestoreDTO.ts
   • Procedure to project recognize svg files:
     • Install React-Native-SVG-Transformer library: yarn add --dev react-native-svg-transformer
     • Set metro.config.js
     • Set svg.d.ts file: ./src/@types/svg.d.ts
   • Install Phosphor React Native Icons: yarn add phosphor-react-native
   • Adding Phosphor Icons to SignIn screen
   • Add components at Home screen: ./src/screens/Home.tsx
   • Add Header, Input and Button components at Register screen: ./src/screens/Register.tsx
   • Add Header component at Details screen: ./src/screens/Details.tsx
   • Create routes:
     • AppRoutes: ./src/routes/app.routes.tsx
     • Routes: ./src/routes/index.tsx
   • Set navigation types: ./src/@types/navigation.d.ts
   • Implement navigation function at Home screen: ./src/screens/Home.tsx
   • Implement return button at Header component: ./src/components/Header.tsx
   • Apply useRoute hook at Details screen: ./src/screens/Details.tsx
   
   
3. Part 3 - Integration with Firebase
• We still can't run Firebase in Expo Go development environment. Set the environment:
  https://react-native.rocketseat.dev/
• Create a Firebase account, if you don't have one
• Create a project on Firebase
• Set the Firebase Authentication, enabling only "E-mail/password"
• Add an user: eg. email = alex@email.com | password = 123456
• Set the Firebase FirestoreDatabase, enabling on "Start at test mode"
• Connecting Firebase with our application
  • Set React Native Firebase library (http://rnfirebase.io)
    • Install & setup the app module: yarn add @react-native-firebase/app
    • Install settings with Expo at app.json (plugin)
    • Add Firebase config (Google services) files for iOS and Android at project root
    • Prebuild project: expo prebuild
    • Install the firestore module: yarn add @react-native-firebase/firestore
    • Install the authentication module: yarn add @react-native-firebase/auth
• Implement Auth Service at SignIn screen: ./src/screens/Signin.tsx
• Start application (emulator): expo run:android
• React Hooks usage at Routes: ./src/routes/index.tsx
• Format date from Firestore database: ./src/utils/firestoreDateFormat.ts
• Implement Logout, Auth Service and Firestore at Home screen: ./src/screens/Home.tsx
• Implement React Hooks, navigation and Firestore at Register screen: ./src/screens/Register.tsx
• Set OrderFirestoreDTO (data delivered by Firestore): ./src/DTOs/OrderFirestoreDTO.ts
• Implement React Hooks, navigation, types and Firestore at Details screen: ./src/screens/Details.tsx
• Setting CardDetails component: ./src/components/CardDetails.tsx
• Implement CardDetails at Details screen: ./src/screens/Details.tsx