Extends from react-native-community/hooks with few extra hooks (also remove some hooks)

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 @vokhuyet/native-hooks

Installation with yarn

yarn add @vokhuyet/native-hooks

API

• useAccessibilityInfo
• useAppState
• useBackHandler
• useDimensions
• useImageDimensions
• useKeyboard
• useInteractionManager
• useDeviceOrientation
• useForceUpdate
• useLayout
• useTextLayout

useAccessibilityInfo

import {useAccessibilityInfo} from '@vokhuyet/native-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 '@vokhuyet/native-hooks'

const currentAppState = useAppState()

useBackHandler

import {useBackHandler} from '@vokhuyet/native-hooks'

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

useDimensions

Gets dimensions and sets up a listener that will change the dimensions if the user changes device orientation.

import {useDimensions} from '@vokhuyet/native-hooks'

const dimensions = useDimensions()
// or
const {width, height} = useDimensions().window
// or
const screen = useDimensions().screen

useImageDimensions

import {useImageDimensions} from '@vokhuyet/native-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 '@vokhuyet/native-hooks'

const keyboard = useKeyboard()

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

useInteractionManager

import {useInteractionManager} from '@vokhuyet/native-hooks'

const interactionReady = useInteractionManager()

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

useDeviceOrientation

import {useDeviceOrientation} from '@vokhuyet/native-hooks'

const orientation = useDeviceOrientation()

console.log('is orientation portrait: ', orientation.portrait)
console.log('is orientation landscape: ', orientation.landscape)

useForceUpdate

import {useForceUpdate} from '@vokhuyet/native-hooks'

const forceUpdate = useForceUpdate()

const onPress = () => {
  //force update if need
  forceUpdate()
}

useLayout

import { useLayout } from '@vokhuyet/native-hooks'

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

console.log('layout: ', layout)

<View onLayout={onLayout} style={{width: 200, height: 200, marginTop: 30}} />

useTextLayout

import { useTextLayout } from '@vokhuyet/native-hooks'

const { onTextLayout, ...layout } = useTextLayout()

console.log('layout: ', layout)

<Text onLayout={onLayout} style={{width: 200, height: 200, marginTop: 30}} >Demo</Text>

Contributors ✨

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