react-native-short

There are situations when we want our statusbar to look according to the theme of the app. It also depends on type of application. For example, a kids app needs…

React Native provides StatusBar component which has a constant currentHeight. This constant provides the status bar + notch height. It works in Android apps. You need to import the StatusBar…

In the previous article we saw how we can add title under refresh loader. In this article we will see how we can change it’s color. Since title can be…

iOS supports displaying title under pull to refresh loader. This functionality is not available in Android app. To add a title under refresh loader in React Native, we are provided…

Changing background color of pull to refresh loader in React Native is possible through progressBackgroundColor prop of RefreshControl component. This prop only works for Android app because the loader background…

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…