You might have seen Google Maps in almost all the apps these days. Some mobile apps are displaying their outlet locations, track users (like Uber), showing nearby places, etc. So, it shows the importance of maps support in mobile apps. Today, we are going to integrate Google Maps in a React Native app step by step, using the popular React Native Maps package.
React Native tooling has changed. Older lists often recommended Flipper, Nuclide, standalone React Native Debugger, or remote Chrome debugging as the default workflow. Modern React Native apps should start with React Native DevTools, Metro, and the native tools that ship with Xcode and Android Studio.
The Async Storage is a simple key-value pair based storage system in React Native. It is used for scenarios where you want to save the user’s data on the device itself instead of using any cloud service, such as building offline apps. According to the React Native’s official documentation:
On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, AsyncStorage will use either RocksDB or SQLite based on what is available.
In this tutorial, we are taking a look at how to detect and support dark mode in React Native apps. You are going to build a small demo app that sets its appearance based on the platform OS. The platform OS will have two theme modes, dark or light. By default, when the app will start, it is going to have the theme based on the platform OS but the user is going have an option to toggle between the themes.
In this tutorial, we are going to give a quick introduction to React Native hooks. Hooks in React are available since the version 16.7.0-alpha. These functions allow us to use React state and a component’s lifecycle methods in a functional component. If you are familiar with React, you know that the functional component has been called as a functional stateless component. Not any more.
The app icon is one of the first production assets you should replace before submitting a React Native app to the Apple App Store or Google Play. It appears on the home screen, app stores, settings screens, notifications, search, and device launchers.
This guide explains how to replace icons in a React Native app with native iOS and Android projects.
Perceived performance is how fast an app feels to the user. A screen can take the same amount of time to load, but feel much faster when it shows immediate feedback, preserves user work, avoids blank states, and explains what is happening.
Entrepreneurs, designers, and developers tend to separate Growth aspects from the mobile app development process. They are usually perceived as completely different focus areas. After all, what does marketing have to do with app development, right? Because of this, many startups fall into the trap of building onboarding screens that are so beautiful it blows the user’s mind, but they are not optimized for Growth, hence don’t convert well.
In this tutorial we will build a React Native app that allows users to upload images and videos from their camera and photo library directly into a AWS S3 bucket. As AWS is the leader of cloud providers, a huge part of the React Native ecosystem is using AWS as the backend for their app. With the release of AWS Amplify, using AWS as backend for a React Native app has never been easier to implement.
An App Walkthrough Screen is a slider screen which allows the user to learn everything about the features of a mobile app when they open the application for the first time. We can implement this feature in a React Native application in multiple ways. In this React Native tutorial, we describe how we implemented the Walkthrough Screens in all of our React Native Templates so that you can speed up your app development by reusing our open source code.