In this blog post, I will show you how to embed a YouTube Video in your react native app using WebView. As you may know, the WebView component is removed from the react native core. But you can use the Webview component from react native community. First of all, install react native webview using the…
The Text component in React Native appears to be simple but it has a lot of props for customization and usability. Sometimes, we want to make the Text component more stylish by having shadows with vibrant colors. In such cases, you don’t need to rely on any third-party component libraries- react native text itself has…
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…
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…
Well, there are some third-party libraries to scan QR codes through your React Native mobile app but what about generating QR codes in your app? I went through some of the react native libraries when I got a requirement from a client to generate a QR code inside the mobile app. Even though the popular…
Well, you can also change the color of an image or icon in React Native. Precisely saying, you can change the color of all the non-transparent pixels of the image. To achieve this, all you need is to add the style property tintColor to your image component. You can change the color of an image…
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…
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…
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…
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…
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…
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…