React Native Hooks For Your App

Photo by Rodion Kutsaev on Unsplash

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)

2. useDimensions Hook

import { useDimensions } from '@react-native-community/hooks'
const { width, height } = useDimensions().window
// or
const screen = useDimensions().screen
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()

4. useColorScheme Hook

import {Text, useColorScheme} from 'react-native';
const colorScheme = useColorScheme();

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)




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adhithi Ravichandran

Software Consultant, Author, Speaker, React Native|React|GraphQL|Cypress Dev & Indian Classical Musician