I'm learning the react native and today I'll write a post about my first app - Simple weather app (from a to z) to apply what I have learned.
source https://github.com/jbohnvn/reactnative
I'm a window and android boy so this tutorial only run with android, so if you guys can run it on iOS please comment, then other people can get it as an example as well.
Requirements:
- Familiar with JavaScript and React
- Nodejs, Android SDK installed on your local machine
- VSCode is using (but you can use any other IDE or editor)
- Having Weather API - OpenWeatherMap account for get API KEY
...let's start
Creating a new project
Really eager to write more code now...
The Prototype
In this step, we develop our first screen, which will be a simple loading screen.
In your App.js, define a local state:
Check out the weather response
Request:
http://api.openweathermap.org/data/2.5/weather?lat=37.4219983333333&lon=-122.0840000&APPID=<<REPLACE_BY_YOUR_API_KEY>>&units=metric
We will get lat and lon by piece of code in App.js
Response:
We will get below information to display
- temperature: json.main.temp,
- weatherCondition: json.weather[0].main,
- position : { country : json.sys.country, name : json.name }
Create Weather component
Very nice, now we have weather information, we will create a Weather component to display them:
We put the information corresponse to TextViewes and creating a dynamid backgroud base on weather condition: <View style={[styles.weatherContainer,{ backgroundColor: weatherConditions[weather].color }]}
Integrate with App component
HOPE YOU GUY ENJOY THIS TUTORIAL!!!
source https://github.com/jbohnvn/reactnative
I'm a window and android boy so this tutorial only run with android, so if you guys can run it on iOS please comment, then other people can get it as an example as well.
Requirements:
- Familiar with JavaScript and React
- Nodejs, Android SDK installed on your local machine
- VSCode is using (but you can use any other IDE or editor)
- Having Weather API - OpenWeatherMap account for get API KEY
...let's start
Creating a new project
Use the react native command line interface to generate a new React Native project
npm install -g react-native-cli
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
Make sure you installed android build version defined in SimpleWeather/android/build.gradleext {
buildToolsVersion = "27.0.3"
minSdkVersion = 16
compileSdkVersion = 27
targetSdkVersion = 26
supportLibVersion = "27.1.1"
}
Really eager to write more code now...
The Prototype
In this step, we develop our first screen, which will be a simple loading screen.
In your App.js, define a local state:
Check out the weather response
Request:
http://api.openweathermap.org/data/2.5/weather?lat=37.4219983333333&lon=-122.0840000&APPID=<<REPLACE_BY_YOUR_API_KEY>>&units=metric
We will get lat and lon by piece of code in App.js
Response:
We will get below information to display
- temperature: json.main.temp,
- weatherCondition: json.weather[0].main,
- position : { country : json.sys.country, name : json.name }
Create Weather component
Very nice, now we have weather information, we will create a Weather component to display them:
We put the information corresponse to TextViewes and creating a dynamid backgroud base on weather condition: <View style={[styles.weatherContainer,{ backgroundColor: weatherConditions[weather].color }]}
Integrate with App component
HOPE YOU GUY ENJOY THIS TUTORIAL!!!
Comments
Post a Comment