Create a Portfolio App using React-Native
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.w3wiki.net/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: