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.
Preview
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-iconsProject Structure:
Structure of project
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.jsimport 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.jsimport 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:
}
} 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.jsimport 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-iosOutput:
output of the app