@react-native-community/hooks

!React Native Hooks

React Native Hooks

[![Version][version-badge]][package]

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

$3

``sh
npm install @react-native-community/hooks
`

Installation with yarn

`sh
yarn add @react-native-community/hooks
`

API

- useAccessibilityInfo
- useAppState
- useBackHandler
- useImageDimensions
- useKeyboard
- useInteractionManager
- useDeviceOrientation
- useLayout
- useRefresh

$3

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

$3

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

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

const currentAppState = useAppState()
`

$3

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

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

$3

`js
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
`

$3

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

const keyboard = useKeyboard()

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

$3

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

const interactionReady = useInteractionManager()

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

$3

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

const orientation = useDeviceOrientation()

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

$3

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

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

console.log('layout: ', layout)


`

$3

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

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

const {isRefreshing, onRefresh} = useRefresh(fetch)

; refreshControl={

}
/>
``

[version-badge]: https://img.shields.io/npm/v/@react-native-community/hooks.svg?style=flat-square
[package]: https://www.npmjs.com/package/@react-native-community/hooks

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!