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, , that I have re-started learning and getting hands on experience using React Native. This post is a continuation to that one. in the first post This week I advanced further in my journey. I completed ’s “ ”. The course goes through absolute basics of setting up a bare minimum app in which I got to learn things like: Spencer Carli How to Setup a new React Native Project 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 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. eslint-config-amanhimself I personally, recommend you to use 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. ESLint _eslint-config-amanhimself - ⚛️ + 📱 ESLint config for React Native and Expo apps_github.com amandeepmittal/eslint-config-amanhimself 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 API and how to elevate the card style which is done differently for iOS and android. Platform 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 which automatically re-positions the keyboard (or any other UI element) in the view to show maximum display elements. KeyboardAvoidingView KeyboardAvoidingView Example In this process, I also learned that creating a custom component is not so hard but publishing it on 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: npm _react-native-simple-card - ⚛️ + 📱 Simple Card View for React Native and Expo applications._github.com amandeepmittal/react-native-simple-card To setup and build this project I have used which is another wonderful open source tool to quickly kickstart a React Native project. Create-React-Native-App 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: _weather-cards - Weather Cards UI in React Native_github.com amandeepmittal/weather-cards I also published another article this week on React Native: _React Native is a framework for building mobile applications with JavaScript and leveraging Reactjs. It uses native UI…_medium.com React Native: How to Setup Your First App The previous article in this series: _Start of 2018 🚀_medium.com Starting Over with React Native If you want to hear more from me, please consider signing up.

Fetch

How to use React-Navigation in a React Native App

React Native: Getting Started with Lottie and Expo

Newsletter

Week 2 With React Native: Building a Weather App

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 things I learnt from Steal Like An Artist

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

5 things I learnt from Steal Like An Artist

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps