Linear Gradient Component in React Native

This is an Example of Linear Gradient Component in React Native. For those who have no idea about Gradient, A Gradients let you display smooth transitions between two or more specified colors. The gradient can be of two types: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) In this example, we will see … Read moreLinear Gradient Component in React Native

React Native Get Clicked Location of Touchscreen Using PanResponder

To get the clicked location of touchscreen React Native provides an easy to use the component called PanResponder. it is used to recognize the touch on both Android and iOS mobile phone screens. This example is for those who want to start the gaming applications development in React Native. To Import PanResponder in Code

Use … Read moreReact Native Get Clicked Location of Touchscreen Using PanResponder

Image Icon Inside the React Native Button

We always want to make our buttons as good as possible to provide the best UI experience. Everybody knows that the button is the most important thing in the mobile application as we require buttons on mostly each screen. So to start showing Image Icon Inside the React Native Button we are expecting you understand the Button … Read moreImage Icon Inside the React Native Button

Load Different Style Sheet Dynamically on the Component in React Native

This is an Example to Load Different Style Sheet Dynamically on the Component in React Native. To do this we will use a conditional operator and state. When we change the state view will re-render itself and after checking the state we will change the style of the component. In this example, we are using Text … Read moreLoad Different Style Sheet Dynamically on the Component in React Native

Example to Hide Show Component in React Native

This is an Example to Hide Show Component in React Native. To do this we will use a conditional operator and state. When we change the state view will re-render itself and after checking the state we will return the view or null. In this example, we are hiding and showing the image on a click of a … Read moreExample to Hide Show Component in React Native

Example to Align a View at the Bottom of Screen in React Native

This is an Example to Align a View at the Bottom of Screen in React Native. To do this we will use the Stylesheet element position: ‘absolute’. Align a View at the Bottom Using

Let’s get started with the example. Open App.js in any code editor and replace the code with the following code. App.js … Read moreExample to Align a View at the Bottom of Screen in React Native

Set Alpha Opacity / Transparency of Image View in React Native

This is an Example to Set Alpha Opacity / Transparency of Image View in React Native.  In this example, we will set the alpha opacity of the Image View. It is useful when you use the image in the background and show something over it like we generally do in Splash Screen of the App where … Read moreSet Alpha Opacity / Transparency of Image View in React Native

Make Circular Image in React Native using Border Radius

This is an example to Make Circular Image in React Native using Border Radius. Round Shape / Circular Image in React Native is the extension of our previous post on React Native Image component. We will use the same Image component as we have used before in our Image Example but here we will use borderRadius style to make … Read moreMake Circular Image in React Native using Border Radius

Example of Pinch to Zoom Image in React Native

This is an Example of Pinch to Zoom Image in React Native. We are going to use react-native-image-zoom-viewer library for the pinch to zoom effect. While making a mobile app which has Image(s) we always need a pinch to zoom effect. It makes the App experience better as the user can easily see more details … Read moreExample of Pinch to Zoom Image in React Native

React Native Full Screen Background Image

While developing an App we usually need a Full-Screen Background Image, especially while making a Splash / Introductory Screen. So here is the Example of React Native Full Screen Background Image. To make a full-screen background we are using ImageBackground component provided by React Native. To Import Image Background in Code

Render Using 1. Static Image Resources

Read moreReact Native Full Screen Background Image