Using placeholder loaders in React Native apps using rn-placeholder

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.


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

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…


Use firebase to schedule a local push notification

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…


Use Airbnb’s Lottie library to jazz up your loaders

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…


Create beautiful charts with react-native-svg-charts

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


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…


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

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…

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