Useful React Native Hooks

22 Dec 2019

React Hooks are getting increasingly popular. However, I've not found any hooks for React Native specific features, so I started creating them myself. This is my collection of useful React Native hooks.

use-layout-animation

Useful for using React Native's LayoutAnimation using hooks. I've found myself adding useLayoutAnimation in a lot of components, which makes apps feel smoother with almost no extra work.

import { useLayoutAnimation } from 'use-layout-animation';

function Component(props) {
    useLayoutAnimation([props.animateWhenThisPropChanges]);
    // ...
}

use-react-native-app-state

Useful for interacting with React Native's AppState using hooks. E.g. when working with permissions and the user opens and leaves the app, this is really helpful.

import { useAppStateChangedTo } from 'use-react-native-app-state';

function Component(props) {
    useAppStateChangedTo('active', () => {
        alert('user opened app');
        checkIfHasAllPermissions();
    });
    // ...
}

This list is very short and will most likely expand. Have I missed anything? Reach out and I will add it above.