stream-chat-react-native-core 9.2.0-beta.2 → 9.2.0-beta.3

package/src/theme/generated/light/StreamTokens.web.ts

@@ -237,7 +237,7 @@ export const foundations: IStreamTokens['foundations'] = {
 export const primitives: IStreamTokens['primitives'] = {
   darkElevation1: {
     elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.1)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 2.6666666666666665,
@@ -247,7 +247,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   darkElevation2: {
     elevation: 7,
-    shadowColor: 'rgba(0,0,0,0.12)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 4.5016949152542365,
@@ -257,7 +257,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   darkElevation3: {
     elevation: 10,
-    shadowColor: 'rgba(0,0,0,0.14)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 8.839779005524864,
@@ -267,7 +267,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   darkElevation4: {
     elevation: 13,
-    shadowColor: 'rgba(0,0,0,0.16)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 14.201622247972189,
@@ -277,7 +277,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation1: {
     elevation: 3,
-    shadowColor: 'rgba(0,0,0,0.06)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 2.904109589041096,
@@ -287,7 +287,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation2: {
     elevation: 7,
-    shadowColor: 'rgba(0,0,0,0.06)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 4.510067114093959,
@@ -297,7 +297,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation3: {
     elevation: 10,
-    shadowColor: 'rgba(0,0,0,0.1)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 9.322128851540615,
@@ -307,7 +307,7 @@ export const primitives: IStreamTokens['primitives'] = {
   },
   lightElevation4: {
     elevation: 14,
-    shadowColor: 'rgba(0,0,0,0.12)',
+    shadowColor: 'rgb(0,0,0)',
     shadowOffset: {
       width: 0,
       height: 15.201376936316695,

package/src/utils/animations/createBoundedZoomTransition.ts

@@ -0,0 +1,117 @@
+import {
+  type EntryAnimationsValues,
+  type ExitAnimationsValues,
+  type LayoutAnimation,
+  withTiming,
+} from 'react-native-reanimated';
+
+export type BoundedZoomDirection = 'bottom' | 'left' | 'right' | 'top';
+
+type CreateBoundedZoomTransitionParams = {
+  duration: number;
+};
+
+const getInitialOffset = (direction: BoundedZoomDirection, values: EntryAnimationsValues) => {
+  'worklet';
+
+  switch (direction) {
+    case 'bottom':
+      return { translateX: 0, translateY: values.targetHeight / 2 };
+    case 'left':
+      return { translateX: -values.targetWidth / 2, translateY: 0 };
+    case 'right':
+      return { translateX: values.targetWidth / 2, translateY: 0 };
+    case 'top':
+      return { translateX: 0, translateY: -values.targetHeight / 2 };
+    default:
+      return { translateX: 0, translateY: 0 };
+  }
+};
+
+const getTargetOffset = (direction: BoundedZoomDirection, values: ExitAnimationsValues) => {
+  'worklet';
+
+  switch (direction) {
+    case 'bottom':
+      return { translateX: 0, translateY: values.currentHeight / 2 };
+    case 'left':
+      return { translateX: -values.currentWidth / 2, translateY: 0 };
+    case 'right':
+      return { translateX: values.currentWidth / 2, translateY: 0 };
+    case 'top':
+      return { translateX: 0, translateY: -values.currentHeight / 2 };
+    default:
+      return { translateX: 0, translateY: 0 };
+  }
+};
+
+export const createBoundedZoomTransition = ({ duration }: CreateBoundedZoomTransitionParams) => {
+  const createBoundedZoomIn =
+    (direction: BoundedZoomDirection) =>
+    (values: EntryAnimationsValues): LayoutAnimation => {
+      'worklet';
+
+      const initialOffset = getInitialOffset(direction, values);
+
+      return {
+        animations: {
+          transform: [
+            { translateX: withTiming(0, { duration }) },
+            { translateY: withTiming(0, { duration }) },
+            { scale: withTiming(1, { duration }) },
+          ],
+        },
+        initialValues: {
+          transform: [
+            { translateX: initialOffset.translateX },
+            { translateY: initialOffset.translateY },
+            { scale: 0 },
+          ],
+        },
+      };
+    };
+
+  const createBoundedZoomOut =
+    (direction: BoundedZoomDirection) =>
+    (values: ExitAnimationsValues): LayoutAnimation => {
+      'worklet';
+
+      const targetOffset = getTargetOffset(direction, values);
+
+      return {
+        animations: {
+          transform: [
+            {
+              translateX: withTiming(targetOffset.translateX, {
+                duration,
+              }),
+            },
+            {
+              translateY: withTiming(targetOffset.translateY, {
+                duration,
+              }),
+            },
+            { scale: withTiming(0, { duration }) },
+          ],
+        },
+        initialValues: {
+          transform: [{ translateX: 0 }, { translateY: 0 }, { scale: 1 }],
+        },
+      };
+    };
+
+  return {
+    boundedZoomIn: {
+      bottom: createBoundedZoomIn('bottom'),
+      left: createBoundedZoomIn('left'),
+      right: createBoundedZoomIn('right'),
+      top: createBoundedZoomIn('top'),
+    },
+    boundedZoomOut: {
+      bottom: createBoundedZoomOut('bottom'),
+      left: createBoundedZoomOut('left'),
+      right: createBoundedZoomOut('right'),
+      top: createBoundedZoomOut('top'),
+    },
+  } as const;
+};

package/src/utils/{transitions.ts → animations/transitions.ts}

@@ -1,6 +1,12 @@
 import { FadeIn, FadeOut, LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
 
+import { createBoundedZoomTransition } from './createBoundedZoomTransition';
+
+const boundedZoomTransition200 = createBoundedZoomTransition({ duration: 200 });
+
 export const transitions = {
+  boundedZoomIn200: boundedZoomTransition200.boundedZoomIn,
+  boundedZoomOut200: boundedZoomTransition200.boundedZoomOut,
   fadeIn200: FadeIn.duration(200),
   fadeOut200: FadeOut.duration(200),
   layout200: LinearTransition.duration(200),

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.2.0-beta.2"
+  "version": "9.2.0-beta.3"
 }

package/lib/commonjs/utils/transitions.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNativeReanimated","require","transitions","exports","fadeIn200","FadeIn","duration","fadeOut200","FadeOut","layout200","LinearTransition","zoomIn200","ZoomIn","zoomOut200","ZoomOut"],"sourceRoot":"../../../src","sources":["utils/transitions.ts"],"mappings":";;;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAEO,IAAMC,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG;EACzBE,SAAS,EAAEC,6BAAM,CAACC,QAAQ,CAAC,GAAG,CAAC;EAC/BC,UAAU,EAAEC,8BAAO,CAACF,QAAQ,CAAC,GAAG,CAAC;EACjCG,SAAS,EAAEC,uCAAgB,CAACJ,QAAQ,CAAC,GAAG,CAAC;EACzCK,SAAS,EAAEC,6BAAM,CAACN,QAAQ,CAAC,GAAG,CAAC;EAC/BO,UAAU,EAAEC,8BAAO,CAACR,QAAQ,CAAC,GAAG;AAClC,CAAU","ignoreList":[]}

package/lib/module/utils/transitions.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNativeReanimated","require","transitions","exports","fadeIn200","FadeIn","duration","fadeOut200","FadeOut","layout200","LinearTransition","zoomIn200","ZoomIn","zoomOut200","ZoomOut"],"sourceRoot":"../../../src","sources":["utils/transitions.ts"],"mappings":";;;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAEO,IAAMC,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG;EACzBE,SAAS,EAAEC,6BAAM,CAACC,QAAQ,CAAC,GAAG,CAAC;EAC/BC,UAAU,EAAEC,8BAAO,CAACF,QAAQ,CAAC,GAAG,CAAC;EACjCG,SAAS,EAAEC,uCAAgB,CAACJ,QAAQ,CAAC,GAAG,CAAC;EACzCK,SAAS,EAAEC,6BAAM,CAACN,QAAQ,CAAC,GAAG,CAAC;EAC/BO,UAAU,EAAEC,8BAAO,CAACR,QAAQ,CAAC,GAAG;AAClC,CAAU","ignoreList":[]}

package/lib/typescript/utils/transitions.d.ts

@@ -1,9 +0,0 @@
-import { FadeIn, FadeOut, LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
-export declare const transitions: {
-    readonly fadeIn200: FadeIn;
-    readonly fadeOut200: FadeOut;
-    readonly layout200: LinearTransition;
-    readonly zoomIn200: ZoomIn;
-    readonly zoomOut200: ZoomOut;
-};
-//# sourceMappingURL=transitions.d.ts.map

package/lib/typescript/utils/transitions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"transitions.d.ts","sourceRoot":"","sources":["../../../src/utils/transitions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAE7F,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC"}