How to change the size of pull to refresh loader in React Native?
Akash Mittal
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…
How to change refresh loader color in React Native? Code Example
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…
How to create a pull to refresh loader in React Native? Code Example
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…
How to display modal with transparent overlay in React Native?
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…
How to create fade animation in modal in React Native? Code Example
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…
How to create slide from bottom Modal in React native? Code Example
“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…
How to show a basic modal in React native? Code Example
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…
How to prevent overlapping of keyboard with text input in React Native?
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…
How to set background image in React native? Code Example
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…
How to set a default image in React Native? Code Example
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…
How to show loader while image is downloading in React Native?
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…
How to blur an image in React Native? Code Example
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…
How to display a GIF or webp image in React Native? Code Example
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…
How to display base64 image in React Native? Code Example
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…
How to display image from storage in React Native? Code Example
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…
How to display image from url in React Native? Code Example
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…
How to divide list items in sections with headings in React Native?
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…
How to create infinite loading list in React Native? Code Example
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…
How to refresh a list by pulling down in React Native? Code Example
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.…
How to show list in reverse direction in React Native? Code Example
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…