Skip to content

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

License

Notifications You must be signed in to change notification settings

react-native-community/hooks

Repository files navigation

React Native Hooks

React Native Hooks

Version

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

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!