react native animated status bar hook

useAnimatedStatusBar.ts

import {StatusBar} from 'react-native';
import {useCallback} from 'use-memo-one';
import {useFocusEffect} from '@react-navigation/native';
import Animated, {runOnJS, useDerivedValue} from 'react-native-reanimated';

const updateStatusBarStyle = (
  shared: Animated.SharedValue<number>,
  maxNo: number,
) => {
  'worklet';
  if (shared.value > maxNo) {
    runOnJS(StatusBar.setBarStyle)('dark-content');
  } else {
    runOnJS(StatusBar.setBarStyle)('light-content');
  }
};

const useAnimatedStatusBar = (
  shared: Animated.SharedValue<number>,
  maxNo: number,
) => {
  useFocusEffect(
    useCallback(() => {
      updateStatusBarStyle(shared, maxNo);
    }, [maxNo, shared]),
  );

  useDerivedValue(() => {
    updateStatusBarStyle(shared, maxNo);
  }, [shared]);
};

export default useAnimatedStatusBar;