How I built my first Mobile App Project using React Native Expo
Love percent calculator app using React Native Expo
Building your first application can be a little overwhelming when you start learning how to code. I am going to share my first mobile app experience and how I built that. Well, I made my first mobile application on a native platform called Expo. Here you can make a mobile application that works on both IOS and Android devices.
Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad
Planning
When you start to learn a new thing, you have a lot of questions in your mind like what to learn, from where to learn? Is it okay for my carrier or not? what will be the outcome? and so on. Here the simple suggestion is don’t think about the outcome, just do what you love to do. It will pay you sooner or later.
When we talk about react-native then you can start learning from free courses from Youtube, Coursera, or somewhere else. My suggestion is to don’t spend too much on the course early. Just take a sneak peek at the course. When you start understanding things and are ready for a long jump, then you can proceed with paid courses. I started learning about the react-native expo from YouTube and blogs.
Take a simple step at a time. But don’t stop. As we all know that planning is important, you have to plan everything to maintain the pace of learning. When I started learning I started making small projects like making a simple header, making a card, and making simple UI. You can start learning with a tutorial but don’t start with a hectic project like making an Instagram clone or something. It will spoil your learning.
Make a calendar and mark down the things you have to finish in the present week in react-native. This is the simple and most effective way to keep going. The most interesting part here is that you will learn new things each day.
Drafting the Work
When I started learning last year(2020), I did the most common mistake a developer do. I didn’t draft the code and work. Don’t do this. Drafting your work is always a good habit. Let me suppose I am working on a new project, I have to add few lines of code which I added already in my previous project. But I didn’t draft that project. Then in case of an error in the new project, I have to search the error and code on the internet, which takes a lot of time. It’s annoying, right? You can use Github to store your code, it’s a paradise for developers. Either you can comment out or write full documentation of your code. At the early stage, it may be a little bit hectic but after 6 months or maybe later you will see the results. It’s a good habit.
If you start drafting your work from day 1 then after few months, you have a full package of content from beginner to pro. It’s not just about content, it’s more about learning and exploring things.
Don’t you excited to start something fresh?
About my project (Love percent Calculator)
Love percent calculator is a simple react-native application where you can check your bonding with your partner in percentage. You have to enter your name and your partner's name. After you hit calculate button, it will show you how strong your bond is in percentage. Higher the percentage higher your bond is.
We are using an API for building this project. The link is here. You have to make an account after that you will get your API key.
It’s a single-page application with a simple UI. I made two components for this project. One is for taking the input data and the other is to calculate the love percentage.
Result_love.js code:
const Result_love = (prop) =>{if(prop.data == "Loading"){
return <Text style={{fontSize:20, textAlign:'center'}}>Please Enter Your and Patner Name</Text>
}
if (prop.data.message) {
return <Text style={{fontSize:20, textAlign:'center'}}>Somthing Went Wrong Please Try Again !</Text>
}
else {
return(
<View style={styles.component}>
<Text style={styles.text} >{prop.data.percentage}%</Text>
<Text style={styles.text} >{prop.data.result}</Text>
</View>
);
}
}
Input_love.js
export default class App extends Component{
state={
male:'',
female:'',
result:'Loading'
}
submited(){
fetch(`https://love-calculator.p.rapidapi.com/getPercentage?fname=${this.state.male}&sname=${this.state.female}`,{
headers:{
"X-RapidAPI-Host":"love-calculator.p.rapidapi.com",
"X-RapidAPI-Key":"ENTER_YOUR_API_KEY"
}
})
.then(data=>data.json())
.then(data2 => {
this.setState({
result:data2
})
})
}
render() {
return(
<View>
<Appbar.Header>
<Appbar.Content
style={{alignItems:'center'}}
title="Love % Calculator"
/>
</Appbar.Header>
<TextInput
style={{margin:10}}
label='Male'
value={this.state.text}
onChangeText={text => this.setState({ male:text })}
/>
<TextInput
style={{margin:10}}
label='Female'
value={this.state.text}
onChangeText={text => this.setState({ female:text })}
/>
<Button
icon="heart"
style={{margin:20}}
mode="contained"
onPress={this.submited.bind(this)} >
Calculate
</Button>
<Result_love data={this.state.result} />
</View>
);
}
}Update the Input_love.js with API key in line 16. Import the Input_love.js in App.js. And you will see your project in action. Although it’s not the full code.
Github code of Love Percent Calculator
Bingo. You are a developer now.
It’s not about just code. It’s all about the process. The more you go through the process the stronger you become. If you are planning to start learning react-native then just start. Don’t think too much. From one day today, one is a very big step.
Thank you for reading. If this article sounds informative then clap until your hands bleed and share it with your community.
Hello, My Name is Rohit Kumar Thakur. I am open to freelancing. I build react native projects and currently working on Python Django. Feel free to contact me (freelance.rohit7@gmail.com)
