@amazon-devices/react-navigation__react-native-tab-view 2.0.1758683737

package/src/SceneMap.tsx

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

package/src/SceneView.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import type {
+  EventEmitterProps,
+  NavigationState,
+  Route,
+  SceneRendererProps,
+} 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>;
+  };
+
+export default function SceneView<T extends Route>({
+  children,
+  navigationState,
+  lazy,
+  layout,
+  index,
+  lazyPreloadDistance,
+  addEnterListener,
+  style,
+}: Props<T>) {
+  const [isLoading, setIsLoading] = React.useState(
+    Math.abs(navigationState.index - index) > lazyPreloadDistance
+  );
+
+  if (
+    isLoading &&
+    Math.abs(navigationState.index - index) <= lazyPreloadDistance
+  ) {
+    // Always render the route when it becomes focused
+    setIsLoading(false);
+  }
+
+  React.useEffect(() => {
+    const handleEnter = (value: number) => {
+      // If we're entering the current route, we need to load it
+      if (value === index) {
+        setIsLoading((prevState) => {
+          if (prevState) {
+            return false;
+          }
+          return prevState;
+        });
+      }
+    };
+
+    let unsubscribe: (() => void) | undefined;
+    let timer: NodeJS.Timeout;
+
+    if (lazy && isLoading) {
+      // If lazy mode is enabled, listen to when we enter screens
+      unsubscribe = addEnterListener(handleEnter);
+    } else if (isLoading) {
+      // 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
+      timer = setTimeout(() => setIsLoading(false), 0);
+    }
+
+    return () => {
+      unsubscribe?.();
+      clearTimeout(timer);
+    };
+  }, [addEnterListener, index, isLoading, lazy]);
+
+  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 ? children({ loading: isLoading }) : null
+      }
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  route: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+});