Sharing is caring!

React Native APIs turned into React Hooks for use in functional React components

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"> getPhotos()}&gt;Get Photos</button>

useClipboard

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

const [data, setString] = useClipboard()

{data}

<button title="Update Clipboard"> setString('new clipboard data')}&gt;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)

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.