Goodie! Keyboard status context provider

Goodie! Keyboard status context provider

Writing good context providers results in maintainable code, always strive to keep your components as clean as possible. Beautiful code: beautiful 🧠 with less confusion.

P.s. use this template for other state that could live in the global context, e.g. is the user authenticated? Is it dark or bright theme? The possibilities are endless!

import React, {
  ReactElement,
  createContext,
  useContext,
  useEffect,
  useState,
} from "react";
import { Keyboard } from "react-native";

type KeyboardStatusProps = {
  keyboardStatus: boolean,
};

const KeyboardStatusContext =
  createContext < Partial < KeyboardStatusProps >> {};

export function useKeyboardStatus() {
  return useContext(KeyboardStatusContext);
}

export const KeyboardStatusProvider = ({
  children,
}: {
  children: ReactElement,
}) => {
  const [keyboardStatus, setKeyboardStatus] = useState(false);

  useEffect(() => {
    const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
      setKeyboardStatus(true);
    });
    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
      setKeyboardStatus(false);
    });

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);

  return (
    <KeyboardStatusContext.Provider
      value={{
        keyboardStatus,
      }}
    >
      {children}
    </KeyboardStatusContext.Provider>
  );
};

Good to know:

You can also pass setters if you need your components to be able to set local state of the context provider. To type such setter do this:

type KeyboardStatusProps = {
  theme: Themes,
  setTheme: Dispatch<SetStateAction<Themes>>,
};