React-Native

React native provides Keyboard API which is used to handle keyboards in mobile phones. In order to hide the keyboard, we can use dismiss() function of this API. To hide…

React native provides Dimensions API and useWindowDimensions() hook to get width & height size of Mobile Screen and Window, in React Native. With this, you can calculate the dimensions of…

To create a toast in React Native, we can use ToastAndroid api which provides 3 methods – show(message, duration) message – The text message to display in toast. duration –…

React Native provides AppState module which gives information regarding the state of an application. We can know whether app is in foreground or background. This module provides a property currentState…

To get system preferred color scheme in Android and iOS, we can use Appearance module of React Native. But the question is, where it is used? Actually if you are…

React Native Alert api provides userInterfaceStyle property of optional object that we pass as 4th parameter in alert() function and 7th parameter in prompt() function. We can use it like…

React Native provides prompt() function to create input field in the dialog. You can provide title, message, buttons, callback function, default input value, keyboard type etc. This functionality is specific…

Alert dialog in android supports extra options object in 4th parameter. To enable cancelling of dialog on clicking outside in React Native Android apps, we need to set cancelable: true.…

An alert dialog can be created using <Alert> component in React Native. It can show a title, message and buttons. Title is required and everything else is optional. The format…

If you want to hide sticky element on scrolling the list down and show the element when scrolling up, then use stickyHeaderHiddenOnScroll=true prop in ScrollView. It works in this way…

In the previous articles, we saw how we can stick elements to the header of the scrollview. Here we will see how to stick to the footer. We will require…

In the last article we saw how to stick single element to the top of scrollview. In this one we will see how to extend that functionality and support multiple…

React Native ScrollView provides stickyHeaderIndices prop which is used to stick components at the top. This prop accepts an array of indices of children components of ScrollView, starting from 0.…

In React native, a scrollview can be created using <ScrollView> component. Below are some of it’s properties – 1. It creates scrolling view which helps in displaying the components away…

Creating a ripple effect in React Native is possible through android_ripple prop of Pressable component. It accepts a configuration object which defines the properties of ripples. The object looks like…

<Pressable> is the core component to record different stages of press events. React Native recommends using this in place of TouchableHighlight, TouchableWithoutFeedback and TouchableOpacity. Let’s see how pressable works –…

<TouchableOpacity> is a wrapper component which enables the press event for child component. Unlike TouchableHighlight, it only decreases the opacity of view as a visual feedback, when pressed. Some of…

<TouchableHighlight> is used to create a wrapper over a component which can generate click events. It is different from TouchableWithoutFeedback in the sense that it can provide a visual change…