- Notifications
You must be signed in to change notification settings - Fork207
React Native APIs turned into React Hooks for use in functional React components
License
NotificationsYou must be signed in to change notification settings
react-native-community/hooks
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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
- useAppState
- useBackHandler
- useImageDimensions
- useKeyboard
- useInteractionManager
- useDeviceOrientation
- useLayout
- useRefresh
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()
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'constcurrentAppState=useAppState()
import{useBackHandler}from'@react-native-community/hooks'useBackHandler(()=>{if(shouldBeHandledHere){// handle itreturntrue}// let the default thing happenreturnfalse},[shouldBeHandledHere])
import{useImageDimensions}from'@react-native-community/hooks'constsource=require('./assets/yourImage.png')// orconstsource={uri:'https://your.image.URI'}const{dimensions, loading, error}=useImageDimensions(source)if(loading||error||!dimensions){returnnull}const{width, height, aspectRatio}=dimensions
import{useKeyboard}from'@react-native-community/hooks'constkeyboard=useKeyboard()console.log('keyboard isKeyboardShow: ',keyboard.keyboardShown)console.log('keyboard keyboardHeight: ',keyboard.keyboardHeight)
import{useInteractionManager}from'@react-native-community/hooks'constinteractionReady=useInteractionManager()console.log('interaction ready: ',interactionReady)
import{useDeviceOrientation}from'@react-native-community/hooks'constorientation=useDeviceOrientation()console.log('orientation is:',orientation)
import{useLayout}from'@react-native-community/hooks'const{ onLayout, ...layout}=useLayout()console.log('layout: ',layout)<ViewonLayout={onLayout}style={{width:200,height:200,marginTop:30}}/>
import{useRefresh}from'@react-native-community/hooks'constfetch=()=>{returnnewPromise((resolve)=>setTimeout(resolve,500))}const{isRefreshing, onRefresh}=useRefresh(fetch);<ScrollViewrefreshControl={<RefreshControlrefreshing={isRefreshing}onRefresh={onRefresh}/>}/>
We useChangesets for managing releases and versioning.
Thanks goes to these wonderful people (emoji key):
This project follows theall-contributors specification. Contributions of any kind welcome!
About
React Native APIs turned into React Hooks for use in functional React components
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published