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

<table> <tr> <td align="center"><a href="http://pavlos.dev"><img src="https://avatars2.githubusercontent.com/u/100233?v=4?s=100" width="100px;" alt=""/> Pavlos Vinieratos</a> <a href="https://github.com/react-native-community/hooks/commits?author=pvinis" title="Code">💻</a> <a href="#design-pvinis" title="Design">🎨</a> <a href="https://github.com/react-native-community/hooks/commits?author=pvinis" title="Documentation">📖</a> <a href="#infra-pvinis" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-pvinis" title="Maintenance">🚧</a> <a href="https://github.com/react-native-community/hooks/commits?author=pvinis" title="Tests">⚠️</a></td> <td align="center"><a href="https://github.com/melihberberolu"><img src="https://avatars3.githubusercontent.com/u/3721734?v=4?s=100" width="100px;" alt=""/> Melih</a> <a href="https://github.com/react-native-community/hooks/commits?author=melihberberolu" title="Code">💻</a> <a href="https://github.com/react-native-community/hooks/commits?author=melihberberolu" title="Documentation">📖</a> <a href="#infra-melihberberolu" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/react-native-community/hooks/commits?author=melihberberolu" title="Tests">⚠️</a></td> <td align="center"><a href="https://naturalclar.dev"><img src="https://avatars1.githubusercontent.com/u/6936373?v=4?s=100" width="100px;" alt=""/> Jesse Katsumata</a> <a href="https://github.com/react-native-community/hooks/commits?author=Naturalclar" title="Code">💻</a> <a href="https://github.com/react-native-community/hooks/commits?author=Naturalclar" title="Documentation">📖</a> <a href="#maintenance-Naturalclar" title="Maintenance">🚧</a> <a href="https://github.com/react-native-community/hooks/commits?author=Naturalclar" title="Tests">⚠️</a></td> <td align="center"><a href="https://twitter.com/webtaculars"><img src="https://avatars0.githubusercontent.com/u/11532969?v=4?s=100" width="100px;" alt=""/> abhishek gupta</a> <a href="https://github.com/react-native-community/hooks/issues?q=author%3Awebtaculars" title="Bug reports">🐛</a></td> <td align="center"><a href="http://www.linkedin.com/in/zeljko-markovic-19266344"><img src="https://avatars3.githubusercontent.com/u/2046481?v=4?s=100" width="100px;" alt=""/> Zeljko</a> <a href="https://github.com/react-native-community/hooks/commits?author=zeljkoX" title="Code">💻</a></td> <td align="center"><a href="http://linus.unnebäck.se/"><img src="https://avatars0.githubusercontent.com/u/189580?v=4?s=100" width="100px;" alt=""/> Linus Unnebäck</a> <a href="https://github.com/react-native-community/hooks/commits?author=LinusU" title="Code">💻</a> <a href="#infra-LinusU" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/react-native-community/hooks/commits?author=LinusU" title="Documentation">📖</a> <a href="https://github.com/react-native-community/hooks/commits?author=LinusU" title="Tests">⚠️</a></td> <td align="center"><a href="http://stackoverflow.com/users/692499/tony"><img src="https://avatars1.githubusercontent.com/u/696842?v=4?s=100" width="100px;" alt=""/> Tony Xiao</a> <a href="https://github.com/react-native-community/hooks/commits?author=tonyxiao" title="Code">💻</a></td> </tr> <tr> <td align="center"><a href="https://github.com/ronal2do"><img src="https://avatars3.githubusercontent.com/u/4389565?v=4?s=100" width="100px;" alt=""/> Ronaldo Lima</a> <a href="https://github.com/react-native-community/hooks/commits?author=ronal2do" title="Code">💻</a></td> <td align="center"><a href="https://mariusreimer.com"><img src="https://avatars3.githubusercontent.com/u/15148377?v=4?s=100" width="100px;" alt=""/> Marius Reimer</a> <a href="https://github.com/react-native-community/hooks/commits?author=reime005" title="Code">💻</a></td> <td align="center"><a href="https://github.com/pnishith"><img src="https://avatars1.githubusercontent.com/u/24517032?v=4?s=100" width="100px;" alt=""/> Nishith Patel</a> <a href="https://github.com/react-native-community/hooks/commits?author=pnishith" title="Code">💻</a></td> <td align="center"><a href="https://github.com/jozn"><img src="https://avatars2.githubusercontent.com/u/3476299?v=4?s=100" width="100px;" alt=""/> jozn</a> <a href="https://github.com/react-native-community/hooks/commits?author=jozn" title="Documentation">📖</a></td> <td align="center"><a href="http://hipstersmoothie.com"><img src="https://avatars3.githubusercontent.com/u/1192452?v=4?s=100" width="100px;" alt=""/> Andrew Lisowski</a> <a href="#infra-hipstersmoothie" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#platform-hipstersmoothie" title="Packaging/porting to new platform">📦</a> <a href="#tool-hipstersmoothie" title="Tools">🔧</a> <a href="https://github.com/react-native-community/hooks/commits?author=hipstersmoothie" title="Code">💻</a> <a href="https://github.com/react-native-community/hooks/commits?author=hipstersmoothie" title="Documentation">📖</a></td> <td align="center"><a href="https://linkedin.com/in/farazamiruddin"><img src="https://avatars2.githubusercontent.com/u/6789822?v=4?s=100" width="100px;" alt=""/> faraz ahmad</a> <a href="https://github.com/react-native-community/hooks/commits?author=faahmad" title="Documentation">📖</a></td> <td align="center"><a href

Hooks

Install / Use

README