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)