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

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

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

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

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

πŸ“– πŸ’»

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 96.7%
  • JavaScript 3.3%