Learn ReactJS & React Native With Me
  • Home
  • React Native Series
  • React Js
  • Write for us
  • Animal Welfare
  • About Me
  • Contact
  • Home
  • React Native Series
  • React Js
  • Write for us
  • Animal Welfare
  • About Me
  • Contact
  • Facebook
  • Twitter
  • LinkedIn
  • Email
Learn ReactJS & React Native With Me

Code, Bugs, Pitfalls, Tricks of React Js & React Native

  • Home
  • React Native Series
  • React Js
  • Write for us
  • Animal Welfare
  • About Me
  • Contact

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Posts navigation

Previous 1 2 3 … 29 Next

Learn ReactJS & React Native With Me
Copyright AkashMittal.com | Privacy Policy