100.1.0 • Published 8 months ago

@react-native-community/hooks v100.1.0

Weekly downloads
25,215
License
ISC
Repository
github
Last release
8 months ago

React Native Hooks

React Native Hooks

Version

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

This project follows the all-contributors specification. Contributions of any kind welcome!

@neur0base/app-sdk@gkasdorf/react-native-image-viewingreact-native-sdk-ui-test@infinitebrahmanuniverse/nolb-_react-n@everything-registry/sub-chunk-765tailwind-rntailwind-rn-webstorybook-componentsstorybook-compomanual-billing-system-miniappklarify-ui-componentsmbco-react-native-common-ui@wu_rong_tai/react-native-aliplayer@tg1518/react-native-txplayer@communi/chat-ui-react-nativetxradicalfaeriesgathering2022@bibletags/bibletags-react-native-app@bigbinary/neetoui-rn@boltss/react-native-hooksunicpeak-ui@nandorojo/dripsy@proximus/myproximus-design-system@piscale/chat-ui-react-native@paintbox/native@peersyst/react-native-components@ronas-it/react-native-starterminibilipaintboxreact-native-gpp-utilsscorpiousscorpious_kogoreact-native-huiguo-librnshellreact-native-aliplayerreact-native-aliplayer-breact-native-aliplayer-purereact-native-aliplayer-wureact-native-chatgptreact-native-ali-videoreact-native-ali-video-playerreact-native-basic-uireact-native-nj-aliplayerreact-native-mpod-videoreact-native-xm-aliplayernodjs-mobile-native-templatereellibrid-lightboxsharedtextreact-native-test-aliplayerreact-native-template-nativegoreact-native-txplayerccl-basefowler-chat-reactnativefoozard-mobile-components@shoppedance/player@teamturing/react-native-kit@svipwrap/react-native-ali-video-playerdu-track-orderdu-cart-microappegenie-mobile-common@jfkz/tailwind-rn@manishoo/rn-matrix-ui@andreciornavei/rn-essentials@appello/mobile-ui@fullstackcraft/react-native-keyboard-shift@htyf-mp/engines@ezri00/trackapp@drawone/jojo-cli@dropthought/react-native-ui@hongtangyun/react-native-mini-apps-engines@klutch-card/klutch-components@kafudev/react-native-core@kafudev/react-native-shell@kacgrzes/expo-template@misagamingvn/tea_pro@raydeck/usecolorscheme@raydeck/react-native-theme-provider
100.0.1

8 months ago

3.1.0

8 months ago

100.1.0

8 months ago

3.0.0

3 years ago

2.8.1

4 years ago

2.7.0

4 years ago

2.8.0

4 years ago

2.6.0

5 years ago

2.5.1

6 years ago

2.5.0

6 years ago

2.4.9

6 years ago

2.4.8

6 years ago

2.4.7

6 years ago

2.4.6

6 years ago

2.4.5

6 years ago

2.4.4

6 years ago

2.4.3

6 years ago

2.4.2

6 years ago

2.4.1

6 years ago

2.3.1

6 years ago

2.4.0

6 years ago

2.3.0

6 years ago

2.2.0

6 years ago

2.0.5

6 years ago

2.1.0

6 years ago

2.0.4

6 years ago

2.0.2

6 years ago

1.0.0

6 years ago

2.0.0

6 years ago

1.1.0

6 years ago