React Native APIs turned into React Hooks for use in functional React components
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
npm install @react-native-community/hooks
Installation with yarn
yarn add @react-native-community/hooks
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
})
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}
/>
}
/>
We use auto for automatic releases, an awesome tool by an awesome dude!
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!