Miss any of our Open RFC calls?Watch the recordings here! »

This package has been deprecated

Author message:

Please use @react-native-community/hooks going forward

react-native-hooks

0.9.0 • Public • Published

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: You must use React Native >= 0.59.0

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

AppState will change between one of 'active', 'background', or (iOS) 'inactive' when the app is closed or put into the background.

import { useAppState } from 'react-native-hooks'
 
const currentAppState = useAppState()

useBackHandler

import { useBackHandler } from 'react-native-hooks'
 
useBackHandler(() => {
  if (shouldBeHandledHere) {
    // handle it
    return true
  }
  // let the default thing happen
  return false
})

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

Gets dimensions and sets up a listener that will change the dimensions if the user changes device orientation.

import { useDimensions } from 'react-native-hooks'
 
const dimensions = useDimensions()
// or
const { width, height } = useDimensions().window
// or
const screen = useDimensions().screen

useKeyboard

import { useKeyboard } from 'react-native-hooks'
 
const keyboard = useKeyboard()
 
console.log('keyboard isKeyboardShow: ', keyboard.isKeyboardShow)
console.log('keyboard keyboardHeight: ', keyboard.keyboardHeight)

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)

useLayout

import { useLayout } from 'react-native-hooks'
 
const { onLayout, ...layout } = useLayout()
 
console.log('layout: ', layout)
 
<View onLayout={onLayout} style={{width: 200, height: 200, marginTop: 30}} />

Keywords

none

Install

npm i react-native-hooks

DownloadsWeekly Downloads

2,247

Version

0.9.0

License

ISC

Unpacked Size

124 kB

Total Files

15

Last publish

Collaborators

  • avatar