How to Create React Native Gradients

Gradients bring out a colorful taste in our apps. So it’s important to know how and when to use them in your mobile apps. In React Native, gradients are extremely easy to integrate, and in this article, we are going to describe exactly how to implement them. There are mainly two types of linear gradients in React Native and CSS: Linear and Radial gradient

Two of the most used JavaScript libraries for generating gradients in React Native are

React Native WebView — Loading HTML in React Native

In React Native, WebViews enable access to any web portal in the mobile app itself. In other words, a web view allows us to open the web URLs inside the app interface. While React Native provides us with a built-it web view component, but we are going to use react-native-webview plugin in this tutorial, since it is more powerful. React Native WebView is a modern, well-supported, and cross-platform WebView for React Native.

The built-in Webview from React Native is to be deprecated pretty soon based on this document. Hence, this plugin serves as the replacement for the built-in web view. This plugin is a third-party plugin supported by the react-native community.

Deep Linking in React Native with React Navigation

In this article, we are going to build a simple deep linking mechanism in React Native, which takes a user to a specific screen of a sample app, after clicking on a deep link outside the app (e.g. Safari). The output will look like this:

Example output

Create a React Native App

To get started, please create a new React Native project by executing the following command:

React Native Plant App UI #2: Implementing Custom Components

This tutorial is the second part of our React Native Plant App tutorial series. In the previous part, we successfully set up the overall project structure, navigations, constants, and implemented image caching. 

These app templates allow us to implement our own apps and even start our own startups. And, this second part is also the continuation of coding implementations and designs from the Youtube video tutorial by React UI Kit for the Plant App. The video tutorial delivers the coding implementation of the overall app very thoroughly. This tutorial series is the implementation of the same coding style and designs in the form of the article. Thus, the learners can go through each step and take their time understanding the implementations.