React Native – First App
To help you get started with building your first React Native app, let’s create a simple Insurance App that allows users to view their insurance details. This app will display a list of insurance plans and allow users to interact with it.
Step-by-Step Guide to Building the First App
Step 1: Install React Native
Before starting, make sure you have React Native installed, following the setup instructions mentioned earlier. If you have already set up your development environment, you can proceed to the next step.
Step 2: Create a New React Native Project
Open your terminal and run the following command to create a new React Native project:
npx @react-native-community/cli@latest init InsuranceApp
This command creates a new project called InsuranceApp. Once the project is created, navigate into the project directory:
cd InsuranceApp
Step 3: Create Basic Insurance Data
For the sake of simplicity, let’s create some mock data representing different insurance plans.
In the App.js file, we will hard-code an array of insurance plans that users can interact with.
Open App.js and replace its contents with the following code:
import React from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
// Mock data for insurance plans
const insurancePlans = [
{ id: '1', name: 'Health Insurance', details: 'Coverage for medical expenses.' },
{ id: '2', name: 'Life Insurance', details: 'Financial protection for loved ones.' },
{ id: '3', name: 'Car Insurance', details: 'Protection against vehicle accidents.' },
{ id: '4', name: 'Home Insurance', details: 'Protection against home damages.' }
];
const App = () => {
return (
Insurance Plans
{/* List of insurance plans */}
(
{item.name}
{item.details}
)}
keyExtractor={(item) => item.id}
/>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 50,
backgroundColor: '#f9f9f9',
padding: 10
},
header: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
textAlign: 'center'
},
card: {
backgroundColor: '#fff',
padding: 15,
marginBottom: 10,
borderRadius: 5,
shadowColor: '#000',
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 4
},
planName: {
fontSize: 18,
fontWeight: 'bold',
color: '#333'
},
planDetails: {
fontSize: 14,
color: '#555'
}
});
export default App;
Explanation of the Code:
- Insurance Data: We define a simple array insurancePlans with each object representing an insurance plan. Each plan has an id, name, and details.
- FlatList: We use React Native’s FlatList component to display the list of insurance plans. It’s an optimized way to render long lists.
- Styling: Using StyleSheet, we add styles to the app, including a header, cards for the insurance plans, and text styling.
Step 4: Run the App
Once the code is updated, you can run the app on the Android or iOS simulator.
- For Android:
npx react-native run-android
- For iOS (macOS only):
npx react-native run-ios
This will launch the app on your emulator or connected device.
Step 5: Verify the Output
When you run the app, you should see a list of insurance plans displayed with their names and details in a card-like structure. The UI will look like this:
UI Overview:
- A header titled “Insurance Plans” at the top.
- A list of four cards representing different insurance plans, each showing the name and a brief description.
Terminal Commands and logs
PS D:\ReactNativeProject> npx @react-native-community/cli@latest init InsuranceApp
Need to install the following packages:
@react-native-community/cli@15.1.2
Ok to proceed? (y) y
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native 0.76.3!
Learn once, write anywhere
warn The directory InsuranceApp contains files that will be overwritten:
node_modules
package-lock.json
package.json
√ Do you want to replace existing files? ... yes
√ Downloading template
√ Copying template
√ Processing template
√ Installing dependencies
√ Initializing Git repository
Run instructions for Android:
• Have an Android emulator running (quickest way to get started), or a device connected.
• cd "D:\ReactNativeProject\InsuranceApp" && npx react-native run-android
Run instructions for Windows:
• See https://aka.ms/ReactNativeGuideWindows for the latest up-to-date instructions.
PS D:\ReactNativeProject>
PS D:\ReactNativeProject> dir
Directory: D:\ReactNativeProject
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 03-12-2024 13:11 InsuranceApp
PS D:\ReactNativeProject> cd .\InsuranceApp\
PS D:\ReactNativeProject\InsuranceApp> dir
Directory: D:\ReactNativeProject\InsuranceApp
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 03-12-2024 13:11 .bundle
d----- 03-12-2024 13:11 android
d----- 03-12-2024 13:11 ios
d----- 03-12-2024 13:11 node_modules
d----- 03-12-2024 13:11 __tests__
-a---- 03-12-2024 13:11 64 .eslintrc.js
-a---- 03-12-2024 13:11 1076 .gitignore
-a---- 03-12-2024 13:11 141 .prettierrc.js
-a---- 03-12-2024 13:11 3 .watchmanconfig
-a---- 03-12-2024 13:11 62 app.json
-a---- 03-12-2024 13:11 2617 App.tsx
-a---- 03-12-2024 13:11 72 babel.config.js
-a---- 03-12-2024 13:11 349 Gemfile
-a---- 03-12-2024 13:11 183 index.js
-a---- 03-12-2024 13:11 48 jest.config.js
-a---- 03-12-2024 13:11 285 metro.config.js
-a---- 03-12-2024 13:11 475811 package-lock.json
-a---- 03-12-2024 13:11 1076 package.json
-a---- 03-12-2024 13:11 3080 README.md
-a---- 03-12-2024 13:11 65 tsconfig.json
PS D:\ReactNativeProject\InsuranceApp>
Terminal Command and logs
PS D:\ReactNativeProject\InsuranceApp> npx react-native run-android
(node:18632) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info Installing the app...
> Task :app:installDebug
Installing APK 'app-debug.apk' on 'Pixel_4_API_35(AVD) - 15' for :app:debug
Installed on 1 device.
BUILD SUCCESSFUL in 8s
62 actionable tasks: 13 executed, 49 up-to-date
info Connecting to the development server...
8081
info Starting the app on "emulator-5554"...
Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=com.insuranceapp/.MainActivity }
In other terminal, below logs will appear
(node:7588) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info Welcome to React Native v0.76
info Starting dev server on port 8081...
▒▒▓▓▓▓▒▒
▒▓▓▓▒▒░░▒▒▓▓▓▒
▒▓▓▓▓░░░▒▒▒▒░░░▓▓▓▓▒
▓▓▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▓▓
▓▓░░░░░▒▓▓▓▓▓▓▒░░░░░▓▓
▓▓░░▓▓▒░░░▒▒░░░▒▓▒░░▓▓
▓▓░░▓▓▓▓▓▒▒▒▒▓▓▓▓▒░░▓▓
▓▓░░▓▓▓▓▓▓▓▓▓▓▓▓▓▒░░▓▓
▓▓▒░░▒▒▓▓▓▓▓▓▓▓▒░░░▒▓▓
▒▓▓▓▒░░░▒▓▓▒░░░▒▓▓▓▒
▒▓▓▓▒░░░░▒▓▓▓▒
▒▒▓▓▓▓▒▒
Welcome to Metro v0.81.0
Fast - Scalable - Integrated
info Dev server ready
i - run on iOS
a - run on Android
r - reload app
d - open Dev Menu
j - open DevTools
BUNDLE ./index.js
info Opening app on Android...
info A dev server is already running for this project on port 8081.
info Installing the app...
> Task :gradle-plugin:settings-plugin:checkKotlinGradlePluginConfigurationErrors
> Task :gradle-plugin:shared:checkKotlinGradlePluginConfigurationErrors
> Task :gradle-plugin:shared:compileKotlin UP-TO-DATE
> Task :gradle-plugin:shared:compileJava NO-SOURCE
....
> Task :app:packageDebug UP-TO-DATE
> Task :app:createDebugApkListingFileRedirect UP-TO-DATE
> Task :app:installDebug
Installing APK 'app-debug.apk' on 'Pixel_4_API_35(AVD) - 15' for :app:debug
Installed on 1 device.
BUILD SUCCESSFUL in 7s
62 actionable tasks: 13 executed, 49 up-to-date
info Connecting to the development server...
info Starting the app on "emulator-5554"...
Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=com.insuranceapp/.MainActivity }
BUNDLE ./index.js
(NOBRIDGE) LOG Bridgeless mode is enabled
(NOBRIDGE) LOG Running "InsuranceApp" with {"rootTag":11,"initialProps":{},"fabric":true}
INFO
💡 JavaScript logs will be removed from Metro in React Native 0.77! Please use React Native DevTools as your default tool. Tip: Type j in the terminal to open (requires Google Chrome or Microsoft Edge).
info Opening https://x.com/reactnative...
Output
Further Enhancements:
- Navigation: You can add navigation between screens using react-navigation, where each plan might lead to a detailed view with more information.
- API Integration: Instead of using mock data, you can fetch insurance data from a backend API (e.g., using fetch or axios).
- State Management: For managing user preferences, such as selecting a plan, you can use React’s useState or use a state management library like Redux.
Conclusion:
This simple app provides a good foundation for building an insurance-related app using React Native. You can enhance the functionality further by adding features like user authentication, policy management, premium calculators, and more!
Recent Comments