@ramses-superapp/ramses-ui/src/hooks/useStyles.ts

UI kit for Ramses Built Apps

import { useMemo } from 'react';
import { StyleSheet } from 'react-native';
import { useTheme } from './ThemeProvider';
import type { Theme } from '../styles/types';

/**
 * useStyles - User-friendly hook for theme-aware, optionally dynamic styles.
 * @param styleFactory - (theme, props) => style object
 * @param props - Optional dependency object (state/props)
 * @returns Memoized StyleSheet object
 */
export function useStyles<Props extends object = {}>(
  styleFactory: (theme: Theme, props: Props) => Record<string, any>,
  props?: Props
) {
  const theme = useTheme();
  // Memoize styles based on theme and props
  return useMemo(
    () => StyleSheet.create(styleFactory(theme, props ?? ({} as Props))),
    // Spread props for shallow dependency tracking
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [theme, ...(props ? Object.values(props) : [])]
  );
}