DevBlog

REACT NATIVE INSIDER 5

Target • Technologies • Route

💡 Target

Build a blog in React Native for Android and iOS mobiles

🛠 Technologies

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

Type	Tools	References
Programming Language (App)	REACT NATIVE	https://reactnative.dev/
Open source platform	EXPO	https://expo.dev/
IDE	VISUAL STUDIO CODE (VS CODE)	https://code.visualstudio.com/
Design Interface Tool	FIGMA (Prototype - UX/UI)	https://www.figma.com/
Navigation between pages	REACT NAVIGATION	https://reactnavigation.org/
Open source Node.js Headless CMS	STRAPI	https://strapi.io/
Promise based HTTP client - browser & Node.js	AXIOS	https://axios-http.com/
Data persistence on device	ASYNC STORAGE	https://react-native-async-storage.github.io/async-storage/docs/usage/
Animation Library	REACT NATIVE ANIMATABLE	https://github.com/oblador/react-native-animatable

🔎 Route

1. Part 1 - Set the development environment (Infrastructure)
   
   
   • Build the project prototype: https://www.figma.com/file/15HnazfsI1NFV13fIXy1wu/React-Native-Insider-5?node-id=0%3A1
   • Install VS Code (IDE)
   • Install Expo CLI: npm install --global expo-cli
   • Create a new project: expo init my-app
   • Navigate to project directory: cd my-app
   • 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.
   • Open the project on VS Code
   • 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
   
   


2. Part 2 - Build API (Backend) to be consumed
   • Install Strapi: npx create-strapi-app@latest my-project
   • Set you admin user
   • Create Database
   • Create new Tables: Category and Post
   • Relationship between tables - Category has many Posts
   • Populating Tables
   • Create a new Post
   • Go to Settings > User & Permissions Plugin > Roles > Public
   • In Category: check find and findOne
   • In Post: check find and findOne
   • Save permissions
   • *** Obs.: to structure a API endpoint result view on Google Chrome: 3 points > More tools > Extensions > Menu hamburger > Open Chrome Web Store Enter Json viewer and press enter Choose the first one (Highlighted) Select "Use on Chrome" Click "Add extension" Then, reloads the page
   • Stop the service
   • Enter API folder: cd blog-api
   • Run project: npm run develop
   • Access the server: https://localhost:1337
   • Login with admin credentials
   
   
   
   
3. Part 3 - Mobile Layout: Interface and UX
• Build the Home page: ./src/pages/Home/index.js
• Setting routes: ./src/routes.js
• Update ./App.js
• Repeat the previous procedures for Detail, CategoryPosts and Search pages
• Set header for the pages: ./src/routes.js
• Use SafeAreaView to avoid broken layout: ./src/pages/Home/index.js
• Install Axios (HTTP request) module: expo install axios
• Install Async Storage module: expo install @react-native-async-storage/async-storage
• Stop and restart server
• React Hooks usage
• Creating server: ./src/services/api.js * Obs.: React Native requires a safe connection (e.g. https://) When it is not possible, we need to find our device ipconfig (IPv4) Then, substitute "localhost" with this numbers (e.g. http://192.168....)
• Install react-native-dotenv module: expo install react-native-dotenv
• Enter .env on .gitignore
• Create a .env file for sensible data: ./.env
• Go to the Home page: ./src/pages/Home/index.js
• Recover the api info and build the posts list
• Subdividing some parts in Components: ./src/components
• Creating features/functionalities
• Create a favorite service: ./src/services/favorite.js
• Create a favorite component: ./src/components/FavoritePost/index.js
• Favoriting categories, save on AsyncStorage and show them on screen: ./src/pages/Home/index.js



4. Part 4 - Bringing the project to life
   
   
   • Request posts on Home page: ./src/pages/Home/index.js
   • Build PostItem component: ./src/components/RenderItem/index.js
   • Link Posts from Home to Details page
   • Create Detail interface: ./src/pages/Detail/index.js
   • Using ScrollView for long items
   • Install React-Native-Webview: expo install react-native-webview
   • Create a LinkWeb modal component (link from post): ./src/components/LinkWeb/index.js
   
   
   
   
5. Part 5 - Adding features
   
   
   • Build Search input: ./src/pages/Search/index.js
   • Find a desirable post from title
   • Show posts found on screen
   • Only stop showing device keyboard if found a post
   • Update Home page with refresh option
   • Build CategoryPosts page: ./src/pages/CategoryPosts/index.js
   • Adding some animations (React Native Animatable): expo install react-native-animatable
   • Use animation on Home page