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…
Post Android Lollipop OS, you need to ask for running permissions to access the camera, location, external memory, etc. This React Native tutorial will help you how to ask for running permissions in React Native. Here, you should use PermissionsAndroid API from React Native. There are two types of permissions- normal and dangerous. Normal permissions…
In order to compatible with the latest version of nodeJS you might also want to update npm. Otherwise, you will be unable to download packages using npm. As a React Native developer chances are high that you come across with npm compatibility issues. To fix npm upgrade issues, just follow the steps below: First of…
Sometimes, you might need TextInput which can’t be edited by the user. In that case, TextInput should be made not editable with editable prop. Let’s check how to make TextInput noneditable in react native. Go through the code below where I made TextInput not editable. As you noticed, here I used editable={false} to make the TextInput not…