Giter VIP home page Giter VIP logo

hooks's Introduction

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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.