Create a Portfolio App using React-Native

Last Updated : 25 Jul, 2024

In this article, we are going to Create a portfolio app using React Native. The portfolio app is a simple application that is a collection of a person's qualifications, achievements, work samples, and other relevant materials. It is used to demonstrate one's abilities and suitability for a particular role or program.

Preview of final output: Let us have a look at how the final output will look like.

Prerequisites:

Approach to create Portfolio App:

The portfolio app is a simple application that is a collection of a person's qualifications, achievements, work samples, and other relevant materials.
User can see the their details which includes their name, skillset , technology known etc.
We also added a project details option in the bottom tab navigation screen by which user can navigate to the project list which was created by them.

Steps to Create React Native Application:

Step 1: Create a react native application by using this command in the command prompt

React-native init PortfolioApp

Step 2: Installing the required packages.

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/bottom-tabs

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": {
    "react-native-paper": "*",
    "@expo/vector-icons": "^13.0.0",
    "@react-navigation/native": "6.0.0",
    "expo-contacts": "~12.2.0",
    "expo-status-bar": "~1.6.0",
    "expo-permissions": "~14.2.1",
    "react-native-screens": "~3.22.0",
    "react-native-contacts": "^7.0.8",
    "@react-navigation/stack": "^6.3.20",
    "react-native-permissions": "^4.0.0",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-safe-area-context": "4.6.3",
    "@react-navigation/bottom-tabs": "*"
}

Example: Write the below source code into the App.js file.

JavaScript

// App.js import React from 'react'; import { NavigationContainer } 	from '@react-navigation/native'; import { createBottomTabNavigator } 	from '@react-navigation/bottom-tabs'; import Home from './Home'; import Projects from './Projects';  const Tab = createBottomTabNavigator();  const App = () => { 	return ( 		<NavigationContainer> 			<Tab.Navigator 				tabBarOptions={{ 					activeTintColor: '#61dafb', 					inactiveTintColor: '#999', 					labelStyle: { 						fontSize: 16, 						fontWeight: 'bold', 					}, 				}} 				style= 				{ 					{ backgroundColor: '#90EE90' } 				}> 				<Tab.Screen name="Home" 					component={Home} /> 				<Tab.Screen name="Projects" 					component={Projects} /> 			</Tab.Navigator> 		</NavigationContainer> 	); };  export default App;

JavaScript

// Home.js import React from 'react'; import { 	View, Text, 	StyleSheet, Image } from 'react-native';  const technologies = 	[ 		'React Native', 		'JavaScript', 		'Node.js', 		'Express', 		'MongoDB' 	];  const Home = () => { 	const renderTechBoxes = () => { 		return ( 			<View style={styles.techContainer}> 				{technologies 					.map((tech, index) => ( 						<View key={index} 							style={styles.techBox}> 							<Text style={styles.techText}> 								{tech} 							</Text> 						</View> 					))} 			</View> 		); 	};  	return ( 		<View style={styles.container}> 			<Image source= 				{ 					{ 						uri: 'https://media.geeksforgeeks.org/wp-content/uploads/20231103122512/p.png' 					} 				} style={styles.profileImage} /> 			<Text style={styles.header}> 				Manish Prajapat 			</Text> 			<Text style={styles.subheader}> 				React Native Developer 			</Text> 			<Text style={styles.description}> 				Welcome to my portfolio app! I am a 				passionate developer with expertise 				in building cross-platform mobile applications 				using React Native. 			</Text> 			<Text style={styles.subheader}> 				Technologies Known 			</Text> 			{renderTechBoxes()} 		</View> 	); };  const styles = StyleSheet.create({ 	container: { 		flex: 1, 		justifyContent: 'center', 		alignItems: 'center', 		padding: 20, 	}, 	profileImage: { 		width: 150, 		height: 150, 		borderRadius: 75, 		marginBottom: 20, 	}, 	header: { 		fontSize: 24, 		fontWeight: 'bold', 		color: 'black' 	}, 	subheader: { 		fontSize: 18, 		color: '#666', 		marginBottom: 20, 	}, 	description: { 		fontSize: 16, 		textAlign: 'center', 		marginBottom: 20, 	}, 	techContainer: { 		flexDirection: 'row', 		flexWrap: 'wrap', 		justifyContent: 'center', 	}, 	techBox: { 		backgroundColor: '#61dafb', 		borderRadius: 5, 		padding: 5, 		margin: 5, 	}, 	techText: { 		color: '#fff', 	}, });  export default Home;

