react-native-header-motion 0.3.0 → 1.0.0-alpha.0

package/src/types.ts

@@ -1,11 +1,8 @@
 import type { ReactElement } from 'react';
-import type {
-  LayoutChangeEvent,
-  RefreshControlProps,
-  ScrollViewProps,
-} from 'react-native';
+import type { LayoutChangeEvent, ScrollViewProps } from 'react-native';
 import type { AnimatedRef, SharedValue } from 'react-native-reanimated';
 import { DEFAULT_SCROLL_ID } from './utils/defaults';
+import type { InstanceOrElement } from 'react-native-reanimated/lib/typescript/commonTypes';
 
 export type Progress = SharedValue<number>;
 
@@ -43,13 +40,21 @@ export type WithCollapsiblePagedHeaderProps<
 
 export interface MotionProgress {
   progress: Progress;
-  progressThreshold: number;
+  progressThreshold: SharedValue<number>;
   measureTotalHeight: MeasureAnimatedHeaderAndSet;
   measureDynamic: MeasureAnimatedHeaderAndSet;
+  animatedHeaderBaseProps: AnimatedHeaderBaseMotionProps;
+  activeScrollId: SharedValue<string> | undefined;
+}
+
+export interface AnimatedHeaderBaseMotionProps {
+  enableHeaderPan: boolean;
+  scrollToRef: React.RefObject<ScrollTo | null>;
+  headerPanMomentumOffset: SharedValue<number | null>;
 }
 
 export interface ScrollManagerHeaderMotionContext {
-  originalHeaderHeight: number;
+  originalHeaderHeight: SharedValue<number>;
   minHeightContentContainerStyle:
     | {}
     | {
@@ -57,12 +62,19 @@ export interface ScrollManagerHeaderMotionContext {
       };
 }
 
-export interface ScrollManagerConfig {
+export interface ScrollManagerConfig<TRef extends InstanceOrElement = any> {
   scrollableProps: Required<
     Pick<ScrollViewProps, 'onScroll' | 'scrollEventThrottle'>
   > & {
-    refreshControl?: ReactElement<RefreshControlProps>;
-    ref: AnimatedRef<any>; // TODO: better typing
+    refreshControl?: ReactElement;
+    ref: AnimatedRef<TRef>;
   };
   headerMotionContext: ScrollManagerHeaderMotionContext;
 }
+
+export type ScrollTo = (y: number, options?: ScrollToOptions) => void;
+
+interface ScrollToOptions {
+  isValueDelta?: boolean;
+  animated?: boolean;
+}

package/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './defaults';
 export * from './values';
+export * from './refreshControl';

package/src/utils/refreshControl.tsx

@@ -0,0 +1,118 @@
+import {
+  cloneElement,
+  createElement,
+  isValidElement,
+  type ReactElement,
+} from 'react';
+import { RefreshControl, type RefreshControlProps } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+
+// FIXME: Types are a mess here
+
+const AnimatedRefreshControl = Animated.createAnimatedComponent(RefreshControl);
+
+type MaybeShared<T> = T | SharedValue<T | undefined>;
+
+export interface ResolveRefreshControlOptions {
+  refreshControl?: MaybeShared<ReactElement<RefreshControlProps>>;
+  refreshing?: MaybeShared<boolean>;
+  onRefresh?: MaybeShared<() => void>;
+  progressViewOffset: MaybeShared<number> | SharedValue<number>;
+}
+
+export function resolveRefreshControl({
+  refreshControl,
+  refreshing,
+  onRefresh,
+  progressViewOffset,
+}: ResolveRefreshControlOptions):
+  | ReactElement<
+      RefreshControlProps | React.ComponentProps<typeof AnimatedRefreshControl>
+    >
+  | undefined {
+  if (!refreshControl) {
+    return createRefreshControlWithOffset({
+      refreshing,
+      onRefresh,
+      progressViewOffset,
+    });
+  }
+
+  return isValidElement<RefreshControlProps>(refreshControl)
+    ? injectProgressViewOffset(refreshControl, progressViewOffset)
+    : undefined;
+}
+
+function createRefreshControlWithOffset({
+  refreshing,
+  onRefresh,
+  progressViewOffset,
+}: Omit<ResolveRefreshControlOptions, 'refreshControl'>) {
+  if (!onRefresh) {
+    return undefined;
+  }
+
+  return createElement(ResolvedRefreshControl, {
+    refreshing: (refreshing as boolean) ?? false,
+    onRefresh: onRefresh as () => void,
+    progressViewOffset: progressViewOffset as number,
+  }) as ReactElement<RefreshControlProps>;
+}
+
+function injectProgressViewOffset(
+  refreshControl: ReactElement<RefreshControlProps>,
+  progressViewOffset: MaybeShared<number> | SharedValue<number>
+) {
+  const offset = refreshControl.props.progressViewOffset ?? progressViewOffset;
+
+  if (!isSharedValue<number>(offset)) {
+    return cloneElement(refreshControl, {
+      progressViewOffset: offset as number,
+    });
+  }
+
+  return createElement(ResolvedRefreshControl, {
+    ...refreshControl.props,
+    progressViewOffset: progressViewOffset as number,
+  });
+}
+
+function ResolvedRefreshControl({
+  refreshing,
+  onRefresh,
+  progressViewOffset,
+  ...props
+}: React.ComponentProps<typeof AnimatedRefreshControl>) {
+  const animatedProps = useAnimatedProps<RefreshControlProps>(() => {
+    return {
+      ...(isSharedValue(refreshing) ? { refreshing: refreshing.value } : {}),
+      ...(isSharedValue(onRefresh) ? { onRefresh: onRefresh.value } : {}),
+      ...(isSharedValue(progressViewOffset)
+        ? { progressViewOffset: progressViewOffset.value }
+        : {}),
+    };
+  });
+
+  const nonAnimatedProps = {
+    ...(isSharedValue(refreshing) ? {} : { refreshing }),
+    ...(isSharedValue(onRefresh) ? {} : { onRefresh }),
+    ...(isSharedValue(progressViewOffset) ? {} : { progressViewOffset }),
+  };
+
+  return (
+    <AnimatedRefreshControl
+      {...props}
+      {...nonAnimatedProps}
+      refreshing={nonAnimatedProps.refreshing as boolean}
+      animatedProps={animatedProps}
+    />
+  );
+}
+
+function isSharedValue<T>(
+  value: MaybeShared<T> | SharedValue<T>
+): value is SharedValue<T> {
+  'worklet';
+  return typeof value === 'object' && value !== null && 'value' in value;
+}

package/src/utils/values.ts

@@ -1,6 +1,62 @@
-import type { ScrollValue } from '../types';
+import type { SharedValue } from 'react-native-reanimated';
+import type { ScrollValue, ScrollValues } from '../types';
+import { DEFAULT_SCROLL_ID } from './defaults';
 
 export function getInitialScrollValue(): ScrollValue {
   'worklet';
   return { min: 0, current: 0 };
 }
+
+export function ensureScrollValueRegistered(
+  scrollValues: SharedValue<ScrollValues>,
+  id: string
+): ScrollValues {
+  'worklet';
+
+  const values = scrollValues.get();
+  if (values[id]) {
+    return values;
+  }
+
+  scrollValues.modify((value) => {
+    if (!value[id]) {
+      (value as ScrollValues)[id] = getInitialScrollValue();
+    }
+
+    return value;
+  });
+
+  return scrollValues.get();
+}
+
+export function warnIfMissingActiveScrollId(
+  scrollValues: ScrollValues,
+  id: string,
+  activeScrollId: string | undefined
+): void {
+  'worklet';
+
+  if (!__DEV__ || activeScrollId || id === DEFAULT_SCROLL_ID) {
+    return;
+  }
+
+  let nonDefaultCount = 0;
+  let nonDefaultIds = '';
+
+  for (const key in scrollValues) {
+    if (key === DEFAULT_SCROLL_ID) {
+      continue;
+    }
+
+    nonDefaultCount += 1;
+    nonDefaultIds = nonDefaultIds ? `${nonDefaultIds}, ${key}` : key;
+  }
+
+  if (nonDefaultCount < 1) {
+    return;
+  }
+
+  console.warn(
+    `[react-native-header-motion] Explicit scrollIds (${nonDefaultIds}) are registered but no activeScrollId was provided. Pass useActiveScrollId(...).sv to <HeaderMotion activeScrollId={...}> to keep header motion deterministic.`
+  );
+}

package/lib/module/hooks/refreshControl.js

@@ -1,31 +0,0 @@
-"use strict";
-
-import { cloneElement, createElement, isValidElement } from 'react';
-import { RefreshControl } from 'react-native';
-function injectProgressViewOffset(refreshControl, progressViewOffset) {
-  if (refreshControl.props.progressViewOffset !== undefined) {
-    return refreshControl;
-  }
-  return /*#__PURE__*/cloneElement(refreshControl, {
-    progressViewOffset: progressViewOffset
-  });
-}
-export function resolveRefreshControl({
-  refreshControl,
-  refreshing,
-  onRefresh,
-  progressViewOffset
-}) {
-  if (refreshControl) {
-    return /*#__PURE__*/isValidElement(refreshControl) ? injectProgressViewOffset(refreshControl, progressViewOffset) : undefined;
-  }
-  if (!onRefresh) {
-    return undefined;
-  }
-  return /*#__PURE__*/createElement(RefreshControl, {
-    refreshing: refreshing ?? false,
-    onRefresh: onRefresh,
-    progressViewOffset: progressViewOffset
-  });
-}
-//# sourceMappingURL=refreshControl.js.map

package/lib/module/hooks/refreshControl.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cloneElement","createElement","isValidElement","RefreshControl","injectProgressViewOffset","refreshControl","progressViewOffset","props","undefined","resolveRefreshControl","refreshing","onRefresh"],"sourceRoot":"../../../src","sources":["hooks/refreshControl.ts"],"mappings":";;AAAA,SACEA,YAAY,EACZC,aAAa,EACbC,cAAc,QAET,OAAO;AACd,SAASC,cAAc,QAAkC,cAAc;AAYvE,SAASC,wBAAwBA,CAC/BC,cAAiD,EACjDC,kBAAuC,EACvC;EACA,IAAID,cAAc,CAACE,KAAK,CAACD,kBAAkB,KAAKE,SAAS,EAAE;IACzD,OAAOH,cAAc;EACvB;EAEA,oBAAOL,YAAY,CAACK,cAAc,EAAE;IAClCC,kBAAkB,EAAEA;EACtB,CAAC,CAAC;AACJ;AAEA,OAAO,SAASG,qBAAqBA,CAAC;EACpCJ,cAAc;EACdK,UAAU;EACVC,SAAS;EACTL;AAC4B,CAAC,EAEjB;EACZ,IAAID,cAAc,EAAE;IAClB,OAAO,aAAAH,cAAc,CAAsBG,cAAc,CAAC,GACtDD,wBAAwB,CAACC,cAAc,EAAEC,kBAAkB,CAAC,GAC5DE,SAAS;EACf;EAEA,IAAI,CAACG,SAAS,EAAE;IACd,OAAOH,SAAS;EAClB;EAEA,oBAAOP,aAAa,CAACE,cAAc,EAAE;IACnCO,UAAU,EAAGA,UAAU,IAAgB,KAAK;IAC5CC,SAAS,EAAEA,SAAuB;IAClCL,kBAAkB,EAAEA;EACtB,CAAC,CAAC;AACJ","ignoreList":[]}

package/lib/typescript/src/hooks/refreshControl.d.ts

@@ -1,13 +0,0 @@
-import { type ReactElement } from 'react';
-import { type RefreshControlProps } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
-type MaybeShared<T> = T | SharedValue<T | undefined>;
-export interface ResolveRefreshControlOptions {
-    refreshControl?: MaybeShared<ReactElement<RefreshControlProps>>;
-    refreshing?: MaybeShared<boolean>;
-    onRefresh?: MaybeShared<() => void>;
-    progressViewOffset: MaybeShared<number>;
-}
-export declare function resolveRefreshControl({ refreshControl, refreshing, onRefresh, progressViewOffset, }: ResolveRefreshControlOptions): ReactElement<RefreshControlProps> | undefined;
-export {};
-//# sourceMappingURL=refreshControl.d.ts.map

package/lib/typescript/src/hooks/refreshControl.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"refreshControl.d.ts","sourceRoot":"","sources":["../../../../src/hooks/refreshControl.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AACf,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;AAErD,MAAM,WAAW,4BAA4B;IAC3C,cAAc,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAChE,UAAU,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,WAAW,CAAC,MAAM,IAAI,CAAC,CAAC;IACpC,kBAAkB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACzC;AAeD,wBAAgB,qBAAqB,CAAC,EACpC,cAAc,EACd,UAAU,EACV,SAAS,EACT,kBAAkB,GACnB,EAAE,4BAA4B,GAC3B,YAAY,CAAC,mBAAmB,CAAC,GACjC,SAAS,CAgBZ"}

package/src/hooks/refreshControl.ts

@@ -1,55 +0,0 @@
-import {
-  cloneElement,
-  createElement,
-  isValidElement,
-  type ReactElement,
-} from 'react';
-import { RefreshControl, type RefreshControlProps } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
-
-type MaybeShared<T> = T | SharedValue<T | undefined>;
-
-export interface ResolveRefreshControlOptions {
-  refreshControl?: MaybeShared<ReactElement<RefreshControlProps>>;
-  refreshing?: MaybeShared<boolean>;
-  onRefresh?: MaybeShared<() => void>;
-  progressViewOffset: MaybeShared<number>;
-}
-
-function injectProgressViewOffset(
-  refreshControl: ReactElement<RefreshControlProps>,
-  progressViewOffset: MaybeShared<number>
-) {
-  if (refreshControl.props.progressViewOffset !== undefined) {
-    return refreshControl;
-  }
-
-  return cloneElement(refreshControl, {
-    progressViewOffset: progressViewOffset as number,
-  });
-}
-
-export function resolveRefreshControl({
-  refreshControl,
-  refreshing,
-  onRefresh,
-  progressViewOffset,
-}: ResolveRefreshControlOptions):
-  | ReactElement<RefreshControlProps>
-  | undefined {
-  if (refreshControl) {
-    return isValidElement<RefreshControlProps>(refreshControl)
-      ? injectProgressViewOffset(refreshControl, progressViewOffset)
-      : undefined;
-  }
-
-  if (!onRefresh) {
-    return undefined;
-  }
-
-  return createElement(RefreshControl, {
-    refreshing: (refreshing as boolean) ?? false,
-    onRefresh: onRefresh as () => void,
-    progressViewOffset: progressViewOffset as number,
-  }) as unknown as ReactElement<RefreshControlProps>;
-}