@amazon-devices/react-navigation__react-native-tab-view 8.0.9000000000 → 8.0.9000000002

package/lib/module/TabBarItem.js

@@ -1,217 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-import { Animated, Platform, StyleSheet, View } from 'react-native';
-import useLatestCallback from 'use-latest-callback';
-import { PlatformPressable } from "./PlatformPressable.js";
-import { TabBarItemLabel } from "./TabBarItemLabel.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';
-const DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';
-const ICON_SIZE = 24;
-const getActiveOpacity = (position, routesLength, tabIndex) => {
-  if (routesLength > 1) {
-    const inputRange = Array.from({
-      length: routesLength
-    }, (_, i) => i);
-    return position.interpolate({
-      inputRange,
-      outputRange: inputRange.map(i => i === tabIndex ? 1 : 0)
-    });
-  } else {
-    return 1;
-  }
-};
-const getInactiveOpacity = (position, routesLength, tabIndex) => {
-  if (routesLength > 1) {
-    const inputRange = Array.from({
-      length: routesLength
-    }, (_, i) => i);
-    return position.interpolate({
-      inputRange,
-      outputRange: inputRange.map(i => i === tabIndex ? 0 : 1)
-    });
-  } else {
-    return 0;
-  }
-};
-const ANDROID_RIPPLE_DEFAULT = {
-  borderless: true
-};
-const TabBarItemInternal = ({
-  accessibilityLabel,
-  accessible,
-  label: customlabel,
-  testID,
-  onLongPress,
-  onPress,
-  isFocused,
-  position,
-  style,
-  inactiveColor: inactiveColorCustom,
-  activeColor: activeColorCustom,
-  labelStyle,
-  onLayout,
-  index: tabIndex,
-  pressColor,
-  pressOpacity,
-  defaultTabWidth,
-  icon: customIcon,
-  badge: customBadge,
-  href,
-  labelText,
-  routesLength,
-  android_ripple = ANDROID_RIPPLE_DEFAULT,
-  labelAllowFontScaling,
-  route
-}) => {
-  const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;
-  const activeColor = activeColorCustom !== undefined ? activeColorCustom : typeof labelColorFromStyle === 'string' ? labelColorFromStyle : DEFAULT_ACTIVE_COLOR;
-  const inactiveColor = inactiveColorCustom !== undefined ? inactiveColorCustom : typeof labelColorFromStyle === 'string' ? labelColorFromStyle : DEFAULT_INACTIVE_COLOR;
-  const activeOpacity = getActiveOpacity(position, routesLength, tabIndex);
-  const inactiveOpacity = getInactiveOpacity(position, routesLength, tabIndex);
-  const icon = React.useMemo(() => {
-    if (!customIcon) {
-      return null;
-    }
-    const inactiveIcon = customIcon({
-      focused: false,
-      color: inactiveColor,
-      size: ICON_SIZE,
-      route
-    });
-    const activeIcon = customIcon({
-      focused: true,
-      color: activeColor,
-      size: ICON_SIZE,
-      route
-    });
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.icon,
-      children: [/*#__PURE__*/_jsx(Animated.View, {
-        style: {
-          opacity: inactiveOpacity
-        },
-        children: inactiveIcon
-      }), /*#__PURE__*/_jsx(Animated.View, {
-        style: [StyleSheet.absoluteFill, {
-          opacity: activeOpacity
-        }],
-        children: activeIcon
-      })]
-    });
-  }, [activeColor, activeOpacity, customIcon, inactiveColor, inactiveOpacity, route]);
-  const renderLabel = React.useCallback(focused => customlabel ? customlabel({
-    focused,
-    color: focused ? activeColor : inactiveColor,
-    style: labelStyle,
-    labelText,
-    allowFontScaling: labelAllowFontScaling,
-    route
-  }) : /*#__PURE__*/_jsx(TabBarItemLabel, {
-    color: focused ? activeColor : inactiveColor,
-    icon: icon,
-    label: labelText,
-    style: labelStyle
-  }), [customlabel, activeColor, labelStyle, labelText, labelAllowFontScaling, route, inactiveColor, icon]);
-  const tabStyle = StyleSheet.flatten(style);
-  const isWidthSet = tabStyle?.width !== undefined;
-  const tabContainerStyle = isWidthSet ? null : {
-    width: defaultTabWidth
-  };
-  const ariaLabel = typeof accessibilityLabel !== 'undefined' ? accessibilityLabel : labelText;
-  return /*#__PURE__*/_jsx(PlatformPressable, {
-    android_ripple: android_ripple,
-    testID: testID,
-    accessible: accessible,
-    role: "tab",
-    "aria-label": ariaLabel,
-    "aria-selected": isFocused,
-    pressColor: pressColor,
-    pressOpacity: pressOpacity,
-    unstable_pressDelay: 0,
-    onLayout: onLayout,
-    onPress: onPress,
-    onLongPress: onLongPress,
-    href: href,
-    style: [styles.pressable, tabContainerStyle],
-    children: /*#__PURE__*/_jsxs(View, {
-      pointerEvents: "none",
-      style: [styles.item, tabStyle],
-      children: [icon, /*#__PURE__*/_jsxs(View, {
-        children: [/*#__PURE__*/_jsx(Animated.View, {
-          style: {
-            opacity: inactiveOpacity
-          },
-          children: renderLabel(false)
-        }), /*#__PURE__*/_jsx(Animated.View, {
-          style: [StyleSheet.absoluteFill, {
-            opacity: activeOpacity
-          }],
-          children: renderLabel(true)
-        })]
-      }), customBadge != null ? /*#__PURE__*/_jsx(View, {
-        style: styles.badge,
-        children: customBadge({
-          route
-        })
-      }) : null]
-    })
-  });
-};
-const MemoizedTabBarItemInternal = /*#__PURE__*/React.memo(TabBarItemInternal);
-export function TabBarItem(props) {
-  const {
-    onPress,
-    onLongPress,
-    onLayout,
-    navigationState,
-    route,
-    ...rest
-  } = props;
-  const onPressLatest = useLatestCallback(onPress);
-  const onLongPressLatest = useLatestCallback(onLongPress);
-  const onLayoutLatest = useLatestCallback(onLayout ? onLayout : () => {});
-  const tabIndex = navigationState.routes.indexOf(route);
-  return /*#__PURE__*/_jsx(MemoizedTabBarItemInternal, {
-    ...rest,
-    onPress: onPressLatest,
-    onLayout: onLayoutLatest,
-    onLongPress: onLongPressLatest,
-    isFocused: navigationState.index === tabIndex,
-    route: route,
-    index: tabIndex,
-    routesLength: navigationState.routes.length
-  });
-}
-const styles = StyleSheet.create({
-  icon: {
-    margin: 2
-  },
-  item: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 10,
-    minHeight: 48
-  },
-  badge: {
-    position: 'absolute',
-    top: 0,
-    end: 0
-  },
-  pressable: {
-    // The label is not pressable on Windows
-    // Adding backgroundColor: 'transparent' seems to fix it
-    backgroundColor: 'transparent',
-    ...Platform.select({
-      // Roundness for iPad hover effect
-      ios: {
-        borderRadius: 10,
-        borderCurve: 'continuous'
-      },
-      default: null
-    })
-  }
-});
-//# sourceMappingURL=TabBarItem.js.map

