Use unpack style for SortableListItem component (#2546)

Author: ethanshar

src/components/sortableList/SortableListItem.tsx

@@ -17,6 +17,7 @@ import {useDidUpdate} from 'hooks';
 import SortableListContext from './SortableListContext';
 import usePresenter from './usePresenter';
 import {HapticService, HapticType} from '../../services';
+import {StyleUtils} from 'utils';
 export interface InternalSortableListItemProps {
   index: number;
 }
@@ -49,6 +50,17 @@ const SortableListItem = (props: Props) => {
   const translateY = useSharedValue<number>(0);
 
   const isDragging = useSharedValue(false);
+
+  const draggedItemShadow = useSharedValue(StyleUtils.unpackStyle({
+    ...Shadows.sh30.bottom,
+    ...Shadows.sh30.top
+  }));
+
+  const defaultItemShadow = useSharedValue(StyleUtils.unpackStyle({
+    shadowColor: Colors.transparent,
+    elevation: 0
+  }));
+
   const tempTranslateY = useSharedValue<number>(0);
   const tempItemsOrder = useSharedValue<string[]>(itemsOrder.value);
 
@@ -143,14 +155,8 @@ const SortableListItem = (props: Props) => {
     const zIndex = isDragging.value ? 100 : withTiming(0, animationConfig);
     const opacity = isDragging.value ? 0.95 : 1;
     const shadow = isDragging.value
-      ? {
-        ...Shadows.sh30.bottom,
-        ...Shadows.sh30.top
-      }
-      : {
-        shadowColor: Colors.transparent,
-        elevation: 0
-      };
+      ? draggedItemShadow.value
+      : defaultItemShadow.value;
 
     return {
       backgroundColor: Colors.$backgroundDefault, // required for elevation to work in Android

src/incubator/Slider/SliderPresenter.ts

@@ -1,4 +1,3 @@
-import {StyleProp, ViewStyle, StyleSheet} from 'react-native';
 import {SharedValue, interpolate} from 'react-native-reanimated';
 import {SliderProps} from '../../components/slider';
 
@@ -56,12 +55,6 @@ export function validateValues(props: SliderProps) {
   }
 }
 
-export function unpackStyle(style?: StyleProp<ViewStyle>) {
-  if (style) {
-    return JSON.parse(JSON.stringify(StyleSheet.flatten(style)));
-  }
-}
-
 export function getStepInterpolated(trackWidth: number, minimumValue: number, maximumValue: number, stepXValue: SharedValue<number>) {
   'worklet';
   const outputRange = [0, trackWidth];

src/incubator/Slider/index.tsx

@@ -5,13 +5,13 @@ import {useSharedValue, useAnimatedStyle, runOnJS, useAnimatedReaction, withTimi
 import {forwardRef, ForwardRefInjectedProps, Constants} from '../../commons/new';
 import {extractAccessibilityProps} from '../../commons/modifiers';
 import {Colors, Spacings} from '../../style';
+import {StyleUtils} from 'utils';
 import View from '../../components/view';
 import {SliderProps} from '../../components/slider';
 import {
   validateValues,
   getOffsetForValue,
   getValueForOffset,
-  unpackStyle,
   getStepInterpolated
 } from './SliderPresenter';
 import Thumb from './Thumb';
@@ -99,12 +99,12 @@ const Slider = React.memo((props: Props) => {
   const defaultThumbStyle: StyleProp<ViewStyle> = useMemo(() => [
     styles.thumb, {backgroundColor: disabled ? Colors.$backgroundDisabled : thumbTintColor}
   ], [disabled, thumbTintColor]);
-  const _thumbStyle = useSharedValue(unpackStyle(thumbStyle || defaultThumbStyle));
-  const _activeThumbStyle = useSharedValue(unpackStyle(activeThumbStyle));
+  const _thumbStyle = useSharedValue(StyleUtils.unpackStyle(thumbStyle || defaultThumbStyle, {flatten: true}));
+  const _activeThumbStyle = useSharedValue(StyleUtils.unpackStyle(activeThumbStyle, {flatten: true}));
 
   useEffect(() => {
     if (!thumbStyle) {
-      _thumbStyle.value = unpackStyle(defaultThumbStyle);
+      _thumbStyle.value = StyleUtils.unpackStyle(defaultThumbStyle, {flatten: true});
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultThumbStyle, thumbStyle]);

src/utils/index.ts

@@ -1,3 +1,4 @@
 import * as TextUtils from './textUtils';
+import * as StyleUtils from './styleUtils';
 
-export {TextUtils};
+export {TextUtils, StyleUtils};

src/utils/styleUtils.ts

@@ -0,0 +1,11 @@
+import {StyleProp, ViewStyle, StyleSheet} from 'react-native';
+
+interface UnpackStyleOptions {
+  flatten?: boolean;
+}
+
+export function unpackStyle(style?: StyleProp<ViewStyle>, options: UnpackStyleOptions = {}) {
+  if (style) {
+    return JSON.parse(JSON.stringify(options.flatten ? StyleSheet.flatten(style) : style));
+  }
+}