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.
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
This tutorial requires basic knowledge of React Native. To set up your development machine, follow the official guide here. …
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.
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.
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. …
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.
React Native has an
ActivityIndicator built in which can be used as a loading indicator.
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.
Before we start our journey deep into the woods, let’s take a look at our problem statement. …
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.
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. …
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
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
First, download the library from npm:
npm install react-native-maps…