@zoverdoser/react-native-tab-view 1.0.0

package/src/TabView.tsx

@@ -0,0 +1,198 @@
+import * as React from 'react';
+import {
+  I18nManager,
+  type LayoutChangeEvent,
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { Pager } from './Pager';
+import { SceneView } from './SceneView';
+import { TabBar } from './TabBar';
+import type {
+  Layout,
+  LocaleDirection,
+  NavigationState,
+  PagerProps,
+  Route,
+  SceneRendererProps,
+  TabDescriptor,
+} from './types';
+
+export type Props<T extends Route> = Omit<PagerProps, 'layoutDirection'> & {
+  onIndexChange: (index: number) => void;
+  onTabSelect?: (props: { index: number }) => void;
+  navigationState: NavigationState<T>;
+  renderLazyPlaceholder?: (props: { route: T }) => React.ReactNode;
+  renderTabBar?: (
+    props: SceneRendererProps & {
+      navigationState: NavigationState<T>;
+      options: Record<string, TabDescriptor<T>> | undefined;
+    }
+  ) => React.ReactNode;
+  tabBarPosition?: 'top' | 'bottom';
+  initialLayout?: Partial<Layout>;
+  lazy?: ((props: { route: T }) => boolean) | boolean;
+  lazyPreloadDistance?: number;
+  direction?: LocaleDirection;
+  pagerStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+  renderScene: (props: SceneRendererProps & { route: T }) => React.ReactNode;
+  options?: Record<string, TabDescriptor<T>>;
+  commonOptions?: TabDescriptor<T>;
+};
+
+const renderLazyPlaceholderDefault = () => null;
+
+export function TabView<T extends Route>({
+  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) => <TabBar {...props} />,
+  pagerStyle,
+  style,
+  direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
+  swipeEnabled = true,
+  tabBarPosition = 'top',
+  animationEnabled = true,
+  overScrollMode,
+  options: sceneOptions,
+  commonOptions,
+}: Props<T>) {
+  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: number) => {
+    if (index !== navigationState.index) {
+      onIndexChange(index);
+    }
+  };
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    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 (
+    <View onLayout={handleLayout} style={[styles.pager, style]}>
+      <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}
+      >
+        {({ 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 (
+            <React.Fragment>
+              {tabBarPosition === 'top' &&
+                renderTabBar({
+                  ...sceneRendererProps,
+                  options,
+                  navigationState,
+                })}
+              {render(
+                navigationState.routes.map((route, i) => {
+                  const { sceneStyle } = options?.[route.key] ?? {};
+
+                  return (
+                    <SceneView
+                      key={route.key}
+                      {...sceneRendererProps}
+                      addEnterListener={addEnterListener}
+                      index={i}
+                      lazy={typeof lazy === 'function' ? lazy({ route }) : lazy}
+                      lazyPreloadDistance={lazyPreloadDistance}
+                      navigationState={navigationState}
+                      style={sceneStyle}
+                    >
+                      {({ loading }) =>
+                        loading
+                          ? renderLazyPlaceholder({ route })
+                          : renderScene({
+                              ...sceneRendererProps,
+                              route,
+                            })
+                      }
+                    </SceneView>
+                  );
+                })
+              )}
+              {tabBarPosition === 'bottom' &&
+                renderTabBar({
+                  ...sceneRendererProps,
+                  options,
+                  navigationState,
+                })}
+            </React.Fragment>
+          );
+        }}
+      </Pager>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  pager: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+});

package/src/index.tsx

@@ -0,0 +1,16 @@
+export { SceneMap } from './SceneMap';
+export type { Props as TabBarProps } from './TabBar';
+export { TabBar } from './TabBar';
+export type { Props as TabBarIndicatorProps } from './TabBarIndicator';
+export { TabBarIndicator } from './TabBarIndicator';
+export type { Props as TabBarItemProps } from './TabBarItem';
+export { TabBarItem } from './TabBarItem';
+export type { Props as TabViewProps } from './TabView';
+export { TabView } from './TabView';
+export type {
+  AnimatedStyles,
+  NavigationState,
+  Route,
+  SceneRendererProps,
+  TabDescriptor,
+} from './types';

package/src/types.tsx

@@ -0,0 +1,94 @@
+import type { Animated, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { PagerViewProps } from 'react-native-pager-view';
+import type { AnimatedStyle } from 'react-native-reanimated';
+
+export type TabDescriptor<T extends Route> = {
+  accessibilityLabel?: string;
+  accessible?: boolean;
+  testID?: string;
+  labelText?: string;
+  labelAllowFontScaling?: boolean;
+  href?: string;
+  label?: (props: {
+    route: T;
+    labelText?: string;
+    focused: boolean;
+    allowFontScaling?: boolean;
+    style?: StyleProp<TextStyle>;
+    animatedStyles?: AnimatedStyle<TextStyle>;
+  }) => React.ReactNode;
+  labelStyle?: StyleProp<TextStyle>;
+  icon?: (props: {
+    route: T;
+    focused: boolean;
+    color: string;
+    size: number;
+  }) => React.ReactNode;
+  badge?: (props: { route: T }) => React.ReactElement;
+  sceneStyle?: StyleProp<ViewStyle>;
+};
+
+export type LocaleDirection = 'ltr' | 'rtl';
+
+export type Route = {
+  key: string;
+  icon?: string;
+  title?: string;
+  accessible?: boolean;
+  accessibilityLabel?: string;
+  testID?: string;
+};
+
+export type Event = {
+  defaultPrevented: boolean;
+  preventDefault(): void;
+};
+
+export type Scene<T extends Route> = {
+  route: T;
+};
+
+export type NavigationState<T extends Route> = {
+  index: number;
+  routes: T[];
+};
+
+export type Layout = {
+  width: number;
+  height: number;
+};
+
+export type Listener = (value: number) => void;
+
+export type SceneRendererProps = {
+  layout: Layout;
+  position: Animated.AnimatedInterpolation<number>;
+  jumpTo: (key: string) => void;
+};
+
+export type EventEmitterProps = {
+  addEnterListener: (listener: Listener) => () => void;
+};
+
+export type PagerProps = Omit<
+  PagerViewProps,
+  | 'initialPage'
+  | 'scrollEnabled'
+  | 'onPageScroll'
+  | 'onPageSelected'
+  | 'onPageScrollStateChanged'
+  | 'keyboardDismissMode'
+  | 'children'
+> & {
+  keyboardDismissMode?: 'none' | 'on-drag' | 'auto';
+  swipeEnabled?: boolean;
+  animationEnabled?: boolean;
+  onSwipeStart?: () => void;
+  onSwipeEnd?: () => void;
+};
+
+export type AnimatedStyles = {
+  color?: [string, string];
+  opacity?: [number, number];
+  scale?: [number, number];
+};

package/src/useAnimatedValue.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Animated } from 'react-native';
+
+export function useAnimatedValue(initialValue: number) {
+  const lazyRef = React.useRef<Animated.Value>(undefined);
+
+  if (lazyRef.current === undefined) {
+    lazyRef.current = new Animated.Value(initialValue);
+  }
+
+  return lazyRef.current as Animated.Value;
+}