• Stars
    star
    3,451
  • Rank 12,934 (Top 0.3 %)
  • Language
    TypeScript
  • License
    ISC License
  • Created about 6 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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!

More Repositories

1

upgrade-helper

βš›οΈ A web tool to support React Native developers in upgrading their apps.
TypeScript
3,628
star
2

cli

The React Native Community CLI - command line tools to help you build RN apps
TypeScript
2,374
star
3

react-native-template-typescript

πŸ‘Ύ Clean and minimalist React Native template for a quick start with TypeScript.
Java
1,858
star
4

discussions-and-proposals

Discussions and proposals related to the main React Native project
1,684
star
5

releases

React Native releases
JavaScript
1,501
star
6

rn-diff-purge

Easier React Native upgrades by clearly exposing changes from a version to another. πŸš€ And what better way than to purge, init, then diff? Spoiler: there's no better way. 😎
Shell
1,266
star
7

jsc-android-buildscripts

Script for building JavaScriptCore for Android (for React Native but not only)
JavaScript
1,056
star
8

directory

A searchable and filterable directory of React Native libraries.
TypeScript
1,003
star
9

docker-android

Android Docker Image for React Native and common android development.
Dockerfile
473
star
10

RNNewArchitectureLibraries

A collection of sample React Native Libraries that will show you how to use the New Architecture (Fabric & TurboModules) step-by-step.
322
star
11

upgrade-support

A central community-backed place to request and give help when upgrading your app.
JavaScript
254
star
12

RNNewArchitectureApp

A collection of sample React Native Apps that will show you how to use the New Architecture (Fabric & TurboModules) step-by-step.
201
star
13

react-native-circleci-orb

A CircleCI Orb to Simplify Testing your React Native App
174
star
14

hermes-profile-transformer

TypeScript tool for converting Hermes Sampling Profiler output to Chrome Dev Tools format
TypeScript
86
star
15

boost-for-react-native

The Boost C++ library source code used to build React Native from source
C++
86
star
16

template

The React Native Community Template - getting started building RN apps for Android & iOS
JavaScript
46
star
17

eslint-plugin-react-native-globals

ESLint Environment for React Native
JavaScript
38
star
18

reproducer-react-native

A reproducer to easily recreate bugs and report problems for React Native
TypeScript
32
star
19

developer-experience-wg

Discussions-only repo for topics around React Developer Experience
18
star
20

rn-diff-lib-purge

Easier React Native library upgrades by clearly exposing changes from a version to another. πŸš€ And what better way than to purge, init, then diff? Spoiler: there's no better way. 😎
Shell
3
star