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

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

How to Change Background Color of Button Component in React Native

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….

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 any of the following commands. or For iOS, run…

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

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….

How to Disable Picker Component in React Native

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…

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

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…