freddy03h / react-native-hooks

React Native APIs turned into React Hooks for use in functional React components

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-hooks

Installation with yarn

yarn add react-native-hooks

API

• useAccessibilityInfo
• useAppState
• useBackHandler
• useCameraRoll
• useClipboard
• useDimensions
• useKeyboard
• useInteractionManager
• useDeviceOrientation
• useLayout

useAccessibilityInfo

import { useAccessibilityInfo } from 'react-native-hooks'

const isScreenReaderEnabled = 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-hooks'

const currentAppState = useAppState()

useBackHandler

import { useBackHandler } from 'react-native-hooks'

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

useCameraRoll

import { useCameraRoll } from 'react-native-hooks'

const [photos, getPhotos, saveToCameraRoll] = useCameraRoll()

{
  photos.map((photo, index) => /* render photos */)
}

<Button title='Get Photos' onPress={() => getPhotos()}>Get Photos</Button>

useClipboard

import { useClipboard } from 'react-native-hooks'

const [data, setString] = useClipboard()

<Text>{data}</Text>

<Button title='Update Clipboard' onPress={() => setString('new clipboard data')}>Set Clipboard</Button>

useDimensions

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

import { useDimensions } from 'react-native-hooks'

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

useKeyboard

import { useKeyboard } from 'react-native-hooks'

const keyboard = useKeyboard()

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

useInteractionManager

import { useInteractionManager } from 'react-native-hooks'

const interactionReady = useInteractionManager()

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

useDeviceOrientation

import { useDeviceOrientation } from 'react-native-hooks'

const orientation = useDeviceOrientation()

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

useLayout

import { useLayout } from 'react-native-hooks'

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

console.log('layout: ', layout)

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