@momo-kits/tab-view 0.0.55-alpha.30

package/Pager.android.tsx

@@ -0,0 +1 @@
+export { default } from './PagerViewAdapter';

package/Pager.ios.tsx

@@ -0,0 +1 @@
+export { default } from './PagerViewAdapter';

package/Pager.tsx

@@ -0,0 +1 @@
+export { default } from './PanResponderAdapter';

package/PagerViewAdapter.tsx

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import { Animated, Keyboard, StyleSheet } from 'react-native';
+import ViewPager, {
+  PageScrollStateChangedNativeEvent,
+} from 'react-native-pager-view';
+import useAnimatedValue from './useAnimatedValue';
+import type {
+  NavigationState,
+  Route,
+  Listener,
+  EventEmitterProps,
+  PagerProps,
+} from './types';
+
+const AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);
+
+type Props<T extends Route> = PagerProps & {
+  onIndexChange: (index: number) => void;
+  navigationState: NavigationState<T>;
+  children: (
+    props: EventEmitterProps & {
+      // Animated value which represents the state of current index
+      // It can include fractional digits as it represents the intermediate value
+      position: Animated.AnimatedInterpolation;
+      // Function to actually render the content of the pager
+      // The parent component takes care of rendering
+      render: (children: React.ReactNode) => React.ReactNode;
+      // Callback to call when switching the tab
+      // The tab switch animation is performed even if the index in state is unchanged
+      jumpTo: (key: string) => void;
+    }
+  ) => React.ReactElement;
+};
+
+export default function PagerViewAdapter<T extends Route>({
+  keyboardDismissMode = 'auto',
+  swipeEnabled = true,
+  navigationState,
+  onIndexChange,
+  onSwipeStart,
+  onSwipeEnd,
+  children,
+  style,
+  ...rest
+}: Props<T>) {
+  const { index } = navigationState;
+
+  const listenersRef = React.useRef<Listener[]>([]);
+
+  const pagerRef = React.useRef<ViewPager>();
+  const indexRef = React.useRef<number>(index);
+  const navigationStateRef = React.useRef(navigationState);
+
+  const position = useAnimatedValue(index);
+  const offset = useAnimatedValue(0);
+
+  React.useEffect(() => {
+    navigationStateRef.current = navigationState;
+  });
+
+  const jumpTo = React.useCallback((key: string) => {
+    const index = navigationStateRef.current.routes.findIndex(
+      (route: { key: string }) => route.key === key
+    );
+
+    pagerRef.current?.setPage(index);
+  }, []);
+
+  React.useEffect(() => {
+    if (keyboardDismissMode === 'auto') {
+      Keyboard.dismiss();
+    }
+
+    if (indexRef.current !== index) {
+      pagerRef.current?.setPage(index);
+    }
+  }, [keyboardDismissMode, index]);
+
+  const onPageScrollStateChanged = (
+    state: PageScrollStateChangedNativeEvent
+  ) => {
+    const { pageScrollState } = state.nativeEvent;
+
+    switch (pageScrollState) {
+      case 'idle':
+        onSwipeEnd?.();
+        return;
+      case 'dragging': {
+        const subscription = offset.addListener(({ value }) => {
+          const next =
+            index + (value > 0 ? Math.ceil(value) : Math.floor(value));
+
+          if (next !== index) {
+            listenersRef.current.forEach((listener) => listener(next));
+          }
+
+          offset.removeListener(subscription);
+        });
+
+        onSwipeStart?.();
+        return;
+      }
+    }
+  };
+
+  const addEnterListener = React.useCallback((listener: Listener) => {
+    listenersRef.current.push(listener);
+
+    return () => {
+      const index = listenersRef.current.indexOf(listener);
+
+      if (index > -1) {
+        listenersRef.current.splice(index, 1);
+      }
+    };
+  }, []);
+
+  return children({
+    position: Animated.add(position, offset),
+    addEnterListener,
+    jumpTo,
+    render: (children) => (
+      <AnimatedViewPager
+        {...rest}
+        ref={pagerRef}
+        style={[styles.container, style]}
+        initialPage={index}
+        keyboardDismissMode={
+          keyboardDismissMode === 'auto' ? 'on-drag' : keyboardDismissMode
+        }
+        onPageScroll={Animated.event(
+          [
+            {
+              nativeEvent: {
+                position: position,
+                offset: offset,
+              },
+            },
+          ],
+          { useNativeDriver: true }
+        )}
+        onPageSelected={(e) => {
+          const index = e.nativeEvent.position;
+          indexRef.current = index;
+          onIndexChange(index);
+        }}
+        onPageScrollStateChanged={onPageScrollStateChanged}
+        scrollEnabled={swipeEnabled}
+      >
+        {children}
+      </AnimatedViewPager>
+    ),
+  });
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/PanResponderAdapter.tsx

@@ -0,0 +1,331 @@
+import * as React from 'react';
+import {
+    Animated,
+    PanResponder,
+    Keyboard,
+    StyleSheet,
+    GestureResponderEvent,
+    PanResponderGestureState,
+    I18nManager,
+    View,
+} from 'react-native';
+import useAnimatedValue from './useAnimatedValue';
+import type {
+    NavigationState,
+    Route,
+    Layout,
+    EventEmitterProps,
+    PagerProps,
+    Listener,
+} from './types';
+
+type Props<T extends Route> = PagerProps & {
+    layout: Layout;
+    onIndexChange: (index: number) => void;
+    navigationState: NavigationState<T>;
+    children: (
+        props: EventEmitterProps & {
+            // Animated value which represents the state of current index
+            // It can include fractional digits as it represents the intermediate value
+            position: Animated.AnimatedInterpolation;
+            // Function to actually render the content of the pager
+            // The parent component takes care of rendering
+            render: (children: React.ReactNode) => React.ReactNode;
+            // Callback to call when switching the tab
+            // The tab switch animation is performed even if the index in state is unchanged
+            jumpTo: (key: string) => void;
+        },
+    ) => React.ReactElement;
+};
+
+const DEAD_ZONE = 12;
+
+const DefaultTransitionSpec = {
+    timing: Animated.spring,
+    stiffness: 1000,
+    damping: 500,
+    mass: 3,
+    overshootClamping: true,
+};
+
+export default function PanResponderAdapter<T extends Route>({
+    layout,
+    keyboardDismissMode = 'auto',
+    swipeEnabled = true,
+    navigationState,
+    onIndexChange,
+    onSwipeStart,
+    onSwipeEnd,
+    children,
+    style,
+}: Props<T>) {
+    const { routes, index } = navigationState;
+
+    const panX = useAnimatedValue(0);
+
+    const listenersRef = React.useRef<Listener[]>([]);
+
+    const navigationStateRef = React.useRef(navigationState);
+    const layoutRef = React.useRef(layout);
+    const onIndexChangeRef = React.useRef(onIndexChange);
+
+    const currentIndexRef = React.useRef(index);
+    const pendingIndexRef = React.useRef<number>();
+
+    const swipeVelocityThreshold = 0.15;
+    const swipeDistanceThreshold = layout.width / 1.75;
+
+    const jumpToIndex = React.useCallback(
+        (index: number) => {
+            const offset = -index * layoutRef.current.width;
+
+            const { timing, ...transitionConfig } = DefaultTransitionSpec;
+
+            Animated.parallel([
+                timing(panX, {
+                    ...transitionConfig,
+                    toValue: offset,
+                    useNativeDriver: false,
+                }),
+            ]).start(({ finished }) => {
+                if (finished) {
+                    onIndexChangeRef.current(index);
+                    pendingIndexRef.current = undefined;
+                }
+            });
+
+            pendingIndexRef.current = index;
+        },
+        [panX],
+    );
+
+    React.useEffect(() => {
+        navigationStateRef.current = navigationState;
+        layoutRef.current = layout;
+        onIndexChangeRef.current = onIndexChange;
+    });
+
+    React.useEffect(() => {
+        const offset = -navigationStateRef.current.index * layout.width;
+
+        panX.setValue(offset);
+    }, [layout.width, panX]);
+
+    React.useEffect(() => {
+        if (keyboardDismissMode === 'auto') {
+            Keyboard.dismiss();
+        }
+
+        if (layout.width && currentIndexRef.current !== index) {
+            currentIndexRef.current = index;
+            jumpToIndex(index);
+        }
+    }, [jumpToIndex, keyboardDismissMode, layout.width, index]);
+
+    const isMovingHorizontally = (
+        _: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+    ) => {
+        return (
+            Math.abs(gestureState.dx) > Math.abs(gestureState.dy * 2) &&
+            Math.abs(gestureState.vx) > Math.abs(gestureState.vy * 2)
+        );
+    };
+
+    const canMoveScreen = (
+        event: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+    ) => {
+        if (swipeEnabled === false) {
+            return false;
+        }
+
+        const diffX = I18nManager.isRTL ? -gestureState.dx : gestureState.dx;
+
+        return (
+            isMovingHorizontally(event, gestureState) &&
+            ((diffX >= DEAD_ZONE && currentIndexRef.current > 0) ||
+                (diffX <= -DEAD_ZONE &&
+                    currentIndexRef.current < routes.length - 1))
+        );
+    };
+
+    const startGesture = () => {
+        onSwipeStart?.();
+
+        if (keyboardDismissMode === 'on-drag') {
+            Keyboard.dismiss();
+        }
+
+        panX.stopAnimation();
+        // @ts-expect-error: _value is private, but docs use it as well
+        panX.setOffset(panX._value);
+    };
+
+    const respondToGesture = (
+        _: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+    ) => {
+        const diffX = I18nManager.isRTL ? -gestureState.dx : gestureState.dx;
+
+        if (
+            // swiping left
+            (diffX > 0 && index <= 0) ||
+            // swiping right
+            (diffX < 0 && index >= routes.length - 1)
+        ) {
+            return;
+        }
+
+        if (layout.width) {
+            // @ts-expect-error: _offset is private, but docs use it as well
+            const position = (panX._offset + diffX) / -layout.width;
+            const next =
+                position > index ? Math.ceil(position) : Math.floor(position);
+
+            if (next !== index) {
+                listenersRef.current.forEach((listener) => listener(next));
+            }
+        }
+
+        panX.setValue(diffX);
+    };
+
+    const finishGesture = (
+        _: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+    ) => {
+        panX.flattenOffset();
+
+        onSwipeEnd?.();
+
+        const currentIndex =
+            typeof pendingIndexRef.current === 'number'
+                ? pendingIndexRef.current
+                : currentIndexRef.current;
+
+        let nextIndex = currentIndex;
+
+        if (
+            Math.abs(gestureState.dx) > Math.abs(gestureState.dy) &&
+            Math.abs(gestureState.vx) > Math.abs(gestureState.vy) &&
+            (Math.abs(gestureState.dx) > swipeDistanceThreshold ||
+                Math.abs(gestureState.vx) > swipeVelocityThreshold)
+        ) {
+            nextIndex = Math.round(
+                Math.min(
+                    Math.max(
+                        0,
+                        I18nManager.isRTL
+                            ? currentIndex +
+                                  gestureState.dx / Math.abs(gestureState.dx)
+                            : currentIndex -
+                                  gestureState.dx / Math.abs(gestureState.dx),
+                    ),
+                    routes.length - 1,
+                ),
+            );
+
+            currentIndexRef.current = nextIndex;
+        }
+
+        if (!isFinite(nextIndex)) {
+            nextIndex = currentIndex;
+        }
+
+        jumpToIndex(nextIndex);
+    };
+
+    // TODO: use the listeners
+    const addEnterListener = React.useCallback((listener: Listener) => {
+        listenersRef.current.push(listener);
+
+        return () => {
+            const index = listenersRef.current.indexOf(listener);
+
+            if (index > -1) {
+                listenersRef.current.splice(index, 1);
+            }
+        };
+    }, []);
+
+    const jumpTo = React.useCallback(
+        (key: string) => {
+            const index = navigationStateRef.current.routes.findIndex(
+                (route: { key: string }) => route.key === key,
+            );
+
+            jumpToIndex(index);
+        },
+        [jumpToIndex],
+    );
+
+    const panResponder = PanResponder.create({
+        onMoveShouldSetPanResponder: canMoveScreen,
+        onMoveShouldSetPanResponderCapture: canMoveScreen,
+        onPanResponderGrant: startGesture,
+        onPanResponderMove: respondToGesture,
+        onPanResponderTerminate: finishGesture,
+        onPanResponderRelease: finishGesture,
+        onPanResponderTerminationRequest: () => true,
+    });
+
+    const maxTranslate = layout.width * (routes.length - 1);
+    const translateX = Animated.multiply(
+        panX.interpolate({
+            inputRange: [-maxTranslate, 0],
+            outputRange: [-maxTranslate, 0],
+            extrapolate: 'clamp',
+        }),
+        I18nManager.isRTL ? -1 : 1,
+    );
+
+    return children({
+        position: layout.width
+            ? Animated.divide(panX, -layout.width)
+            : new Animated.Value(index),
+        addEnterListener,
+        jumpTo,
+        render: (children) => (
+            <Animated.View
+                style={[
+                    styles.sheet,
+                    layout.width
+                        ? {
+                              width: routes.length * layout.width,
+                              transform: [{ translateX }],
+                          }
+                        : null,
+                    style,
+                ]}
+                {...panResponder.panHandlers}>
+                {React.Children.map(children, (child, i) => {
+                    const route = routes[i];
+                    const focused = i === index;
+
+                    return (
+                        <View
+                            key={route.key}
+                            style={
+                                layout.width
+                                    ? { width: layout.width }
+                                    : focused
+                                    ? StyleSheet.absoluteFill
+                                    : null
+                            }>
+                            {focused || layout.width ? child : null}
+                        </View>
+                    );
+                })}
+            </Animated.View>
+        ),
+    });
+}
+
+const styles = StyleSheet.create({
+    sheet: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'stretch',
+    },
+});