JavaScript

// Projects.js import React from 'react'; import { 	View, Text, 	StyleSheet, FlatList, 	TouchableOpacity } from 'react-native';  const projectsData = [ 	{ 		id: '1', 		title: 'Ticket booking app', 		description: `A React Native ticket booking app allows  					users to browse, select, and book tickets for 					various events, movies, or transportation  					services with an intuitive mobile interface.`, 		technologies: ['React Native', 'Firebase', 'Redux'], 	}, 	{ 		id: '2', 		title: 'Food recipe app', 		description: `A React Native food recipe app  					offers a simple and interactive  					platform for users to discover, explore,  					and cook a variety of recipes, enhancing  					their culinary experience on mobile devices.`, 		technologies: ['React Native', 'Node.js', 'Express', 'MongoDB'], 	}, 	{ 		id: '3', 		title: 'Spotify clone', 		description: `A React Native Spotify clone replicates  					the popular music streaming service,  					providing users with a familiar interface  					to discover, play, and create playlists,  					bringing the Spotify experience to mobile devices.`, 		technologies: ['React Native', 'Firebase', 'Redux'], 	},  ];  const Projects = () => { 	return ( 		<View style={styles.container}> 			<Text style={styles.header}> 				Projects 			</Text> 			<FlatList 				data={projectsData} 				keyExtractor={(item) => item.id} 				renderItem={({ item }) => ( 					<TouchableOpacity 						style={styles.projectItem}> 						<Text style={styles.projectTitle}> 							{item.title} 						</Text> 						<Text style={styles.projectDescription}> 							{item.description} 						</Text> 						<View style={styles.technologiesContainer}> 							{item.technologies 								.map((tech, index) => ( 									<View key={index}  										style={styles.techBox}> 										<Text style={styles.techText}> 											{tech} 										</Text> 									</View> 								))} 						</View> 					</TouchableOpacity> 				)} 			/> 		</View> 	); };  const styles = StyleSheet.create({ 	container: { 		flex: 1, 		padding: 20, 	}, 	header: { 		fontSize: 24, 		fontWeight: 'bold', 		marginBottom: 20,  	}, 	projectItem: { 		backgroundColor: '#fff', 		borderRadius: 10, 		padding: 15, 		marginBottom: 20, 		elevation: 3, 	}, 	projectTitle: { 		fontSize: 18, 		fontWeight: 'bold', 		marginBottom: 5, 		color: 'black', 	}, 	projectDescription: { 		fontSize: 16, 		color: '#666', 		marginBottom: 10, 	}, 	technologiesContainer: { 		flexDirection: 'row', 		flexWrap: 'wrap', 	}, 	techBox: { 		backgroundColor: '#61dafb', 		borderRadius: 5, 		padding: 5, 		marginRight: 5, 		marginBottom: 5, 	}, 	techText: { 		color: '#fff', 	}, });  export default Projects;

Step to Run the Project:

Step 1: Depending on your operating system, type the following command

For android:

React-native run-android

For IOS:

React-native run-ios

Output:

Create a Phonebook and Call App using React-Native

nitesh5mdxiq

Improve

Article Tags :

Create a Portfolio App using React-Native

Prerequisites:

Approach to create Portfolio App:

Steps to Create React Native Application:

Similar Reads