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…
This is an Android-specific React Native issue. You might be followed all things given in the official docs to generate signed APK but you get only app-release-unsigned.apk in \android\app\build\outputs\apk\release directory. Well, the issue is not with your keystore either. You just need to add a line in app/build.gradle file as given below: buildTypes { release { ……
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…
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….
As you know, the Image component of React Native doesn’t have an onPress prop. Hence, you can’t directly make an image clickable in React Native. If you want to add an onPress prop to the image, then you have to use the Pressable component of React Native. Touchable Opacity has onPress prop and you can…
If you are an Android app developer then you might already know what a toast is and how to use it in Android apps. You can create Toasts in React Native also. You need to use ToastAndroid API to create toast in React Native. You can check out the official document of ToastAndroid here. We…