A resume is like a personal marketing document that shows off your skills, work history, and achievements to a potential employer. Resume builder apps help you create this document more easily. In this article, we are going to implement a resume builder app using React Native.
To give you a better idea of what we’re going to create, let’s watch a demo video.
Demo Video
Playground
Note: This Section is to interact with the app which you are going to build.
Prerequisite
Approach to create a Resume Builder
- In this App, we will create a resume builder app in React Native. This app includes two screens.
- The first screen of the app contains various input fields containing prompts for the user to provide information relevant to their resume, including their name, contact details, and past work experience.
- After submission of the form, the Resume builder app will display the resume on a second screen.
Step-by-Step Implementation
Step 1: Create a React Native Project
Now, create a project with the following command.
npx create-expo-app app-name --template
Note: Replace the app-name with your app name for example : react-native-demo-app
Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.
It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.
Now go into your project folder, i.e., react-native-demo
cd app-nameProject Structure:
Step 2: Run Application
Start the server by using the following command.
npx expo startThen, the application will display a QR code.
For the Android users,
- For the Android Emulator, press " a" as mentioned in the image below.
- For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.
For iOS users, simply scan the QR code using the Camera app.
If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.
Step 3: Updated Dependencies
The updated dependencies in the package.json file will look like:
"dependencies": {
"expo-constants": "~17.1.6",
"@expo/vector-icons": "^14.1.0",
"react-native-paper": "5.14.5",
"react-native-screens": "4.11.1",
"@react-navigation/native": "7.1.14",
"@react-navigation/native-stack": "7.3.21",
"react-native-safe-area-context": "5.5.0"
}
Example: Write the below source code into the App.js file.
// App.js
import * as React from "react";
import ResumeForm from "./screens/ResumeForm";
import ShowCV from "./screens/ShowCV";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="GeekforGeeks Resume Builder"
component={ResumeForm}
/>
<Stack.Screen name="Your CV" component={ShowCV} />
</Stack.Navigator>
</NavigationContainer>
);
}
//ResumeForm.js
import * as React from "react";
import {Text,View,StyleSheet,TextInput,
Button,TouchableOpacity,ScrollView
} from "react-native";
import { useState } from "react";
export default function ResumeForm({ navigation }) {
const [userDetails, setUserDetails] = useState({
fullName: "",
avatarUrl: "",
profTitle: "",
phoneNo: "",
email: "",
website: "",
company: "",
jobTitle: "",
skill: "",
});
return (
<ScrollView>
<View style={styles.cont}>
<View style={styles.header}>
<Text style={styles.headerText}>Resume Builder</Text>
</View>
<View style={styles.details}>
<Text style={styles.titleText}>Personal Details</Text>
<TextInput
style={styles.textinput}
placeholder="Enter your full name"
value={userDetails.fullName}
onChangeText={(e) => {
setUserDetails((userDetails) => ({
...userDetails,
...{ fullName: e },
}));
}}
/>
<TextInput
style={styles.textinput}
placeholder="Enter your avatar URL"
value={userDetails.avatarUrl}
onChangeText={(e) => {
setUserDetails((userDetails) => ({
...userDetails,
...{ avatarUrl: e },
}));
}}
/>
<TextInput
style={styles.textinput}
placeholder="Enter your professional title"
value={userDetails.profTitle}
onChangeText={(e) => {
setUserDetails((userDetails) => ({
...userDetails,
...{ profTitle: e },
}));
}}
/>
</View>
<View style={styles.details}>
<Text style={styles.titleText}>Contact Details</Text>
<TextInput
style={styles.textinput}
placeholder="Enter your phone number"
value={userDetails.phoneNo}
onChangeText={(e) => {
setUserDetails((userDetails) => ({
...userDetails,
...{ phoneNo: e },
}));
}}
/>
<TextInput
style={styles.textinput}
placeholder="Enter your email"
value={userDetails.email}
onChangeText={(e) => {
setUserDetails((userDetails) => ({
...userDetails,
...{ email: e },
}));
}}
/>
<TextInput
style={styles.textinput}
placeholder="Enter your website link"
value={userDetails.website}
onChangeText={(e) => {
setUserDetails((userDetails) => ({
...userDetails,
...{ website: e },
}));
}}
/>
</View>
<View style={styles.details}>
<Text style={styles.titleText}>Previous Job</Text>
<TextInput
style={styles.textinput}
placeholder="Enter company name"
value={userDetails.company}
onChangeText={(e) => {
setUserDetails((userDetails) => ({
...userDetails,
...{ company: e },
}));
}}
/>
<TextInput
style={styles.textinput}
placeholder="Enter job title"
value={userDetails.jobTitle}
onChangeText={(e) => {
setUserDetails((userDetails) => ({
...userDetails,
...{ jobTitle: e },
}));
}}
/>
<TextInput
style={styles.textinput}
placeholder="Enter your best skill"
value={userDetails.skill}
onChangeText={(e) => {
setUserDetails((userDetails) => ({
...userDetails,
...{ skill: e },
}));
}}
/>
</View>
<Button
title="Create Resume"
style={styles.button}
onPress={() => navigation.navigate("ShowCV", userDetails)}
></Button>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
cont: {
flex: 1,
backgroundColor: "white",
paddingLeft: 40,
paddingRight: 40,
paddingTop: 30,
},
header: {
marginBottom: 20,
alignSelf: "stretch",
},
details: {
marginBottom: 20,
},
headerText: {
fontSize: 24,
color: "#fff",
borderBottomColor: "#199187",
paddingBottom: 10,
borderBottomWidth: 1,
},
titleText: {
fontWeight: "bold",
color: "blue",
fontSize: 20,
marginBottom: 10,
},
textinput: {
alignSelf: "stretch",
height: 40,
color: "black",
marginBottom: 20,
borderBottomColor: "black",
borderBottomWidth: 1,
},
button: {
alignSelf: "stretch",
alignItems: "center",
padding: 10,
backgroundColor: "#59cbbd",
marginTop: 5,
marginBottom: 20,
},
});
//ShowCV.js
import * as React from "react";
import {Text,View,Image,StyleSheet,
TextInput,Button,TouchableOpacity,
} from "react-native";
import { useState } from "react";
import { Card } from "react-native-paper";
export default function ShowCV({ navigation, route }) {
let dataObj = route.params;
return (
<View style={styles.cont}>
<View style={styles.header}>
<Text style={styles.headerText}>Your Resume</Text>
</View>
<View style={styles.details}>
<Text style={styles.titleText}>Personal Details</Text>
<Image
source={{ uri: dataObj.avatarUrl }}
style={{ width: 80, height: 80 }}
/>
<Text style={styles.text}>
<Text style={styles.key}>Name: </Text>
<Text>{dataObj.fullName}</Text>
</Text>
<Text style={styles.text}>
<Text style={styles.key}>Professional Title: </Text>
<Text>{dataObj.fullName}</Text>
</Text>
</View>
<View style={styles.details}>
<Text style={styles.titleText}>Contact Details</Text>
<Text style={styles.text}>
<Text style={styles.key}>Phone Number: </Text>
<Text>{dataObj.phoneNo}</Text>
</Text>
<Text style={styles.text}>
<Text style={styles.key}>Email: </Text>
<Text>{dataObj.email}</Text>
</Text>
<Text style={styles.text}>
<Text style={styles.key}>Website Link: </Text>
<Text>{dataObj.website}</Text>
</Text>
</View>
<View style={styles.details}>
<Text style={styles.titleText}>Previous Job</Text>
<Text style={styles.text}>
<Text style={styles.key}>Company: </Text>
<Text>{dataObj.company}</Text>
</Text>
<Text style={styles.text}>
<Text style={styles.key}>Role: </Text>
<Text>{dataObj.jobTitle}</Text>
</Text>
<Text style={styles.text}>
<Text style={styles.key}>Skill: </Text>
<Text>{dataObj.skill}</Text>
</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
cont: {
flex: 1,
backgroundColor: "#36485f",
paddingLeft: 40,
paddingRight: 40,
paddingTop: 40,
},
header: {
marginBottom: 20,
alignSelf: "stretch",
},
details: {
marginBottom: 15,
},
headerText: {
fontSize: 24,
color: "#fff",
borderBottomColor: "#199187",
paddingBottom: 10,
borderBottomWidth: 1,
},
titleText: {
fontWeight: "bold",
color: "blue",
fontSize: 15,
marginBottom: 10,
},
key: {
fontWeight: "bold },
textcolor