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

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

How to Change Background Color of Button Component in React Native

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

How to Set onPress Function to an Image in React Native

As you know, the Image component of React Native doesn’t have an onPress prop. Hence, you can’t directly set the onPress function to an image in React Native. If you want to add onPress prop to the image, then you have to use the TouchableOpacity component of React Native. Touchable Opacity has onPress prop and … Read more

How to Create Toast in React Native (Android)

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 … Read more

How to Show Static HTML in React Native Webview

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 the following command. or The iOS users don’t forget to run pod install inside the ios … Read more

How to Create Horizontal Progress Bar in React Native (Android Only)

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 the following command. or For iOs, run the following … Read more

How to Open Google Play Store from your React Native App

If you have tried native Android application development then you might know that opening or interacting 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 Google play store from your app. You can do it … Read more

How to Create a Picker Component with Prompt Message in React Native

If you want to create a picker component with 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. Creating … Read more

How to Add a Simple Toggle Function in React Native

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 … Read more

How to Change Default Letter Spacing of Text Component in React Native

Sometimes, you may need to change the letter spacing of your Text component in react native so that you can show some text fancier. Changing the letter space is so easy and you can do that by tweaking the style of Text component. Just use the letterspacing attribute in the style, as given below: <Text … Read more

How to Make Button Component Disabled in React Native

There are times you might need to disable button component to avoid any further actions on button press. You can easily disable button in react native with disabled property. All you need is to set disabled prop of button true, just as given below: <Button disabled title=”Disabled Button” color=”#841584″ accessibilityLabel=”Learn more about this disabled button” … Read more

React Native Error ‘java.lang.String cannot be cast to com.facebook.react.uimanager.AccessibilityDelegateUtil$AccessibilityRole’ Fix

If you are using the latest version of React Native then chances are high that you come across ‘java.lang.String cannot be cast to…’ error. The issue is caused by a bug in the latest react native version 0.57. The react native error is caused by Button component and its title prop. As of now the … Read more