React Native Hooks For Your App
Hooks work the same way in React Native as it does in React. And React Native can use all of the React Hooks like useState, useEffect, useContext, etc. that are listed in React Hooks documentation.
In this post, we are going to go over, in specific the hooks built for React Native. Most of these are part of the react-native-community repo and some are available out of the box with React Native.
1. useKeyboard Hook
This is a very useful hook if your application contains TextInput components and forms, with the keyboard popping up often. Without this hook, we would need to use Keyboard event listeners to know when the keyboard is shown or hidden. This is now simplified with the useKeyboard hook.
import { useKeyboard } from '@react-native-community/hooks'
const keyboard = useKeyboard()console.log('keyboard isKeyboardShow: ', keyboard.keyboardShown)
console.log('keyboard keyboardHeight: ', keyboard.keyboardHeight)
console.log('keyboard coordinates: ', keyboard. coordinates)
With this hook, you can now get the boolean value of whether the keyboard is shown, height of they keyboard and its coordinates as well. You don’t have to do any manual calculations or event listeners to handle keyboard being displayed and hidden. Neat! I find this hook to be of the most use to me in React Native.
2. useDimensions Hook
The next super useful hook, that you are guaranteed to benefit from, is the useDimensions hook. Before hooks, we used the Dimensions API that comes with React Native to get the height and width of the device.
With the useDimensions hook, it has a listener that will change the dimensions if the device orientation changes at any point. The same can also be achieved by the useWindowDimensions hook that comes with the React Native API. You can use either one of them (one from the community repo, and the other out of the box with React Native)
useDimensions Usage
import { useDimensions } from '@react-native-community/hooks'
const { width, height } = useDimensions().window
// or
const screen = useDimensions().screenuseWindowDimensions Usage
import {useWindowDimensions} from 'react-native';
const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;3. useAppState Hook
This is another one that comes in handy to determine if the app is in an active state or if the user has it running in background. Before this hook, we would use the AppState API from react-native and add event listeners to know if the app is active or not. This hook does that for you now.
import { useAppState } from '@react-native-community/hooks'
const currentAppState = useAppState()The app state returned can be inactive, active or background.
4. useColorScheme Hook
The useColorScheme hook provides the color scheme updates from the Appearance API. The Appearance API provides information about the user’s preferences on color scheme (light or dark). This hook obtains the information, and also updates when the color scheme changes on the user’s phone.
This could either happen when the user’s phone switches mode during a certain time in the day or manually changes the setting.
import {Text, useColorScheme} from 'react-native';
const colorScheme = useColorScheme();The color scheme returned can be light or dark. I have personally not used the color scheme hook, but it maybe useful if your application needs to change based on the color scheme on the user’s phone. This hook comes out of the box with React Native.
5. useAccessibilityInfo Hook
This is another useful hook, if you would like to capture the accessibility information for the device. This can determine if the device has a screenreader and also gets updated when the state of the screen reader changes. It also gets updates on whether reduce motion is enabled. This hook uses the AccessibilityInfo API and adds event listeners to subscribe for updates. By using the hook you can automatically get these updates. Saving you the time and code!
import { useAccessibilityInfo } from '@react-native-community/hooks'
const { reduceMotionEnabled, screenReaderEnabled } = useAccessibilityInfo()6. useDeviceOrientation Hook
Another cool hook that uses the Dimensions API and determines the device orientation. The device orientation can be either portrait or landscape. When the orientation changes, the hook updates the value. No more event listeners again!
import { useDeviceOrientation } from '@react-native-community/hooks'const orientation = useDeviceOrientation()console.log('is orientation portrait: ', orientation.portrait)
console.log('is orientation landscape: ', orientation.landscape)
Conclusion
This post was originally posted on https://programmingwithmosh.com/
I hope you enjoyed this post on React Native hooks that you can start using right away. Make sure to checkout the https://github.com/react-native-community/hooks for some additional hooks.
I am Adhithi Ravichandran an Author, Speaker, and founder of Surya Consulting, Inc.
Through my Pluralsight courses, I have taught over 75,000 students topics such as React Native, GraphQL, and Cypress.
Link to my courses:
https://app.pluralsight.com/profile/author/adhithi-ravichandran
I hope you enjoyed this article. See you again with more articles. If you liked this post, don’t forget to share it with your network. You can follow me on twitter @AdhithiRavi for more updates or if you have any questions.
