@react-native-community/hooks

Install the hooks library using npm or yarn. Note that you must use React Native version 0.59.0 or newer.

npm install @react-native-community/hooks

yarn add @react-native-community/hooks

The following interfaces define the data structures used by the useImageDimensions hook.

export interface URISource {
	uri: string
}

export type ImageDimensionsSource = ImageRequireSource | URISource

export interface ImageDimensions {
	width: number
	height: number
	aspectRatio: number
}

export interface ImageDimensionsResult {
	dimensions?: ImageDimensions
	error?: Error
	loading: boolean
}

Access accessibility settings from the device.

Note: reduceMotionEnabled, grayscaleEnabled, invertColorsEnabled, and reduceTransparencyEnabled require React Native 0.60 or newer.

import {useAccessibilityInfo} from '@react-native-community/hooks'

const {
  boldTextEnabled,
  screenReaderEnabled,
  reduceMotionEnabled, // requires RN60 or newer
  grayscaleEnabled, // requires RN60 or newer
  invertColorsEnabled, // requires RN60 or newer
  reduceTransparencyEnabled, // requires RN60 or newer
} = useAccessibilityInfo()

Monitor the current application state. The state will change between 'active', 'background', or (on iOS) 'inactive' when the app is closed or moved to the background.

import {useAppState} from '@react-native-community/hooks'

const currentAppState = useAppState()

Retrieve the current device orientation.

import {useDeviceOrientation} from '@react-native-community/hooks'

const orientation = useDeviceOrientation()

console.log('orientation is:', orientation)

Access information about the keyboard state, including whether it is currently visible and its current height.

import {useKeyboard} from '@react-native-community/hooks'

const keyboard = useKeyboard()

console.log('keyboard isKeyboardShow: ', keyboard.keyboardShown)
console.log('keyboard keyboardHeight: ', keyboard.keyboardHeight)

Monitor when the InteractionManager has finished all scheduled interactions.

import {useInteractionManager} from '@react-native-community/hooks'

const interactionReady = useInteractionManager()

console.log('interaction ready: ', interactionReady)

Retrieve the dimensions of an image source. Accepts a local required asset or an object with a uri.

The hook returns an object containing dimensions (with width, height, and aspectRatio), loading (boolean), and error (boolean/error object).

import {useImageDimensions} from '@react-native-community/hooks'

const source = require('./assets/yourImage.png')
// or
const source = {uri: 'https://your.image.URI'}

const {dimensions, loading, error} = useImageDimensions(source)

if (loading || error || !dimensions) {
  return null
}
const {width, height, aspectRatio} = dimensions

Implement pull-to-refresh functionality in a ScrollView. Pass an asynchronous function (returning a Promise) to the hook. It returns isRefreshing (boolean) and onRefresh (callback).

import {useRefresh} from '@react-native-community/hooks'

const fetch = () => {
  return new Promise((resolve) => setTimeout(resolve, 500))
}

const {isRefreshing, onRefresh} = useRefresh(fetch)

;<ScrollView
  refreshControl={
    <RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />
  }
/>

Handle the hardware back button press. The handler function should return true to consume the event or false to allow the default behavior.

import {useBackHandler} from '@react-native-community/hooks'

useBackHandler(() => {
  if (shouldBeHandledHere) {
    // handle it
    return true
  }
  // let the default thing happen
  return false
},[shouldBeHandledHere])

Provides an onLayout callback and the resulting layout object for a component.

import { useLayout } from '@react-native-community/hooks'

const { onLayout, ...layout } = useLayout()

console.log('layout: ', layout)

<View onLayout={onLayout} style={{width: 200, height: 200, marginTop: 30}} />