173 posts tagged with "React Native"

In today’s article we will build a React Native Music Player, to showcase how easy it is to build a music app in React Native, that is optimized for both native iOS and Android. The project we are going to build will look and behave similar to the Spotify player, that all of us are familiar with. The main goal is to have a basic app with two screens: one with a list of predefined songs and another one with the actual music player.

React Native WebView lets a native app display trusted web content inside a screen. It is useful for checkout, help centers, terms, OAuth pages, and embedded dashboards, but it needs clear security boundaries and loading states.

Maps are a core part of many React Native apps: taxi booking, food delivery, real estate listings, store locators, local marketplaces, travel apps, fitness tracking, and social discovery all need some form of map display.

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.

Offline-first React Native apps need deliberate data design. Lightweight preferences can use AsyncStorage, but serious offline workflows need structured local data, queued writes, sync conflict handling, retries, and visible user states.

Dark mode in React Native should start with system appearance APIs and a real theme model. This guide now focuses on useColorScheme, Appearance, app-level overrides, design tokens, and production checks across native and JavaScript surfaces.

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.

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.

Sign in with Apple is a common requirement for React Native apps that offer third-party login options such as Google, Facebook, LinkedIn, or Amazon. It also gives iOS users a privacy-friendly authentication option that works well with Firebase Authentication.

Optional imports are useful when a React Native app has platform-specific code, feature-gated screens, optional assets, or native modules that should only load in one environment. They are also easy to misuse. Metro still needs to know what files can be bundled, so arbitrary runtime strings are not a good import strategy.