react-native-community/hooks

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: 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
• useImageDimensions
• useKeyboard
• useInteractionManager
• useDeviceOrientation
• useLayout
• useRefresh

useAccessibilityInfo

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

const {
  boldTextEnabled,
  screenReaderEnabled,
  reduceMotionEnabled, // requires RN60 or newer
  grayscaleEnabled, // requires RN60 or newer
  invertColorsEnabled, // requires RN60 or newer
  reduceTransparencyEnabled, // requires RN60 or newer
} = 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
})

useImageDimensions

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

const source = require('./assets/yourImage.png')
// or
const source = {uri: 'https://your.image.URI'}

const {dimensions, loading, error} = useImageDimensions(source)

if (loading || error || !dimensions) {
  return null
}
const {width, height, aspectRatio} = dimensions

useKeyboard

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

const keyboard = useKeyboard()

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

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('orientation is:', orientation)

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}} />

useRefresh

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

const fetch = () => {
    return new Promise((resolve) => setTimeout(resolve, 500))
}

const { isRefreshing, onRefresh } = useRefresh(fetch);

<ScrollView 
  refreshControl= {
    <RefreshControl
      refreshing={isRefreshing}
      onRefresh={onRefresh}
    />
  }
/>

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 💻 📖 ⚠️	Greg-Bush 📖 💻 ⚠️ 🚇	Alan Kenyon 📖 💻
Thibault Maekelbergh ⚠️ 💻	Gertjan Reynaert ⚠️ 💻	David NRB ⚠️ 💻 📖

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