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

To get started with hooks in React Native right away, follow the instructions on this thread.

Installation with npm

npm install react-native-hooks

Installation with yarn

yarn add react-native-hooks

API

• useAccessibilityInfo
• useAppState
• useCameraRoll
• useClipboard
• useDimensions
• useGeolocation
• useNetInfo
• useKeyboard
• useInteractionManager
• useDeviceOrientation

useAccessibilityInfo

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

const isScreenReaderEnabled = useAccessibilityInfo()

useAppState

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

const currentAppState = useAppState()

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

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

const dimensions = useDimensions()

useGeolocation

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

const [position, stopObserving, setRNConfiguration] = useGeolocation()

console.log('latitude: ', position.coords.latitude)

useNetInfo

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

const netInfo = useNetInfo()

console.log('netInfo type: ', netInfo.type)

useKeyboard

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

const keyboard = useKeyboard()

console.log('keyboard show: ', keyboard.show)
console.log('keyboard height: ', keyboard.height)

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)