fix(makeStyles): Fix object literal outside useMemo causing styles to…

… change on every render (#3844) * fix(makeStyles): Fix object literal outside useMemo causing styles to change on every render * fix(makeStyles): Ensure props remain optional * fix lint --------- Co-authored-by: Arpit Bhalla <[email protected]>
react-native-elements · Feb 4, 2024 · 52056de · 52056de
1 parent cec04af
commit 52056de
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/packages/themed/src/config/makeStyles.ts b/packages/themed/src/config/makeStyles.ts
@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
+import { useTheme } from './ThemeProvider';
 import { Colors } from './colors';
 import { Theme } from './theme';
-import { useTheme } from './ThemeProvider';
 
 export const makeStyles =
  <T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>, V>(
@@ -15,11 +15,14 @@ export const makeStyles =
  props: V
  ) => T)
  ) =>
- (props: V = {} as any): T => {
+ (props?: V): T => {
  const { theme } = useTheme();
 
  return useMemo(() => {
- const css = typeof styles === 'function' ? styles(theme, props) : styles;
+ const css =
+ typeof styles === 'function'
+ ? styles(theme, props ?? ({} as any))
+ : styles;
  return StyleSheet.create(css);
  }, [props, theme]);
  };