react-native-short

To display an image from remote url in React native, we need to pass the url in source prop of <Image> component. The source prop accepts an object with uri…

We often get the requirements to divide a long list into separate sections. These sections could be categories of items like colors, vegetables, fruits, drinks, football players, musicians, marvel superheroes…

To create an infinite loading list in React Native, we need to follow few steps – Create a loader at the footer of the list which can indicate that new…

Pull to Refresh is a common functionality which is provided in both Android and iOS. The same could be achieved in FlatList in React native using onRefresh and refreshing props.…

FlatList provides inverted prop which when set to true, reverses the list. The first item in data array is displayed at the last of the list. The scrollbar is also…

To create a horizontal list in React Native, we can use horizontal prop of FlatList and set it to true. This will render the list in horizontal direction with horizontal…

To add a header to the top of the flatlist in React Native, you can use ListHeaderComponent which can render any custom component or element passed to it. There are…

To add a footer at the bottom of the flatlist in React Native, we can use ListFooterComponent prop which accepts a component or jsx element. This component renders at the…

Empty list placeholder is used to display a message to users when there are no items in the list. If we do not show any message then users gets the…

To create a multi column FlatList in React Native, you can use numColumns prop. It accepts the count of the number of columns you want to display. There are few…

Adding dividers gives a consistent separation between list items. In React Native, we use ItemSeparatorComponent props in FlatList to render dividers. The value of ItemSeparatorComponent could be a function, component…

In order to select multiple items from list in React Native, you need to create a state variable which can hold an array of ids of selected items. In previous…

First of all we need to know what “selecting an item” means. It comprises of two properties – Change of visual of selected item from non-selected items. Keeping track of…

React Native provides <FlatList> component to create high performance lists which can handle large number of items. In this article we will see the code example of a simple FlatList.…

To prevent your Android phone to make any tap sound on button click, you can use touchSoundDisabled props of <Button> component and set it to true. This works for React…

To prevent a button click in React native, we can use disabled props and set it to true. This will stop all the interactions with the Button component. Hence, onPress…

Use color props of <Button> component to change the color in React Native. Since it renders the native buttons in Android and iOS apps, so the color property works accordingly.…

A <Button> component is used to create a simple button in React native. You can customize few properties like color, title, on press event, disable touch sound etc. But it’s…

We can use color props in <ActivityIndicator> component to change color of circular loader in React Native. Any hex color code value is supported in it. Code Example In the…

Use animating props of ActivityIndicator component to show or hide the circular loader in React Native. Set it to true to show the loader and false to hide it. You…