react-native-a11y
Version:
Improvements of a11y for ReactNative, this library improve work with reader and keyboard focus and reader in general.
32 lines (26 loc) • 831 B
text/typescript
import { useState, useMemo } from "react";
import { StyleSheet } from "react-native";
import { 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" },
});