package/PlatformPressable.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Platform, Pressable, PressableProps } from 'react-native';
+
+export type Props = PressableProps & {
+    pressColor?: string;
+    pressOpacity?: number;
+    children: React.ReactNode;
+};
+
+const ANDROID_VERSION_LOLLIPOP = 21;
+const ANDROID_SUPPORTS_RIPPLE =
+    Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP;
+
+/**
+ * PlatformPressable provides an abstraction on top of TouchableNativeFeedback and
+ * TouchableOpacity to handle platform differences.
+ *
+ * On Android, you can pass the props of TouchableNativeFeedback.
+ * On other platforms, you can pass the props of TouchableOpacity.
+ */
+export default function PlatformPressable({
+    android_ripple,
+    pressColor = 'rgba(0, 0, 0, .32)',
+    pressOpacity,
+    style,
+    ...rest
+}: Props) {
+    return (
+        <Pressable
+            android_ripple={
+                ANDROID_SUPPORTS_RIPPLE
+                    ? { color: pressColor, ...android_ripple }
+                    : undefined
+            }
+            style={({ pressed }) => [
+                {
+                    opacity:
+                        pressed && !ANDROID_SUPPORTS_RIPPLE ? pressOpacity : 1,
+                },
+                typeof style === 'function' ? style({ pressed }) : style,
+            ]}
+            {...rest}
+        />
+    );
+}

