react-native-a11y/src/hooks/dev/useFocusStyle/useFocusStyle.ts

Improvements of a11y for ReactNative, this library improve work with reader and keyboard focus and reader in general.

import { useState, useMemo } from 'react';
import { StyleSheet } from 'react-native';
import type { FocusStyle, OnFocusChangeFn } from '../../../components';

export const useFocusStyle = (
  focusStyle?: FocusStyle,
  onFocusChange?: OnFocusChangeFn
) => {
  const [focused, setFocusStatus] = useState(false);

  const onFocusChangeHandler: OnFocusChangeFn = (event) => {
    setFocusStatus(event.nativeEvent.isFocused);
    onFocusChange?.(event);
  };

  const fStyle = useMemo(() => {
    if (!focusStyle) return focused ? styles.defaultHighlight : undefined;
    return typeof focusStyle === 'function'
      ? focusStyle({ focused })
      : focusStyle;
  }, [focused, focusStyle]);

  return {
    onFocusChangeHandler,
    fStyle,
  };
};

const styles = StyleSheet.create({
  defaultHighlight: { backgroundColor: '#9999' },
});