React Native Hooks

React Native APIs turned into React Hooks allowing you to access asynchronous APIs directly in your functional components.

Note: This is an experimental library. As of this time React Native does not yet support React version 16.7 out of the box.

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)