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

npm install @lumitech/mobile-hooks

API

• useAppStateEvent
• useBackHandler
• useDeviceOrientation
• useDimensions
• useInterval
• useLayout
• useKeyboard
• useDebounce
• useTimeout
• useThrottle

useAppStateEvent

import { useAppStateEvent } from '@lumitech/mobile-hooks'

const [appState, setAppState] = useState('active');

useAppStateEvent({
  onChange: () => console.log(appState),
  onForeground: () => setAppState('active'),
  onBackground: () => setAppState('background'),
})

useBackHandler

import { useBackHandler } from '@lumitech/mobile-hooks'

useBackHandler(() => {
  if (shouldBeHandledHere) {
    // handle it
    return true
  }
  // let the default thing happen
  return false
})

useDeviceOrientation

import { useDeviceOrientation } from '@lumitech/mobile-hooks'

const orientation = useDeviceOrientation()

console.log('is orientation portrait: ', orientation.portrait)
console.log('is orientation landscape: ', orientation.landscape)

useDimensions

import { useScreenDimensions, useWindowDimensions } from '@lumitech/mobile-hooks'

const { width, height } = useScreenDimensions()
// or
const { width, height } = useWindowDimensions()

useInterval

import { useInterval } from '@lumitech/mobile-hooks'

const [count, setCount] = useState(0)

useInterval(() => setCount(count + 1), 1000)

useLayout

import { useLayout } from '@lumitech/mobile-hooks'

const { onLayout, ...layout } = useLayout()

console.log('layout: ', layout)

<View onLayout={onLayout} style={{width: 200, height: 200, marginTop: 30}} />

useKeyboard

import { useKeyboard } from '@lumitech/mobile-hooks'

const { keyboardShown, coordinates, keyboardHeight } = useKeyboard()

console.log('keyboard: ', { keyboardShown, coordinates, keyboardHeight })

useDebounce

import { useDebounce } from '@lumitech/mobile-hooks'

const [searchTerm, setSearchTerm] = useState("");

const debouncedSearchTerm = useDebounce(searchTerm, 500);

useTimeout

import { useTimeout } from '@lumitech/mobile-hooks'

const [count, setCount] = useState(0)

useTimeout(() => setCount(count + 1), 1000)

useThrottle

import { useThrottle } from '@lumitech/mobile-hooks'

const [searchTerm, setSearchTerm] = useState("");

const throttledSearchTerm = useThrottle(searchTerm, 500);