React Native: 3 best libraries for navigation and routing

June 12, 2020 Goodman

3 great libraries for navigation and routing in your React Native mobile apps. React Navigation React Navigation is widely used, well documented and I personally like this one the most. It delivers out-of-the-box, pre-styling navigators such…

How to create completely round images in React Native

June 8, 2020 Goodman

To create perfectly round images in React Native, just give the borderRadius property a very high value. Example The code: Perform the snippet above and see the result on your machine ๐Ÿ˜‰ ๐Ÿ˜‰

React Native: How to add shadow effects on Android

June 8, 2020 Goodman

To add shadow effects on Android, you need to use the elevation property. Example This example shows you how to create drop shadows on both iOS and Android. Unfortunately, when using drop shadow on Android with…

How to create round buttons in React Native

June 6, 2020 Goodman

The example below will show you how to create round buttons in React Native. We will use TouchableOpacity instead of the basic built-in Button component. Code Replace the default code in App.js with the following snippet:…

React Navigation 5: useRoute hook example

June 6, 2020 Goodman

React Navigation provides a hook which helps you access to the route object. It is the useRoute hook. Example Create a new React Native project, delete all the default code in App.js and add this (don’t…

React Navigation 5: Hiding bottom tab on a specific screen

June 6, 2020 Goodman

React Navigation is a great library for React Native to navigate. If you’re using createBottomTabNavigator and want to hide the bottom tab bar on a specific screen, just use the tabBarVisible option: Full example App.js: Test:…

Using Font Awesome Icons in React Native

June 3, 2020 Goodman

This tutorial will show you how to use Font Awesome icons in a React Native app. Adding Font Awesome to your React Native project Install the required packages: Link your native dependencies by running: Usage Import…

React Navigation 5: Header background and header title color

June 3, 2020 Goodman

When using React Navigation 5 to route and navigate your React Native apps, the header bar background color and the header title color is totally up to you. To set the header background color, use this…

React Navigation 5: Center the header title on Android

June 3, 2020 Goodman

By default, the header title of a React Native app that using React Navigation 5 is on the left side. To center it, just add this option: Full example: Screenshot: Happy coding ๐Ÿ™‚

React Native: Please accept all necessary Android SDK licenses…

June 3, 2020 Goodman

Problem When try to run a React Native app on a virtual Android device with the following: You may face this error: error Failed to install the app. Please accept all necessary Android SDK licenses using…

React Navigation 5: Dynamic header title (with hooks)

June 2, 2020 Goodman

This article shows you how to dynamically update the header title of a screen in a React Native app. We will use React Native latest version, the useState hook, the useEffect hook, and the React Navigation…

Null is not an object (evaluating ‘_RNGestureHandlerModule…

June 2, 2020 Goodman

When developing a new React Native project on my Mac, I fall into a problem when running npm run ios. I’m using React Navigation 5 and React Native 0.62.2 (you can check out my dependencies below)….

React Native ImageBackground examples

May 7, 2020 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…

React Native: Alert example & explanation

April 28, 2020 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…

React Native: No bundle URL present

April 28, 2020 Goodman

I am using React Native 0.62.2, Xcode 11.4, macOS 10.15.4 (Catalina), the latest version of VS Code, and Node 14. The deadly screen appears when I run: I also notice that the Metro terminal doesn’t launch…

React Native 0.62: KeyboardAvoidingView example

April 25, 2020 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 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

April 23, 2020 Goodman

This article will show you how to open a website URL with the default device’s browser in a React Native app. There is no <a> tag in React Native and to open a web link in…

React Navigation 5.x example

April 22, 2020 Goodman

A 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 completely…

React Navigation 5: Hide header bar on specific screens

February 24, 2020 Goodman

To hide the header bar on a specific screen with React Navigation 5.0 or newer in React Native, just use: Full example App.js:

1 2