@vokhuyet/native-hooks

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

$3

``sh
npm install @vokhuyet/native-hooks
`

Installation with yarn

`sh
yarn add @vokhuyet/native-hooks
`

API

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

$3

`js
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()
`

$3

AppState will change between one of 'active', 'background', or (iOS) 'inactive' when the app is closed or put into the background.

`js
import {useAppState} from '@vokhuyet/native-hooks'

const currentAppState = useAppState()
`

$3

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

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

$3

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

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

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

$3

`js
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
`

$3

`js
import {useKeyboard} from '@vokhuyet/native-hooks'

const keyboard = useKeyboard()

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

$3

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

const interactionReady = useInteractionManager()

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

$3

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

const orientation = useDeviceOrientation()

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

$3

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

const forceUpdate = useForceUpdate()

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

$3

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

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

console.log('layout: ', layout)


`

$3

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

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

console.log('layout: ', layout)

Demo
``

[package]: https://www.npmjs.com/package/@vokhuyet/native-hooks

Contributors ✨

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