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…
You can show static HTML in your React Native app using the WebView component. The WebView component is not available in react native core but you can get it from react native community. Firstly, install react native webview using any of the following commands. or The iOS users don’t forget to run pod install inside…
As you know, the ActivityIndicator component of React Native is round in shape and not horizontal. If you need a horizontal progress bar in your React Native Android app then you should use ProgressBarAndroid component. The ProgressBarAndroid component should be installed from react native community using any of the following commands. or For iOS, run…
If you have tried native Android application development then you might know that opening or interact with other apps is done with Intents. In React Native, we use its Linking API to interact with other apps. Use react native Linking API in order to open the Google play store from your app. You can do…
If you want to create a picker component with a prompt message in React Native then this is the right place to look for. The Picker component will be removed from react native core and hence install Picker from react native community using the following command. or For iOS users, execute the following command too….
The Picker component is a controlled component, which means that the user’s selection is controlled by the React Native component. Sometimes, you may need to disable the picker component to avoid any further actions related to the same. In order to disable the Picker component in React Native you just need to use its enabled…
Toggle functions are used when we want to toggle certain components or items. For example, we use the toggle function in the Favorites section of the mobile app. The favorite icon toggles when the item is either added or removed. So, here is a react native code snippet that toggles the text written in the…
Sometimes, adjusting the letter spacing of text in your React Native app can enhance its visual appeal. In this tutorial, let’s learn how to change the default letter spacing of a text component in React Native. Changing the letter space is so easy and you can do that by tweaking the style of the Text…
If you’re a developer building a mobile app with React Native, you may have come across a situation where you want to disable a button based on certain conditions. In this blog post, let’s learn how to disable a button in react native. The Button component comes with the disabled property and you can easily…
One common use case for React Native is displaying images in a mobile app. In this tutorial, we will learn how to display a base64 image in react native. Showing Base64 encoded data as an image is very easy in React Native. It is pretty similar to what you would do with basic HTML. All…