Code Example

React Native <RefreshControl> component provides size prop which can be used to change the size of loader in pull to refresh. The possible values of this prop are default and…

Changing Refresh loader color in React Native works differently in both Android and iOS apps. In Android apps, we can show multiple colors in the loader while in iOS, single…

Pull to refresh loader works in ScrollView and List components like FlatList or SectionList. Although these lists supports pull to refresh inherently but that is not customizable. React Native provides…

React Native provides transparent prop in Modal component to toggle the transparency of modal overlay background. By default modal covers the whole view but setting the transparency will prevent the…

To create fade animation in modal in React Native, pass fade as value in animationType prop of <Modal> component. This is similar to slide animation. Code Example The output looks…

“slide from bottom” animation creates the effect of modal appearing from bottom to middle of screen. In React Native, we can create it by setting animationType prop to slide of…

React Native provides <Modal> component to show a basic modal for mobile apps. It has visible prop which derives the visibility of modal. You can put the interface as child…

Did you ever come across a situation where you have an input field and when pressed, it got overlapped or hid behind keyboard? This is a common issue which is…

React Native provides <ImageBackground> component which can be used to render images on the background with children components above it. This component is similar to Image component and supports most…

A default image is useful when either the desired image is not loading, url address is wrong, image is down, prevented due to hotlinking, network error or any other kind…

It is a good practice to show a loader when a big image is downloading. This is because, depending on internet connection, the image might take time and user will…

React Native Image component provides blurRadius prop which accepts a numerical value. This prop can be used to add blur to the images. 0 value means no blur, while any…

In order to display a Gif or webp image in React Native we need to implement Facebook Fresco image library in our Android gradle file. This is required because gif…

In order to display a base64 image in React Native you need to pass the data uri to the source prop of <Image> component. This is quite similar to displaying…

To display an image from local storage in React Native, we can use source prop of <Image> component and pass the relative file location. Unlike remote url image, for local…

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…