How to Change the Placeholder Text Color of TextInput Component in React Native

We use the TextInput component in almost all React Native applications. Because of that, we usually try to customize or stylize textinput to the maximum extent. In this blog post, I will tell you how to change the placeholder color in TextInput. The TextInput comes with the placeholderTextColor property and you can change the color…

How to Disable TouchableOpacity Component in React Native

TouchableOpacity is one of the most used components in React Native projects. The reason is simple, TouchableOpacity is much more flexible and highly customizable 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 the disabled prop…

How to Check Android API Version in React Native

If you are developing an Android app using React Native then you may need to know the Android version of your Android app for various version-specific purposes. For example, if you need to prompt running permissions in Android API versions above Android Lollipop. For this, you should know the Android API level of the user’s…

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 the Android manifest file. Go to yourProject/android/app/src/main/AndroidManifest.xml and add the following line. Now, the following code…

|

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

Most of the mobile apps in the market use the internet to provide services. Hence listening to internet connectivity changes is very important to make the user aware of the situation. In react native, NetInfo API was used to test whether the Internet is connected or not. Now, NetInfo is not part of react native…

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 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 components can be done using the state management and ternary operators. In the example given below, I am setting a state named isVisible with the value true, which means the text component will…

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 the style props justifyContent and alignItems with the value ‘center‘ to make the component center to the parent view. The justifyContent prop aligns…

How to Change Background Color of Button Component in React Native

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