package/SceneMap.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { SceneRendererProps } from './types';
+
+class SceneComponent<
+  T extends { component: React.ComponentType<any> }
+> extends React.PureComponent<T> {
+  render() {
+    const { component, ...rest } = this.props;
+    return React.createElement(component, rest);
+  }
+}
+
+export default function SceneMap<T extends any>(scenes: {
+  [key: string]: React.ComponentType<T>;
+}) {
+  return ({ route, jumpTo, position }: SceneRendererProps & { route: any }) => (
+    <SceneComponent
+      key={route.key}
+      component={scenes[route.key]}
+      route={route}
+      jumpTo={jumpTo}
+      position={position}
+    />
+  );
+}

package/SceneView.tsx

@@ -0,0 +1,142 @@
+import * as React from 'react';
+import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import type {
+  SceneRendererProps,
+  EventEmitterProps,
+  NavigationState,
+  Route,
+} from './types';
+
+type Props<T extends Route> = SceneRendererProps &
+  EventEmitterProps & {
+    navigationState: NavigationState<T>;
+    lazy: boolean;
+    lazyPreloadDistance: number;
+    index: number;
+    children: (props: { loading: boolean }) => React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+  };
+
+type State = {
+  loading: boolean;
+};
+
+export default class SceneView<T extends Route> extends React.Component<
+  Props<T>,
+  State
+> {
+  static getDerivedStateFromProps(props: Props<Route>, state: State) {
+    if (
+      state.loading &&
+      Math.abs(props.navigationState.index - props.index) <=
+        props.lazyPreloadDistance
+    ) {
+      // Always render the route when it becomes focused
+      return { loading: false };
+    }
+
+    return null;
+  }
+
+  state = {
+    loading:
+      Math.abs(this.props.navigationState.index - this.props.index) >
+      this.props.lazyPreloadDistance,
+  };
+
+  componentDidMount() {
+    if (this.props.lazy) {
+      // If lazy mode is enabled, listen to when we enter screens
+      this.unsubscribe = this.props.addEnterListener(this.handleEnter);
+    } else if (this.state.loading) {
+      // If lazy mode is not enabled, render the scene with a delay if not loaded already
+      // This improves the initial startup time as the scene is no longer blocking
+      this.timerHandler = setTimeout(
+        () => this.setState({ loading: false }),
+        0
+      );
+    }
+  }
+
+  componentDidUpdate(prevProps: Props<T>, prevState: State) {
+    if (
+      this.props.lazy !== prevProps.lazy ||
+      this.state.loading !== prevState.loading
+    ) {
+      // We only need the listener if the tab hasn't loaded yet and lazy is enabled
+      if (this.props.lazy && this.state.loading) {
+        this.unsubscribe?.();
+        this.unsubscribe = this.props.addEnterListener(this.handleEnter);
+      } else {
+        this.unsubscribe?.();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe?.();
+
+    if (this.timerHandler) {
+      clearTimeout(this.timerHandler);
+      this.timerHandler = undefined;
+    }
+  }
+
+  private timerHandler: NodeJS.Timeout | undefined;
+
+  private unsubscribe: (() => void) | null = null;
+
+  private handleEnter = (value: number) => {
+    const { index } = this.props;
+
+    // If we're entering the current route, we need to load it
+    if (value === index) {
+      this.setState((prevState) => {
+        if (prevState.loading) {
+          return { loading: false };
+        }
+
+        return null;
+      });
+    }
+  };
+
+  render() {
+    const { navigationState, index, layout, style } = this.props;
+    const { loading } = this.state;
+
+    const focused = navigationState.index === index;
+
+    return (
+      <View
+        accessibilityElementsHidden={!focused}
+        importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+        style={[
+          styles.route,
+          // If we don't have the layout yet, make the focused screen fill the container
+          // This avoids delay before we are able to render pages side by side
+          layout.width
+            ? { width: layout.width }
+            : focused
+            ? StyleSheet.absoluteFill
+            : null,
+          style,
+        ]}
+      >
+        {
+          // Only render the route only if it's either focused or layout is available
+          // When layout is not available, we must not render unfocused routes
+          // so that the focused route can fill the screen
+          focused || layout.width ? this.props.children({ loading }) : null
+        }
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  route: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+});