React Native APIs turned into React Hooks for use in functional React components
Branch: master
Clone or download
dabit3 Merge pull request #8 from jozn/master
Change readme: add `Installation` word
Latest commit cd2e45b Feb 9, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib update to use useState as import Oct 30, 2018
.gitignore updated to remove node_modules Oct 30, 2018 change readme: add `Installation` word Feb 9, 2019
index.js added device orientation Oct 30, 2018
package.json version bump Oct 30, 2018
reactnativehooks.jpg updated image Oct 29, 2018
yarn.lock initial commit Oct 27, 2018

React Native Hooks

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



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

const isScreenReaderEnabled = useAccessibilityInfo()


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

const currentAppState = useAppState()


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

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

{, index) => /* render photos */)

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


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

const [data, setString] = useClipboard()


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


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

const dimensions = useDimensions()


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

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

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


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

const netInfo = useNetInfo()

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


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

const keyboard = useKeyboard()

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


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

const interactionReady = useInteractionManager()

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


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

const orientation = useDeviceOrientation()

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