package/lib/module/TabBarItemLabel.js

@@ -1,33 +0,0 @@
-"use strict";
-
-import React from 'react';
-import { Animated, StyleSheet } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const TabBarItemLabel = /*#__PURE__*/React.memo(({
-  color,
-  label,
-  style,
-  icon
-}) => {
-  if (!label) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(Animated.Text, {
-    style: [styles.label, icon ? {
-      marginTop: 0
-    } : null, style, {
-      color: color
-    }],
-    children: label
-  });
-});
-TabBarItemLabel.displayName = 'TabBarItemLabel';
-const styles = StyleSheet.create({
-  label: {
-    margin: 4,
-    fontSize: 14,
-    fontWeight: '500',
-    backgroundColor: 'transparent'
-  }
-});
-//# sourceMappingURL=TabBarItemLabel.js.map

package/lib/module/TabView.js

@@ -1,141 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-import { I18nManager, Platform, StyleSheet, View } from 'react-native';
-import { Pager } from './Pager';
-import { SceneView } from "./SceneView.js";
-import { TabBar } from "./TabBar.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const renderLazyPlaceholderDefault = () => null;
-export function TabView({
-  onIndexChange,
-  onTabSelect,
-  navigationState,
-  renderScene,
-  initialLayout,
-  keyboardDismissMode = 'auto',
-  lazy = false,
-  lazyPreloadDistance = 0,
-  onSwipeStart,
-  onSwipeEnd,
-  renderLazyPlaceholder = renderLazyPlaceholderDefault,
-  // eslint-disable-next-line @eslint-react/no-unstable-default-props
-  renderTabBar = props => /*#__PURE__*/_jsx(TabBar, {
-    ...props
-  }),
-  pagerStyle,
-  style,
-  direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
-  swipeEnabled = true,
-  tabBarPosition = 'top',
-  animationEnabled = true,
-  overScrollMode,
-  options: sceneOptions,
-  commonOptions
-}) {
-  if (Platform.OS !== 'web' && direction !== (I18nManager.getConstants().isRTL ? 'rtl' : 'ltr')) {
-    console.warn(`The 'direction' prop is set to '${direction}' but the effective value is '${I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}'. This is not supported. Make sure to match the 'direction' prop with the writing direction of the app.`);
-  }
-  const [layout, setLayout] = React.useState({
-    width: 0,
-    height: 0,
-    ...initialLayout
-  });
-  const jumpToIndex = index => {
-    if (index !== navigationState.index) {
-      onIndexChange(index);
-    }
-  };
-  const handleLayout = e => {
-    const {
-      height,
-      width
-    } = e.nativeEvent.layout;
-    setLayout(prevLayout => {
-      if (prevLayout.width === width && prevLayout.height === height) {
-        return prevLayout;
-      }
-      return {
-        height,
-        width
-      };
-    });
-  };
-  const options = Object.fromEntries(navigationState.routes.map(route => [route.key, {
-    ...commonOptions,
-    ...sceneOptions?.[route.key]
-  }]));
-  return /*#__PURE__*/_jsx(View, {
-    onLayout: handleLayout,
-    style: [styles.pager, style],
-    children: /*#__PURE__*/_jsx(Pager, {
-      layout: layout,
-      navigationState: navigationState,
-      keyboardDismissMode: keyboardDismissMode,
-      swipeEnabled: swipeEnabled,
-      onSwipeStart: onSwipeStart,
-      onSwipeEnd: onSwipeEnd,
-      onIndexChange: jumpToIndex,
-      onTabSelect: onTabSelect,
-      animationEnabled: animationEnabled,
-      overScrollMode: overScrollMode,
-      style: pagerStyle,
-      layoutDirection: direction,
-      children: ({
-        position,
-        render,
-        addEnterListener,
-        jumpTo
-      }) => {
-        // All the props here must not change between re-renders
-        // This is crucial to optimizing the routes with PureComponent
-        const sceneRendererProps = {
-          position,
-          layout,
-          jumpTo
-        };
-        return /*#__PURE__*/_jsxs(React.Fragment, {
-          children: [tabBarPosition === 'top' && renderTabBar({
-            ...sceneRendererProps,
-            options,
-            navigationState
-          }), render(navigationState.routes.map((route, i) => {
-            const {
-              sceneStyle
-            } = options?.[route.key] ?? {};
-            return /*#__PURE__*/_jsx(SceneView, {
-              ...sceneRendererProps,
-              addEnterListener: addEnterListener,
-              index: i,
-              lazy: typeof lazy === 'function' ? lazy({
-                route
-              }) : lazy,
-              lazyPreloadDistance: lazyPreloadDistance,
-              navigationState: navigationState,
-              style: sceneStyle,
-              children: ({
-                loading
-              }) => loading ? renderLazyPlaceholder({
-                route
-              }) : renderScene({
-                ...sceneRendererProps,
-                route
-              })
-            }, route.key);
-          })), tabBarPosition === 'bottom' && renderTabBar({
-            ...sceneRendererProps,
-            options,
-            navigationState
-          })]
-        });
-      }
-    })
-  });
-}
-const styles = StyleSheet.create({
-  pager: {
-    flex: 1,
-    overflow: 'hidden'
-  }
-});
-//# sourceMappingURL=TabView.js.map

