Design Kits issues (#2836)

* Add proper cache resolver to our memoize generatePalette method

* Fix tests

* Fix issue with undefined value being destructed

* Regenerate TabBar when colors change

* Revert fix, move to another PR

* Fix PR comment

Author: ethanshar

src/components/tabController/TabBar.tsx

@@ -16,7 +16,6 @@ import {Colors, Spacings, Typography} from '../../style';
 import FadedScrollView from '../fadedScrollView';
 import {FaderProps} from '../fader';
 import useScrollToItem from './useScrollToItem';
-import {orientations} from '../../commons/Constants';
 import {useDidUpdate} from 'hooks';
 
 const FIX_RTL = Constants.isRTL && Constants.isAndroid;
@@ -164,7 +163,7 @@ const TabBar = (props: Props) => {
   } = props;
 
   const tabBar = useRef<typeof FadedScrollView>();
-  const [key, setKey] = useState<orientations>(Constants.orientation);
+  const [key, setKey] = useState<string>(generateKey(Constants.orientation, labelColor, selectedLabelColor));
   const context = useContext(TabBarContext);
   const {items: contextItems, currentPage, targetPage, containerWidth: contextContainerWidth} = context;
   const containerWidth: number = useMemo(() => {
@@ -286,10 +285,14 @@ const TabBar = (props: Props) => {
       focusIndex(currentPage.value);
     } else {
       reset();
-      setKey(Constants.orientation);
+      setKey(generateKey(Constants.orientation, labelColor, selectedLabelColor));
     }
   }, [containerWidth]);
 
+  useDidUpdate(() => {
+    setKey(generateKey(Constants.orientation, labelColor, selectedLabelColor));
+  }, [labelColor, selectedLabelColor]);
+
   return (
     <View style={_containerStyle} key={key} bg-$backgroundElevated>
       <FadedScrollView
@@ -365,4 +368,7 @@ const styles = StyleSheet.create({
   }
 });
 
+const generateKey = (orientation: string, labelColor = '', selectedLabelColor = '') =>
+  `${orientation}_${labelColor}_${selectedLabelColor}`;
+
 export default asBaseComponent<TabControllerBarProps>(forwardRef<Props>(TabBar));

src/style/colors.ts

@@ -247,15 +247,15 @@ export class Colors {
     const sliced = tints.slice(0, size);
     const adjusted = options?.adjustSaturation && adjustSaturation(sliced, color);
     return adjusted || sliced;
-  });
+  }, generatePaletteCacheResolver);
 
   defaultOptions = {adjustLightness: true, adjustSaturation: true, addDarkestTints: false, avoidReverseOnDark: false};
 
   generateColorPalette = _.memoize((color: string, options?: GeneratePaletteOptions): string[] => {
     const _options = {...this.defaultOptions, ...options};
     const palette = this.generatePalette(color, _options);
     return this.shouldReverseOnDark(_options?.avoidReverseOnDark) ? _.reverse(palette) : palette;
-  });
+  }, generatePaletteCacheResolver);
 
   private generateDesignTokens(primaryColor: string, dark?: boolean) {
     let colorPalette: string[] = this.generatePalette(primaryColor);
@@ -371,6 +371,10 @@ function threeDigitHexToSix(value: string) {
   return value.replace(/./g, '$&$&');
 }
 
+function generatePaletteCacheResolver(color: string, options?: GeneratePaletteOptions) {
+  return `${color}${options ? '_' + JSON.stringify(options) : ''}`;
+} 
+
 const TypedColors = Colors as ExtendTypeWith<typeof Colors, typeof colorsPalette & typeof DesignTokens>;
 const colorObject = new TypedColors();
 colorObject.loadColors(colorsPalette);