README.md

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-community/hooks

Installation with yarn

yarn add @react-native-community/hooks

API

• useAccessibilityInfo
• useAppState
• useBackHandler
• useCameraRoll
• useClipboard
• useDimensions
• useKeyboard
• useInteractionManager
• useDeviceOrientation
• useLayout
• useAnimatedValue

useAccessibilityInfo

import { useAccessibilityInfo } from '@react-native-community/hooks'

const { reduceMotionEnabled, screenReaderEnabled } = 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-community/hooks'

const currentAppState = useAppState()

useBackHandler

import { useBackHandler } from '@react-native-community/hooks'

useBackHandler(() => {
  if (shouldBeHandledHere) {
    // handle it
    return true
  }
  // let the default thing happen
  return false
})

useCameraRoll

import { useCameraRoll } from '@react-native-community/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-community/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-community/hooks'

const dimensions = useDimensions()
// or
const { width, height } = useDimensions().window
// or
const screen = useDimensions().screen

useKeyboard

import { useKeyboard } from '@react-native-community/hooks'

const keyboard = useKeyboard()

console.log('keyboard isKeyboardShow: ', keyboard.keyboardShown)
console.log('keyboard keyboardHeight: ', keyboard.keyboardHeight)
console.log('keyboard animatedKeyboardHeight: ', keyboard.animatedKeyboardHeight)

<Animated.View style={{height: keyboard.animatedKeyboardHeight}} />

useInteractionManager

import { useInteractionManager } from '@react-native-community/hooks'

const interactionReady = useInteractionManager()

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

useDeviceOrientation

import { useDeviceOrientation } from '@react-native-community/hooks'

const orientation = useDeviceOrientation()

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

useLayout

import { useLayout } from '@react-native-community/hooks'

const { onLayout, ...layout } = useLayout()

console.log('layout: ', layout)

<View onLayout={onLayout} style={{width: 200, height: 200, marginTop: 30}} />

useAnimatedValue

import { useAnimatedValue } from '@react-native-community/hooks'

const animatedValue = useAnimatedValue(0)

useEffect(() => {
  Animated.timing(animatedKeyboardHeight, {
    duration: 250,
    toValue: 200,
  }).start()
}, [])

console.log('value: ', animatedValue)

<Animated.View onLayout={onLayout} style={{width: 200, height: animatedValue, marginTop: 30}} />

Thanks

We use auto for automatic releases, an awesome tool by an awesome dude!

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Pavlos Vinieratos 💻 🎨 📖 🚇 🚧 ⚠️	Melih 💻 📖 🚇 ⚠️	Jesse Katsumata 💻 📖 🚧 ⚠️	abhishek gupta 🐛	Zeljko 💻	Linus Unnebäck 💻 🚇	Tony Xiao 💻
Ronaldo Lima 💻	Marius Reimer 💻	Nishith Patel 💻	jozn 📖	Andrew Lisowski 🚇 📦 🔧 💻 📖	faraz ahmad 📖	Nader Dabit 🤔
Dani Akash 💻	Dylan Vann 💻	Tihomir Valkanov 📖	Pierre Skowron 💻	Gamal Shaban 💻

This project follows the all-contributors specification. Contributions of any kind welcome!