Akash Mittal

579 posts

This is Akash Mittal, an overall computer scientist. He is in software development from more than 10 years and worked on technologies like ReactJS, React Native, Php, JS, Golang, Java, Android etc. Being a die hard animal lover is the only trait, he is proud of.

How to know if app is in foreground or background in React Native?

Akash Mittal
December 9, 2022

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…

How to get color scheme (dark/light) of mobile system in React Native?

Akash Mittal
December 9, 2022

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…

How to change light-dark theme of Alert dialog in React Native?

Akash Mittal
December 9, 2022

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…

How to create input field in Alert dialog in iOS React Native?

Akash Mittal
December 9, 2022

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…

How to cancel Alert dialog on clicking outside in Android React Native?

Akash Mittal
December 9, 2022

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.…

How to create a simple Alert dialog in React Native? Code Example

Akash Mittal
December 9, 2022

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…

How to hide sticky component on scroll down in ScrollView React Native?

Akash Mittal
December 9, 2022

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…

How to Stick component at footer in ScrollView in React Native?

Akash Mittal
December 9, 2022

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…

How to Stick multiple components to the top of ScrollView in React Native?

Akash Mittal
December 9, 2022

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…

How to Stick a single component at top of ScrollView in React Native?

Akash Mittal
December 9, 2022

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.…

How to create a simple ScrollView in React Native? Code Example

Akash Mittal
December 9, 2022

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…

How to create ripple on button press in React Native? Code Example

Akash Mittal
December 9, 2022

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…

How to use Pressable in React Native? Code Example

Akash Mittal
December 9, 2022

<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 –…

How to use TouchableOpacity in React Native? Code Example

Akash Mittal
December 9, 2022

<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…

How to use TouchableHighlight in React Native? Code Example

Akash Mittal
December 9, 2022

<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…

TouchableWithoutFeedback in React Native – Code Example

Akash Mittal
December 9, 2022

In this article we will cover the most important aspects of TouchableWithoutFeedback component. 1. It allows to raise click event for enclosed component. Like the onPress will be called when…

How to change underline color of text input in React Native?

Akash Mittal
December 9, 2022

Android adds an underline in input fields. If we are not styling the field and using the native styles only then we will see the underline, tapping on which will…

How to write from left, center or right side of input field in React Native?

Akash Mittal
December 9, 2022

There could be the use cases where you want the users to write from center of the input field; Like entering the OTP code. Similarly from right side too. To…

How to select whole text of input field when focused in React Native?

Akash Mittal
December 9, 2022

If you want to provide a functionality where user can easily copy the text of input field by focusing it, then you need to use selectTextOnFocus prop of TextInput. This…

How to change text selection color in input field in React Native?

Akash Mittal
December 9, 2022

We already discussed about how to change selection color of text in previous articles. Here we will see how to change the selection color of text in input field. In…