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

Browsing Tag

react-native-short

119 posts

How to customize material design theme in React Native using Paper?

  • Akash Mittal
  • December 9, 2022
React-native-paper provides a default theme which is used automatically. But if you want to customize that, then you need to provide theme prop in <provider> component. This prop holds the…
View Post

How to install react-native-paper library in react native project?

  • Akash Mittal
  • December 9, 2022
React-native-paper is a community package which is used to add material design theme in mobile apps. It works in both Android and iOS applications. In this article we will see…
View Post

How to hide the keyboard programmatically in React Native?

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to get mobile width & height dimensions in React Native?

  • Akash Mittal
  • December 9, 2022
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…
View Post

How to create a toast in React Native? Code Example

  • Akash Mittal
  • December 9, 2022
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 –…
View Post

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

Posts navigation

1 2 … 6 Next

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