Code Example

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…

To change the size of circular loader in React native, you need to provide size props in ActivityIndicator component. The valid values are – large & small. Code Example Live…