react-native-community
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/hooksInstallation with yarn
yarn add @react-native-community/hooksAPI
- useAccessibilityInfo
- useAppState
- useBackHandler
- useImageDimensions
- useKeyboard
- useInteractionManager
- useDeviceOrientation
- useLayout
- useRefresh
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} = dimensionsuseKeyboard
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):
This project follows the all-contributors specification. Contributions of any kind welcome!