react-native-community/hooks

react-native-community/hooks has 3,622 GitHub stars and 200 forks. GitHot measured -1 stars in 24 hours and -2 in 7 days. Last checked 2026-11-11 06:13 UTC. Last push 2026-10-28.

이 수치를 측정하는 방법

React Native APIs turned into React Hooks for use in functional React components

3,622 스타 200 forks

측정된 스타 증가

in 24h: -1
in 7 days: -2
in 15 days: 업데이트 지연
in 1 month: 업데이트 지연

서로 겹치는 기간의 순증가량이며 일별 합계가 아닙니다. 측정값이 없으면 비워 둡니다. 스타는 관심도를 나타내며 품질을 보장하지 않습니다.

README.md

Original

React Native Hooks

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

Thanks

We use Changesets for managing releases and versioning.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Pavlos Vinieratos} 💻 🎨 📖 🚇 🚧 ⚠️	_Melih 💻 📖 🚇 ⚠️	_{Jesse Katsumata} 💻 📖 🚧 ⚠️	_{abhishek gupta} 🐛	_Zeljko 💻	_{Linus Unnebäck} 💻 🚇 📖 ⚠️	_{Tony Xiao} 💻
_{Ronaldo Lima} 💻	_{Marius Reimer} 💻	_{Nishith Patel} 💻	_jozn 📖	_{Andrew Lisowski} 🚇 📦 🔧 💻 📖	_{faraz ahmad} 📖	_{Nader Dabit} 🤔
_{Dani Akash} 💻	_{Dylan Vann} 💻	_{Tihomir Valkanov} 📖	_{Pierre Skowron} 💻	_{Gamal Shaban} 💻 📖 ⚠️	_Greg-Bush 📖 💻 ⚠️ 🚇	_{Alan Kenyon} 📖 💻
_{Thibault Maekelbergh} ⚠️ 💻	_{Gertjan Reynaert} ⚠️ 💻	_{David NRB} ⚠️ 💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!