simplify styling

Author: Andrzej Antoni Kwaśniewski

apps/common-app/src/new_api/complicated/velocity_test/index.tsx

@@ -62,19 +62,17 @@ export default function App() {
   });
 
   const animatedStyles = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      colorProgress.value,
-      [0, 1],
-      [COLORS.NAVY, COLORS.KINDA_BLUE]
-    );
-
     return {
       transform: [
         { translateX: offsetX.value },
         { translateY: offsetY.value },
         { scale: withTiming(isPressed.value ? 1.2 : 1, { duration: 100 }) },
       ],
-      backgroundColor,
+      backgroundColor: interpolateColor(
+        colorProgress.value,
+        [0, 1],
+        [COLORS.NAVY, COLORS.KINDA_BLUE]
+      ),
     };
   });
 

apps/common-app/src/new_api/simple/fling/index.tsx

@@ -42,14 +42,13 @@ export default function FlingExample() {
   });
 
   const animatedStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      colorProgress.value,
-      [0, 1],
-      [COLORS.NAVY, COLORS.PURPLE]
-    );
     return {
       transform: [{ translateX: position.value }],
-      backgroundColor,
+      backgroundColor: interpolateColor(
+        colorProgress.value,
+        [0, 1],
+        [COLORS.NAVY, COLORS.PURPLE]
+      ),
     };
   });
 

apps/common-app/src/new_api/simple/hover/index.tsx

@@ -13,13 +13,12 @@ export default function TapExample() {
   const colorProgress = useSharedValue(0);
 
   const animatedStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      colorProgress.value,
-      [0, 1],
-      [COLORS.NAVY, COLORS.KINDA_BLUE]
-    );
     return {
-      backgroundColor,
+      backgroundColor: interpolateColor(
+        colorProgress.value,
+        [0, 1],
+        [COLORS.NAVY, COLORS.KINDA_BLUE]
+      ),
     };
   });
 

apps/common-app/src/new_api/simple/longPress/index.tsx

@@ -16,14 +16,12 @@ export default function LongPressExample() {
   const colorProgress = useSharedValue(0);
 
   const animatedStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      colorProgress.value,
-      [0, 1, 2],
-      [COLORS.NAVY, COLORS.PURPLE, COLORS.KINDA_BLUE]
-    );
-
     return {
-      backgroundColor,
+      backgroundColor: interpolateColor(
+        colorProgress.value,
+        [0, 1, 2],
+        [COLORS.NAVY, COLORS.PURPLE, COLORS.KINDA_BLUE]
+      ),
     };
   });
 

apps/common-app/src/new_api/simple/pan/index.tsx

@@ -32,17 +32,16 @@ export default function PanExample() {
   });
 
   const animatedStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      colorProgress.value,
-      [0, 1],
-      [COLORS.NAVY, COLORS.KINDA_BLUE]
-    );
     return {
       transform: [
         { translateX: translateX.value },
         { translateY: translateY.value },
       ],
-      backgroundColor,
+      backgroundColor: interpolateColor(
+        colorProgress.value,
+        [0, 1],
+        [COLORS.NAVY, COLORS.KINDA_BLUE]
+      ),
     };
   });
 

apps/common-app/src/new_api/simple/pinch/index.tsx

@@ -26,15 +26,13 @@ export default function PinchExample() {
   });
 
   const animatedStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      colorProgress.value,
-      [0, 1],
-      [COLORS.NAVY, COLORS.KINDA_BLUE]
-    );
-
     return {
       transform: [{ scale: scale.value }],
-      backgroundColor,
+      backgroundColor: interpolateColor(
+        colorProgress.value,
+        [0, 1],
+        [COLORS.NAVY, COLORS.KINDA_BLUE]
+      ),
     };
   });
 

apps/common-app/src/new_api/simple/rotation/index.tsx

@@ -29,15 +29,13 @@ export default function RotationExample() {
   });
 
   const animatedStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      colorProgress.value,
-      [0, 1],
-      [COLORS.NAVY, COLORS.KINDA_BLUE]
-    );
-
     return {
       transform: [{ rotateZ: `${rotation.value}rad` }],
-      backgroundColor,
+      backgroundColor: interpolateColor(
+        colorProgress.value,
+        [0, 1],
+        [COLORS.NAVY, COLORS.KINDA_BLUE]
+      ),
     };
   });
 

apps/common-app/src/new_api/simple/tap/index.tsx

@@ -13,13 +13,12 @@ export default function TapExample() {
   const colorProgress = useSharedValue(0);
 
   const animatedStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      colorProgress.value,
-      [0, 1],
-      [COLORS.NAVY, COLORS.KINDA_BLUE]
-    );
     return {
-      backgroundColor,
+      backgroundColor: interpolateColor(
+        colorProgress.value,
+        [0, 1],
+        [COLORS.NAVY, COLORS.KINDA_BLUE]
+      ),
     };
   });