Create a Resume Builder using React-Native

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:

• React Native
• React Native State
• React Native Props

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.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>
    );
}

Javascript

//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,
    },
});

Javascript

//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

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: