Week 2 With React Native: Building a Weather App

Week 2 with React Native ⚛️ + 📱

This post was supposed to come out last weekend. I had a busy weekend could not find the time to write it nor had the energy to pull off it. Last week, I announced publicly, in the first post, that I have re-started learning and getting hands on experience using React Native. This post is a continuation to that one.

This week I advanced further in my journey. I completed Spencer Carli’s “How to Setup a new React Native Project”. The course goes through absolute basics of setting up a bare minimum app in which I got to learn things like:

• configuring iOS simulator on MAC
• linting with ESlint
• Prettier: using code formatting tool
• Debugging

Though, I had been already familiar with the process of lint and prettier since I use both of them in my daily workflow. Debugging and other modules are a delight to get familiar with in the start and will give an overall aspect of things such that you do not loose patience with yourself when trying to use them later. Moreover, Spencer is a calm instructor and has soothing voice. I enjoyed his method of teaching.

eslint-config 🛠

I took the linting process with ESLint a step further. I worked on a small npm module called eslint-config-amanhimself and the advantage of using it is that, now I do not have to setup and configure every other React-Native project I start from scratch. The other advantages of using lint tool if you are familiar with web programming, you do not need an introduction.

I personally, recommend you to use ESLint with your projects, not only React Native but any other JavaScript library or framework you choose to work with. It does bring consistency in writing code and save minute errors from occurring at the time of compilation.

amandeepmittal/eslint-config-amanhimself_eslint-config-amanhimself - ⚛️ + 📱 ESLint config for React Native and Expo apps_github.com

This tool is completely open source and saves a lot of my time and yours will too, if you decide to use it. At least give it a try. I want you to know that I am open to contributors if we can make this utility better that benefits every one.

Weather Cards ⛅️

Next thing I worked on was a small application that I built to fetch weather of city using a third party API and display a set of data in the form of a card. This is how it looks like.

The main elements that I used in building this application are the following:

• Background image (using ImageBackground)
• InputText Value
• Fetching Weather Data from the API [https://www.metaweather.com/api/](https://www.metaweather.com/api/)
• Card View UI to display Data

Background Image changes accordingly to the type of the weather which is fetched from the API. In this process, I also learned a bit about using React Native’s Platform API and how to elevate the card style which is done differently for iOS and android.

Developing for Mobile is different from developing an app for web. In mobile, there are so many different elements to use and take care of. For example, in the below screen notice two things. One is a little cross button to delete the text in one action from the input field (only supported for iOS by RN API, I am sure there might be solution for android but I haven’t tried yet). Next, is the KeyboardAvoidingView which automatically re-positions the keyboard (or any other UI element) in the view to show maximum display elements.

KeyboardAvoidingView Example

In this process, I also learned that creating a custom component is not so hard but publishing it on npm for React Native apps is a difficult task. The card view in this application I am using can be found here as a separate component:

amandeepmittal/react-native-simple-card_react-native-simple-card - ⚛️ + 📱 Simple Card View for React Native and Expo applications._github.com

To setup and build this project I have used Create-React-Native-App which is another wonderful open source tool to quickly kickstart a React Native project.

I had a fun week with React Native. I tried to spend as much time as I could get. 🙏 Thank you for reading this post. This whole project can be found on Github:

amandeepmittal/weather-cards_weather-cards - Weather Cards UI in React Native_github.com

I also published another article this week on React Native:

React Native: How to Setup Your First App_React Native is a framework for building mobile applications with JavaScript and leveraging Reactjs. It uses native UI…_medium.com

The previous article in this series:

Starting Over with React Native_Start of 2018 🚀_medium.com

If you want to hear more from me, please consider signing up.