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 …

How to Make a Component Center Horizontal and Center Vertical in React Native 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. …

How to Change Background Color of Button Component in React Native 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 …

How to Set onPress Function to an Image in React Native 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 …

How to Create Horizontal Progress Bar in React Native (Android Only) 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 …

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

How to Disable Picker Component in React Native

Sometimes, you may need to disable the picker component to avoid any further actions related to the same. In order to disable picker component in React Native you just need to use its enabled prop. Set enabled as false to make the picker disabled. Like the example given below.

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 …

How to Change Default Letter Spacing of Text Component in React Native 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” …

How to Make Button Component Disabled in React Native 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 …

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

How to Show Base64 Data as Image in React Native

Showing Base64 encoded data as image is very easy in React Native. It is pretty similar to what you would do with the basic HTML. All you need is to pass the Base64 data to the source prop of the image component. const encodedBase64 = ‘R0lGODlhAQABAIAAAAAA…7’; <Image source={{uri: `data:image/gif;base64,${encodedBase64}`}} />