Training

How to Create Gradient Background Color in React Native

We expect react native to support Gradient color upright but unfortunately, it is not. You have to make some native changes for this- that’s why I use react native linear gradient library. The react native gradient library is pretty straight forward as you can setup it using the following commands: npm install react-native-linear-gradient –save react-native …

How to Create Gradient Background Color in React Native Read More »

How to Disable TouchableOpacity Component in React Native

TouchableOpacity is one of the most using components in React Native projects. Reason is simple, TouchableOpacity is much more flexible and highly customisable than components such as Button. As I mentioned in the title, you can either disable or enable TouchableOpacity according to your requirement. All you need to use is disabled prop of Touchable …

How to Disable TouchableOpacity Component in React Native Read More »

How to set Image as Screen Background in React Native

If you want to set an image as the background of your screen or whole view then you can use ImageBackground component from React Native. Wrap all of your content inside ImageBackground component and you are ready to go. Use ImageBackground as given below: Following is the output of the react native image background example.

How to Download an Image from url in React Native (Android)

Downloading an image to your Android device can be achieved using the React Native Fetch blob library. Before downloading an image in Android, your app must require permission to write external memory. Hence, first you should add permission in Android manifest file. Go to yourProject/android/app/src/main/AndroidManifest.xml and add the following line. Now, the following code shows …

How to Download an Image from url in React Native (Android) Read More »

How to Check Internet Connectivity in React Native (Android and iOS)

Most of the mobile apps in the market use internet to provide services. Hence listening to internet connectivity changes is very important to make the user aware about the situation. In react native NetInfo api is used to test whether the Internet is connected or not. Checking internet connectivity in Android and iOS are different. …

How to Check Internet Connectivity in React Native (Android and iOS) Read More »

How to Make the App Quit When Hardware Back Button is pressed in React Native (Android)

Update: Please check out my latest blog post on Android BackHandler here. Unlike in iOS devices, Android devices have hardware back button which is used to navigate through previous screens. Sometimes, you may need to make the app quit when the back button is pressed. BackHandler is the api used in React Native to modify the …

How to Make the App Quit When Hardware Back Button is pressed in React Native (Android) Read More »

How to Conditionally Hide and Show a Component in React Native

In some situations, you might need to show and hide components conditionally in React Native. Hiding as well as showing React Native component can be done using the state management and ternary operators. In the example given below, I am setting a state named isVisible with value true, which means the text component will be …

How to Conditionally Hide and Show a Component in React Native Read More »

How to Make a Component Center Horizontal and Center Vertical in React Native

Aligning a component center horizontally and vertically is very easy to do in React Native. You have to assign two props to the parent view to get the desired result. Use both props justifyContent and alignItems with value ‘center‘ to make the component center to the parent view. The justifyContent prop aligns the child center …

How to Make a Component Center Horizontal and Center Vertical in React Native Read More »

How to Change Background Color of Button Component in React Native

Button is one of the most common used component in React Native. Reason is quite obvious as we want buttons literally every screen inside the app. In order to change the background color of Button component you just need to use prop color, as given below. Following is the complete example. Following is the output. …

How to Change Background Color of Button Component in React Native Read More »

How to Set onPress Function to an Image in React Native

As you know, the Image component of React Native doesn’t have an onPress prop. Hence, you can’t directly set the onPress function to an image in React Native. If you want to add onPress prop to the image, then you have to use the TouchableOpacity component of React Native. Touchable Opacity has onPress prop and …

How to Set onPress Function to an Image in React Native Read More »