Using placeholder loaders in React Native apps using rn-placeholder

Image for post
Image for post
Photo by Caspar Camille Rubin on Unsplash

Good user experience is what separates an awesome app from a regular one. Users expect their apps to be blazing-fast since no one enjoys waiting. When building mobile apps, we often use loaders, progress bars, and loading indicators to tell users when something is happening or loading.

The latest trend is to show placeholder/skeleton screens as loaders. This pattern of using a placeholder improves the user’s perceived experience when waiting for something to load. You might have seen these kinds of loaders in apps like Facebook and Netflix.

Image for post
Image for post
Loaders in Netflix app

Loaders in React Native

In most cases, using the good ol’ ActivityIndicator along with the React Native modal would suffice. However, as a user and a developer, I find them to be too mundane and old-fashioned. …


Adding multi-language support to React Native apps using react-native-localize and i18n

Image for post
Image for post
Photo by Thomas Kelley on Unsplash

Language has always been an essential part of any business. As a business grows, they often look to expand into different countries and regions. To achieve success in these new regions it is important to provide localization.

When it comes to a mobile app, the conditions are no different. As an app’s user base expands to different countries, it is important to provide users with the ability to use the app in their native language.

In this piece, we are going to build a React Native app that supports multiple languages by using the react-native-localize package.

Prerequisites

This tutorial requires basic knowledge of React Native. To set up your development machine, follow the official guide here. …


Use firebase to schedule a local push notification

Image for post
Image for post
Photo by Jamie Street on Unsplash

With ever increasing app usage, app developers keep trying to find new ways to keep their users engaged. Push notifications are one way to keep your users engaged and informed.

Push notifications are the communications channel used by apps to drive user re-engagement and retention. Push notification technology has come a long way, from being a single messages delivery system to a rich and interactive medium.

There are two types of notifications: remote and local.

Remote Notifications

With remote notifications, you use one of your company’s servers to push data to user devices via the Apple Push Notification service or FCM.

Local Notifications

Both Android and IOS support the ability to trigger notifications from your application locally. These can either be displayed immediately, or scheduled to be displayed at a later date. …


Use Airbnb’s Lottie library to jazz up your loaders

Image for post
Image for post
Lottie Animation for Loaders

A loader in Web or Mobile is an essential design element, usually used when we need to perform some asynchronous task like data processing or fetching. These tasks may take some time, during which users must be entertained, so this is where loaders come in handy.

Loaders help developers keep the user engaged while they wait and avoid any lack of responsiveness in the app.

Don’t want to wait? Check out the npm package React-Native-Animated-Loader.

Getting Started

React Native has an ActivityIndicator built in which can be used as a loading indicator.

But for Loaders we can’t just use ActivityIndicator as we want to prevent the user from performing any action until the task is complete. …


Create beautiful charts with react-native-svg-charts

Image for post
Image for post
Photo by Jason Coudriet on Unsplash

Creating charts in React Native, be it on the web or on mobile apps, has always been an interesting and challenging task. It’s difficult to find a suitable library that can meet both your functional and design needs. You can try to make your own charts, but that often comes with the overhead of learning and implementing things from scratch.

If you are a beginner like me, you probably want to use an existing charts library and given how young the React Native community is, there are very few options available to you to implement and customize charts.

Problem Statement

Image for post
Image for post
Area chart with tappable tooltip

Before we start our journey deep into the woods, let’s take a look at our problem statement. …


Image for post
Image for post
React Native Searchable Flatlist

If you have ever used a mobile app or build one, then you must have come across some kind of list — whether it was a long list of contacts, products, countries, or other things.

They may seem very simple to an end user. But for developers, displaying a long list of data has always been a pain point when it comes to performant long lists. This is especially true in the apps that are build with React Native.

Background

During the initial days of React Native, we had the good old ListView. It had many features which made it very attractive, and it was a default choice for efficiently displaying vertical list of changing data. …


Build a real-time location tracking app using react native and react-native-maps

Image for post
Image for post
Tracks user’s location and draws the path as the location changes

If you’ve been working with React Native you must have used or heard about react-native-maps. React native maps is a react native package that provides Google Maps API for React Native. Using static google maps is very common but today we are going to use one of the widely used features of google maps, location tracking using React native.

Find the project repo here

Getting Started

Start by creating a React Native project and name it whatever you want. I’m using the react-native-cli but create-react-native-app should also work just fine.

react-native init locationTracking

Installing react-native-maps

First, download the library from npm:

npm install react-native-maps…

About

Vikrant Negi

I’ve moved to dev.to , follow me there— https://dev.to/vikrantnegi

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store