package/lib/module/types.js

@@ -1,4 +0,0 @@
-"use strict";
-
-export {};
-//# sourceMappingURL=types.js.map

package/lib/module/useAnimatedValue.js

@@ -1,12 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-import { Animated } from 'react-native';
-export function useAnimatedValue(initialValue) {
-  const lazyRef = React.useRef(undefined);
-  if (lazyRef.current === undefined) {
-    lazyRef.current = new Animated.Value(initialValue);
-  }
-  return lazyRef.current;
-}
-//# sourceMappingURL=useAnimatedValue.js.map

package/src/Pager.android.tsx

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

package/src/Pager.ios.tsx

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

package/src/Pager.tsx

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

package/src/PagerViewAdapter.tsx

@@ -1,185 +0,0 @@
-import * as React from 'react';
-import { Animated, Keyboard, Platform, StyleSheet } from 'react-native';
-import ViewPager, {
-  type PageScrollStateChangedNativeEvent,
-} from 'react-native-pager-view';
-import useLatestCallback from 'use-latest-callback';
-
-import type {
-  EventEmitterProps,
-  Listener,
-  NavigationState,
-  PagerProps,
-  Route,
-} from './types';
-import { useAnimatedValue } from './useAnimatedValue';
-
-const AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);
-
-type Props<T extends Route> = PagerProps & {
-  onIndexChange: (index: number) => void;
-  onTabSelect?: (props: { 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<number>;
-      // 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 useNativeDriver = Platform.OS !== 'web';
-
-export function PagerViewAdapter<T extends Route>({
-  keyboardDismissMode = 'auto',
-  swipeEnabled = true,
-  navigationState,
-  onIndexChange,
-  onTabSelect,
-  onSwipeStart,
-  onSwipeEnd,
-  children,
-  style,
-  animationEnabled,
-  ...rest
-}: Props<T>) {
-  const { index } = navigationState;
-
-  const listenersRef = React.useRef<Listener[]>([]);
-
-  const pagerRef = React.useRef<ViewPager>(null);
-  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 = useLatestCallback((key: string) => {
-    const index = navigationStateRef.current.routes.findIndex(
-      (route: { key: string }) => route.key === key
-    );
-
-    if (animationEnabled) {
-      pagerRef.current?.setPage(index);
-    } else {
-      pagerRef.current?.setPageWithoutAnimation(index);
-      position.setValue(index);
-    }
-
-    onIndexChange(index);
-  });
-
-  React.useEffect(() => {
-    if (keyboardDismissMode === 'auto') {
-      Keyboard.dismiss();
-    }
-
-    if (indexRef.current !== index) {
-      if (animationEnabled) {
-        pagerRef.current?.setPage(index);
-      } else {
-        pagerRef.current?.setPageWithoutAnimation(index);
-        position.setValue(index);
-      }
-    }
-  }, [keyboardDismissMode, index, animationEnabled, position]);
-
-  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 = useLatestCallback((listener: Listener) => {
-    listenersRef.current.push(listener);
-
-    return () => {
-      const index = listenersRef.current.indexOf(listener);
-
-      if (index > -1) {
-        listenersRef.current.splice(index, 1);
-      }
-    };
-  });
-
-  const memoizedPosition = React.useMemo(
-    () => Animated.add(position, offset),
-    [offset, position]
-  );
-
-  return children({
-    position: memoizedPosition,
-    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 }
-        )}
-        onPageSelected={(e) => {
-          const index = e.nativeEvent.position;
-          indexRef.current = index;
-          onIndexChange(index);
-          onTabSelect?.({ index });
-        }}
-        onPageScrollStateChanged={onPageScrollStateChanged}
-        scrollEnabled={swipeEnabled}
-      >
-        {children}
-      </AnimatedViewPager>
-    ),
-  });
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});