The design of native mobile application development is a difficult environment. There are different operating systems, a wide range of handset manufacturers and a vast array of screen resolutions to create with. Thankfully, Facebook launched React Native–a platform intended to apply the React approach to mobile application development.
In this discussion, we will create a weather app in real-time, using the free API of OpenWeatherMap.We will address the function with React Native components, icons and styles, and the loading and decoding of JSON data.
Getting started
First, download the GitHub source files. You will notice a “source-imagery” file including the demonstration photos, an ‘article-steps’ file including the source code for each stage (plus comments), and a ‘completed-project’ file including the final project.
To compile the iOS applications (available from the App Store), and the Homebrew OSX package manager, you will require Xcode. Once you have Homebrew installed, you can open a Terminal window and execute the following commands (in case you have issues, here is a guide):
- brew install node to install Node.js
- brew install watchman to install Watchman, a file-watching service
- brew install flow, a static data type checker
- npm install -g react-native-cli to install React Native
Type react-native init weatherapp to build the project. Take a note of the project file and open it to see the default folder layout for React Native. The iOS directory is where the project files for the iOS application project files are. At this point, the file we are interested in is ‘index.ios.js’ Access that in your editor of choice.
It generates an empty view using a range of designs, the container style and a variable of state called backgroundColor. We can adjust the backgroundColor adjustable created on the existing temperature when we enquire about the weather API for data. We may also set the type of container to use flex: 1 for centering.
Now we will use React’s getInitialState technique. This is immediately activated on any module when the app is running. We will use it to declare state variables which will be used later. Add that to the WeatherApp class rendering method.
Now is the best time to hit play on the simulator to see your application jump into Xcode. One of the eccentric features of React Native is its rate of recompilation. Edit #FFFFFFF to another color and hit ‘cmd+R’ to see the near-instant reload – nice!
Declaring constants
Let us announce the constants used for the background colors, and another for the openweathermap.org URL which offers weather information. Just below the React requires adding the following:
Often, we will need to use another built-in procedure of React, component DidMount. This is immediately triggered upon the positive loading of a part. To get the latest geolocation we will use it to ask the navigator. After getInitialState process and before rendering method, add the following:
Once collected, you will be requested by the simulator to enable the application to enter your location. In the Xcode output window, you should notice the completed URL (the adjustable formatted URL) shown. React Native uses console.log() to show content like this-very helpful for debugging. Hire mobile app developers in Dubai to help you build your mobile application using a native mobile app with React Native with the help of our expert and professional staff!
Sending our latitude and longitude to the openweathermap.org API is the next step. Add the following code below componentDidMount and above render:
Eventually, add a line from the component DidMount function which will call this latest fetch data feature. The following code goes immediately below the console.log we used to display the URL.
reflects the temperature.
As the app loads, it needs to check its state to see if the weather data is available or not: apply your own unique load and loading Text styling into the styles and this section will be completed.
While running the app, you should see the loading message momentarily, and then a background color representing the temperature.
Weather information
Now it is time to build the part that shows the details regarding weather. Create a new folder named ‘App’ in your project. Create another folder called ‘Views’, in which we will import from the steps of the article the WeatherView template.
Adding icons
We will now attach icons for each of the weather forms to our Xcode project. Open “ Images.xcassets” in Xcode, then move all images from the weather icons tab.
Adding data
All that remains is to complement some details. Head to your ‘index.ios.js’ and update the rendering method.
This analyses the JSON response and takes data from the city, country, and temperature, and passes it to the component. Now if you want to restart the emulator with ‘ cmd+R, ‘ then you should see your final app.
CONCLUSION
As it turned out, React has been incredibly popular around the world, including large companies. And now the framework has been carried onto the smartphone through React Native. React Native is a great option to build strong iOS and Android applications that feel at home on their respective platforms, all while expanding on any previous with mobile application development.