refactor: destructure theme prop

Author: lukewalczak

src/components/Badge.tsx

@@ -67,7 +67,7 @@ const Badge = ({
 
   const {
     animation: { scale },
-    colors,
+    colors: { error, onError },
   } = theme;
 
   React.useEffect(() => {
@@ -84,7 +84,7 @@ const Badge = ({
     }).start();
   }, [visible, opacity, scale]);
 
-  const { backgroundColor = colors.error, ...restStyle } = (StyleSheet.flatten(
+  const { backgroundColor = error, ...restStyle } = (StyleSheet.flatten(
     style
   ) || {}) as TextStyle;
 
@@ -95,7 +95,7 @@ const Badge = ({
         {
           opacity,
           backgroundColor,
-          color: colors.onError,
+          color: onError,
           fontSize: size * 0.5,
           lineHeight: size / fontScale,
           height: size,

src/components/Banner.tsx

@@ -131,6 +131,11 @@ const Banner = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const {
+    animation: { scale },
+    colors: { onSurface, primary },
+  } = theme;
+
   const { current: position } = React.useRef<Animated.Value>(
     new Animated.Value(visible ? 1 : 0)
   );
@@ -145,11 +150,6 @@ const Banner = ({
   const showCallback = useLatestCallback(onShowAnimationFinished);
   const hideCallback = useLatestCallback(onHideAnimationFinished);
 
-  const {
-    animation: { scale },
-    colors,
-  } = theme;
-
   const opacity = position.interpolate({
     inputRange: [0, 0.1, 1],
     outputRange: [0, 1, 1],
@@ -227,7 +227,7 @@ const Banner = ({
               style={[
                 styles.message,
                 {
-                  color: colors.onSurface,
+                  color: onSurface,
                 },
               ]}
               accessibilityLiveRegion={visible ? 'polite' : 'none'}
@@ -244,7 +244,7 @@ const Banner = ({
                 compact
                 mode="text"
                 style={styles.button}
-                textColor={colors.primary}
+                textColor={primary}
                 theme={theme}
                 {...others}
               >

src/components/BottomNavigation/BottomNavigation.tsx

@@ -343,18 +343,21 @@ const BottomNavigation = <Route extends BaseRoute>({
   onTabPress,
   onTabLongPress,
   onIndexChange,
-  shifting: shiftingProp,
+  shifting: shiftingProp = false,
   safeAreaInsets,
   labelMaxFontSizeMultiplier = 1,
-  compact: compactProp,
+  compact = false,
   testID = 'bottom-navigation',
   theme: themeOverrides,
   getLazy = ({ route }: { route: Route }) => route.lazy,
 }: Props<Route>) => {
   const theme = useInternalTheme(themeOverrides);
-  const { scale } = theme.animation;
-  const compact = compactProp ?? false;
-  let shifting = shiftingProp ?? false;
+  const {
+    animation: { scale },
+    colors,
+  } = theme;
+
+  let shifting = shiftingProp;
 
   if (shifting && navigationState.routes.length < 2) {
     shifting = false;
@@ -486,7 +489,6 @@ const BottomNavigation = <Route extends BaseRoute>({
   });
 
   const { routes } = navigationState;
-  const { colors } = theme;
 
   return (
     <View style={[styles.container, style]} testID={testID}>

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -339,7 +339,11 @@ const BottomNavigationBar = <Route extends BaseRoute>({
 }: Props<Route>) => {
   const theme = useInternalTheme(themeOverrides);
   const { bottom, left, right } = useSafeAreaInsets();
-  const { scale } = theme.animation;
+  const {
+    animation: { scale },
+    colors: { elevation: elevationColors, secondaryContainer },
+    fonts: { labelMedium },
+  } = theme;
   let shifting = shiftingProp;
 
   if (shifting && navigationState.routes.length < 2) {
@@ -479,7 +483,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
     backgroundColor?: ColorValue;
   };
 
-  const backgroundColor = customBackground || theme.colors.elevation.level2;
+  const backgroundColor = customBackground || elevationColors.level2;
 
   const activeTintColor = getActiveTintColor({
     activeColor,
@@ -615,8 +619,6 @@ const BottomNavigationBar = <Route extends BaseRoute>({
 
             const isLegacyOrV3Shifting = shifting && labeled;
 
-            const font = theme.fonts.labelMedium;
-
             return renderTouchable({
               key: route.key,
               route,
@@ -657,7 +659,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                                 scaleX: outlineScale,
                               },
                             ],
-                            backgroundColor: theme.colors.secondaryContainer,
+                            backgroundColor: secondaryContainer,
                           },
                           activeIndicatorStyle,
                         ]}
@@ -751,7 +753,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                               styles.label,
                               {
                                 color: activeLabelColor,
-                                ...font,
+                                ...labelMedium,
                               },
                             ]}
                           >
@@ -785,7 +787,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
                                 styles.label,
                                 {
                                   color: inactiveLabelColor,
-                                  ...font,
+                                  ...labelMedium,
                                 },
                               ]}
                             >

src/components/Button/Button.tsx

@@ -212,13 +212,18 @@ const Button = (
   ref: React.ForwardedRef<View>
 ) => {
   const theme = useInternalTheme(themeOverrides);
+  const {
+    roundness,
+    animation,
+    fonts: { labelLarge },
+  } = theme;
+
   const isMode = React.useCallback(
     (modeToCompare: ButtonMode) => {
       return mode === modeToCompare;
     },
     [mode]
   );
-  const { roundness, animation, fonts } = theme;
   const isWeb = Platform.OS === 'web';
 
   const hasPassedTouchHandler = hasTouchHandler({
@@ -309,11 +314,9 @@ const Button = (
   const { color: customLabelColor, fontSize: customLabelSize } =
     StyleSheet.flatten(labelStyle) || {};
 
-  const font = fonts.labelLarge;
-
   const textStyle = {
     color: textColor,
-    ...font,
+    ...labelLarge,
   };
 
   const iconStyle =

src/components/Button/utils.tsx

@@ -49,6 +49,10 @@ const getButtonBackgroundColor = ({
 }: BaseProps & {
   customButtonColor?: string;
 }) => {
+  const {
+    colors: { surfaceDisabled, elevation, primary, secondaryContainer },
+  } = theme;
+
   if (customButtonColor && !disabled) {
     return customButtonColor;
   }
@@ -58,19 +62,19 @@ const getButtonBackgroundColor = ({
       return 'transparent';
     }
 
-    return theme.colors.surfaceDisabled;
+    return surfaceDisabled;
   }
 
   if (isMode('elevated')) {
-    return theme.colors.elevation.level1;
+    return elevation.level1;
   }
 
   if (isMode('contained')) {
-    return theme.colors.primary;
+    return primary;
   }
 
   if (isMode('contained-tonal')) {
-    return theme.colors.secondaryContainer;
+    return secondaryContainer;
   }
 
   return 'transparent';
@@ -88,12 +92,15 @@ const getButtonTextColor = ({
   backgroundColor: string;
   dark?: boolean;
 }) => {
+  const {
+    colors: { onSurfaceDisabled, primary, onPrimary, onSecondaryContainer },
+  } = theme;
   if (customTextColor && !disabled) {
     return customTextColor;
   }
 
   if (disabled) {
-    return theme.colors.onSurfaceDisabled;
+    return onSurfaceDisabled;
   }
 
   if (typeof dark === 'boolean') {
@@ -107,27 +114,31 @@ const getButtonTextColor = ({
   }
 
   if (isMode('outlined') || isMode('text') || isMode('elevated')) {
-    return theme.colors.primary;
+    return primary;
   }
 
   if (isMode('contained')) {
-    return theme.colors.onPrimary;
+    return onPrimary;
   }
 
   if (isMode('contained-tonal')) {
-    return theme.colors.onSecondaryContainer;
+    return onSecondaryContainer;
   }
 
-  return theme.colors.primary;
+  return primary;
 };
 
 const getButtonBorderColor = ({ isMode, disabled, theme }: BaseProps) => {
+  const {
+    colors: { surfaceDisabled, outline },
+  } = theme;
+
   if (disabled && isMode('outlined')) {
-    return theme.colors.surfaceDisabled;
+    return surfaceDisabled;
   }
 
   if (isMode('outlined')) {
-    return theme.colors.outline;
+    return outline;
   }
 
   return 'transparent';

src/components/Card/utils.tsx

@@ -39,7 +39,11 @@ export const getCardCoverStyle = ({
 };
 
 const getBorderColor = ({ theme }: { theme: InternalTheme }) => {
-  return theme.colors.outline;
+  const {
+    colors: { outline },
+  } = theme;
+
+  return outline;
 };
 
 const getBackgroundColor = ({
@@ -49,11 +53,15 @@ const getBackgroundColor = ({
   theme: InternalTheme;
   isMode: (mode: CardMode) => boolean;
 }) => {
+  const {
+    colors: { surfaceVariant, surface },
+  } = theme;
+
   if (isMode('contained')) {
-    return theme.colors.surfaceVariant;
+    return surfaceVariant;
   }
   if (isMode('outlined')) {
-    return theme.colors.surface;
+    return surface;
   }
   return undefined;
 };

src/components/Checkbox/CheckboxItem.tsx

@@ -154,7 +154,9 @@ const CheckboxItem = ({
   ...props
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { colors } = theme;
+  const {
+    colors: { onSurface, onSurfaceDisabled },
+  } = theme;
 
   const checkboxProps = { ...props, status, theme, disabled };
   const isLeading = position === 'leading';
@@ -168,14 +170,9 @@ const CheckboxItem = ({
     checkbox = <Checkbox {...checkboxProps} />;
   }
 
-  const textColor = colors.onSurface;
-  const disabledTextColor = colors.onSurfaceDisabled;
-
-  const textAlign = isLeading ? 'right' : 'left';
-
   const computedStyle = {
-    color: disabled ? disabledTextColor : textColor,
-    textAlign,
+    color: disabled ? onSurfaceDisabled : onSurface,
+    textAlign: isLeading ? 'right' : 'left',
   } as TextStyle;
 
   return (