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
Permalink
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
README.md 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

README.md

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

API

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)