React Native Hooks For Your App

Photo by Rodion Kutsaev on Unsplash

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

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

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().screen

useWindowDimensions Usage

import {useWindowDimensions} from 'react-native';
const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;

3. useAppState Hook

import { useAppState } from '@react-native-community/hooks'
const currentAppState = useAppState()

The app state returned can be inactive, active or background.

4. useColorScheme Hook

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

import { useAccessibilityInfo } from '@react-native-community/hooks'
const { reduceMotionEnabled, screenReaderEnabled } = useAccessibilityInfo()

6. useDeviceOrientation Hook

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

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.

Checkout my course React Native: The Big Picture on Pluralsight, if you are interested to learn React Native.

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.

Software Consultant, Author, Speaker, React Native|React|GraphQL Dev & Indian Classical Musician http://adhithiravichandran.com/