How to implement tables in React Native (2022)

January 3, 2022 A Goodman

Tables help us display information neatly and elegantly in rows and columns. In this article, you will learn how to implement tables in React Native by using three different libraries: react-native-paper, react-native-table-component, react-native-easy-grid. Without any further…

How to set a gradient background in React Native

March 15, 2022 A Goodman

This article shows you how to implement a gradient background in both Expo and bare React Native (or old React Native CLI) projects. At the time of writing, React Native doesn’t officially support linear gradients, so…

Top 4 open-source React Native UI libraries in 2022

January 2, 2022 Guest Contributor

React Native is an open-source mobile framework that helps you build Android and iOS apps using Javascript. First launched in 2015, React Native is thriving and used by many major apps like Facebook, Instagram, Walmart, Tesla,…

Implementing a Date Time picker in React Native

November 22, 2021 A Goodman

In the old days, DatePickerIOS, DatePickerAndroid, and TimePickerAndroid components used to be used to create Date and Time pickers in React Native applications but nowadays, these ones are deprecated. At the time of writing, using react-native-datetimepicker/datetimepicker…

React Native: How to make rounded corners TextInput

February 22, 2022 A Goodman

The example below shows you how to make a rounded corners text input in React Native for both Android and iOS. Screenshot: The code 1. Add a TextInput component: 2. Style it: The complete code: That’s…

Open Android emulator/ iOS simulator using VS Code

February 9, 2022 The Frog

If you’re working with Flutter or React Native, you can launch an iOS Simulator or an Android Emulator using VS Code (Visual Studio Code). 1. Go to View > Command Palette… or hit Command + Shift…

React Native: 3 best Libraries for Navigation and Routing

January 19, 2022 A Goodman

This article walks you through 3 great libraries for navigation and routing in React Native mobile apps. React Navigation React Navigation is widely used, well documented and I personally like this one the most. It delivers…

How to create circle images in React Native

February 22, 2022 A Goodman

To create perfectly round images in React Native, just give the borderRadius property a very high value. Example The code: That’s it. Further reading: How to Get the Window Width & Height in React Native How…

React Native: How to add shadow effects on Android

September 30, 2021 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. Screenshot: The complete code: Unfortunately, at this time,…

How to create round buttons in React Native

June 26, 2022 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: useRoute hook example (2022)

January 19, 2022 A Goodman

React Navigation provides a hook that helps you access the route object. It is the useRoute hook. This article will walk you through a complete example of using this hook in a React Native mobile app….

React Navigation 6: Hiding bottom tab on a specific screen

January 19, 2022 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 set the tabBarStyle option to { display: ‘none’…

1 2 3 4