React Native: How to add shadow effects on Android

June 8, 2020 A 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

May 3, 2021 A 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. The Code Replace the default code in App.js with the following:…

React Navigation 5: useRoute hook example

June 6, 2020 A 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 A 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 A 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 A 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 A 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…

December 4, 2020 A 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)

March 19, 2021 A 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…

March 19, 2021 A 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

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…

1 2 3