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 to create this document more easily. In this article, we are going to implement a resume builder app using React Native.
Preview of final output: Let us have a look at how the final output will look like.
Preview
Prerequisite:
Approach to create 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, Resume builder app will display the resume on a second screen.
Steps to Create React Native Application:
Step 1: Create a react native application by using this command in the command prompt
React-native init ResumeBuilder
Step 2: We have to download some dependencies which requires for our app. We use navigation in our app to go for one screen to another screen. so, firstly we install the navigation dependencies.
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack
Step 3: We will use some Icons in our app . so, we will install dependency for icon
npm i react-native-vector-icons
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"expo-constants": "~13.2.4",
"@expo/vector-icons": "^13.0.0",
"react-native-paper": "4.9.2",
"react-native-screens": "~3.15.0",
"@react-navigation/native": "*",
"@react-navigation/native-stack": "*",
"react-native-safe-area-context": "4.3.1"
}
Example: Write the below source code into the App.js file.
Javascript
// App.jsimport * 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>
);
} |
Javascript
//ResumeForm.jsimport * 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,
},
}); |
Javascript
//ShowCV.jsimport * 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
|
Step to run the Project:
Step 1: Depending on your operating system type the following command in terminal
- For android:
React-native run-android
- For IOS:
React-native run-ios
Output: