React Native ImageBackground examples

January 7, 2021 A Goodman

A few examples on how to use ImageBackground in React Native. Example 1: Full-screen image background Result: Example 2: Using resizeMode Note: resizeMode and style are at the same level. What you should see when run…

React Native: Alert example & explanation

April 28, 2020 A Goodman

Alert is a commonly used API in React Native which can launch a dialog with title, message, and buttons. Example and explanation Create a new React Native project with React Native CLI or Expo, then replace…

[Solved] React Native Error: No bundle URL present

September 30, 2021 A Goodman

This article shows you a few solutions to fix the No Bundle URL Present error when working with React Native. The Problem When developing an iOS app with React Native, you might run into the following…

React Native: KeyboardAvoidingView example

October 21, 2020 A Goodman

KeyboardAvoidingView is a core component in React Native. This component makes sure the virtual keyboard will never cover the TextInput component so that you can type without annoyance. Without KeyboardAvodingView: With KeyboardAvoidingView: Full example The KeyboardAvodingView…

React Native ActivityIndicator examples

April 23, 2020 A Goodman

A few easy-to-understand examples of how to use the ActivityIndicator API in React Native. The First Example Displaying a loading indicator. The Second Example In this example, we’ll create a simple React Native app that has…

React Native: Opening a website URL with the default browser

September 30, 2021 A Goodman

In React Native, there is nothing similar to the <a> tag in HTML. In order to open a web link in a React Native app, we need to use the built-in Linking API. The example below…

React Navigation 5.x example

September 30, 2021 A Goodman

The simple, concise example below will help you understand how to use React Navigation 5 in a React Native project, regardless you’re a fan of React Native CLI or a loyal Expo user. Create a brand…

React Navigation: Hide Header Bar on Specific Screens

May 5, 2021 A Goodman

To hide the header bar on one or some specific screens in a React Native app that uses React Navigation 5+, just add the following option to Stack.Screen: Like this: For more clarity, see the example…

React Native: handle TextInput, Button events with State hook

January 21, 2021 A Goodman

This article will show you how to handle TextInput, Button events in React Native with the useState hook. You will also learn how to dismiss the device’s keyboard after the button is pressed by using the…

1 2 3