All files / packages/ui/src/themes makeStyles.ts

100% Statements 5/5
100% Branches 0/0
100% Functions 3/3
100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23                        22x         37x 381x 381x      
import { useMemo } from "react";
import { StyleSheet, ViewStyle, TextStyle, ImageStyle } from "react-native";
import { useTheme } from "./ThemeContext";
import { Theme } from "./types";
 
type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };
 
/**
 * A hook to create styles that depend on the theme.
 * @param stylesFactory A function that returns a stylesheet object.
 * @returns The computed styles.
 */
export const makeStyles = <
  T extends NamedStyles<T> | NamedStyles<Record<string, unknown>>,
>(
  stylesFactory: (theme: Theme) => T,
) => {
  return () => {
    const { theme } = useTheme();
    return useMemo(() => StyleSheet.create(stylesFactory(theme)), [theme]);
  };
};