Last Updated on December 10, 2020. 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 …
How to Conditionally Hide and Show a Component in React Native Read More »
Last Updated on December 11, 2020. 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 …
How to Make a Component Center Horizontal and Center Vertical in React Native Read More »
Last Updated on December 11, 2020. 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 …
How to Change Background Color of Button Component in React Native Read More »
Last Updated on December 11, 2020. 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. …
How to Set onPress Function to an Image in React Native Read More »
Last Updated on December 11, 2020. 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 …
Last Updated on December 11, 2020. 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 …
Last Updated on December 11, 2020. 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. …
How to Create Horizontal Progress Bar in React Native (Android Only) Read More »
Last Updated on December 11, 2020. 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 …
How to Open Google Play Store from your React Native App Read More »
Last Updated on December 11, 2020. 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, …
How to Create a Picker Component with Prompt Message in React Native Read More »
Last Updated on December 11, 2020. 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.
Last Updated on December 11, 2020. 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 …
How to Add a Simple Toggle Function in React Native Read More »
Last Updated on October 23, 2018. 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 …
How to Change Default Letter Spacing of Text Component in React Native Read More »
Last Updated on October 23, 2018. 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″ …
How to Make Button Component Disabled in React Native Read More »
Last Updated on October 18, 2018. 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 …
