GitHub - react-native-community/hooks: React Native APIs turned into React Hooks for use in functional React components

react-native-community/hooks

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 682 Commits
.changeset		.changeset
.github		.github
src		src
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
bun.lock		bun.lock
eslint.config.mjs		eslint.config.mjs
jest.config.js		jest.config.js
jest.setup.js		jest.setup.js
mise.toml		mise.toml
package.json		package.json
prettier.config.js		prettier.config.js
reactnativehooks.jpg		reactnativehooks.jpg
renovate.json		renovate.json
tea.yaml		tea.yaml
tsconfig.json		tsconfig.json

Repository files navigation

React Native Hooks

Version

React Native APIs turned into React Hooks allowing you to access asynchronous APIs directly in your functional components.

Note: You must use React Native >= 0.59.0

Installation with npm

npm install @react-native-community/hooks

Installation with yarn

yarn add @react-native-community/hooks

API

`useAccessibilityInfo`

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

`useAppState`

AppState will change between one of 'active', 'background', or (iOS) 'inactive' when the app is closed or put into the background.

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

`useBackHandler`

import {useBackHandler} from '@react-native-community/hooks'
useBackHandler(() => {
 if (shouldBeHandledHere) {
 // handle it
 return true
 }
 // let the default thing happen
 return false
},[shouldBeHandledHere])

`useImageDimensions`

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

`useKeyboard`

import {useKeyboard} from '@react-native-community/hooks'
const keyboard = useKeyboard()
console.log('keyboard isKeyboardShow: ', keyboard.keyboardShown)
console.log('keyboard keyboardHeight: ', keyboard.keyboardHeight)

`useInteractionManager`

import {useInteractionManager} from '@react-native-community/hooks'
const interactionReady = useInteractionManager()
console.log('interaction ready: ', interactionReady)

`useDeviceOrientation`

import {useDeviceOrientation} from '@react-native-community/hooks'
const orientation = useDeviceOrientation()
console.log('orientation is:', orientation)

`useLayout`

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}} />

`useRefresh`

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} />
 }
/>