From 36a7d530d81273cc1f894fa6afae43bfd5897a0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oskar=20Kwas=CC=81niewski?= <oskarkwasniewski@icloud.com>
Date: Tue, 1 Oct 2024 09:14:18 +0200
Subject: [PATCH] feat: introduce new API

---
 README.md                          |  43 +++++----
 example/src/Examples/FourTabs.tsx  |  67 ++++++--------
 example/src/Examples/ThreeTabs.tsx |  59 +++++-------
 example/src/Screens/Article.tsx    |  11 ++-
 package.json                       |   3 +
 src/SceneMap.tsx                   |  34 +++++++
 src/TabView.android.tsx            |  54 -----------
 src/TabView.tsx                    | 138 +++++++++++++++++++++++------
 src/TabViewAdapter.android.tsx     |  30 +++++++
 src/TabViewAdapter.tsx             |   7 ++
 src/index.tsx                      |   2 +
 yarn.lock                          |   1 +
 12 files changed, 268 insertions(+), 181 deletions(-)
 create mode 100644 src/SceneMap.tsx
 delete mode 100644 src/TabView.android.tsx
 create mode 100644 src/TabViewAdapter.android.tsx
 create mode 100644 src/TabViewAdapter.tsx

diff --git a/README.md b/README.md
index 620f0471..135a4d99 100644
--- a/README.md
+++ b/README.md
@@ -21,28 +21,33 @@ yarn add react-native-bottom-tabs
 
 
 ```tsx
-import { TabView } from "react-native-bottom-tabs";
-
-const items: TabViewItems = [
-  { key: 'article', title: 'Article', icon: 'document.fill' },
-  { key: 'albums', title: 'Albums', icon: 'square.grid.2x2.fill', badge: '3' },
-  { key: 'contacts', title: 'Contacts', icon: 'person.fill' },
-];
-
-export default function App() {
-  const [selectedPage, setSelectedTab] = useState<string>('contacts');
+import TabView, { SceneMap } from 'react-native-bottom-tabs';
+
+export default function ThreeTabs() {
+  const [index, setIndex] = useState(0);
+  const [routes] = useState([
+    { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' },
+    {
+      key: 'albums',
+      title: 'Albums',
+      icon: 'square.grid.2x2.fill',
+      badge: '5',
+    },
+    { key: 'contacts', title: 'Contacts', icon: 'person.fill' },
+  ]);
+
+  const renderScene = SceneMap({
+    article: Article,
+    albums: Albums,
+    contacts: Contacts,
+  });
 
   return (
     <TabView
-      style={styles.fullWidth}
-      items={items}
-      selectedPage={selectedPage}
-      onPageSelected={handlePageSelected}
-    >
-      <View/>
-      <View/>
-      <View/>
-    </TabView>
+      navigationState={{ index, routes }}
+      onIndexChange={setIndex}
+      renderScene={renderScene}
+    />
   );
 }
 ```
diff --git a/example/src/Examples/FourTabs.tsx b/example/src/Examples/FourTabs.tsx
index 8a298968..5681cf34 100644
--- a/example/src/Examples/FourTabs.tsx
+++ b/example/src/Examples/FourTabs.tsx
@@ -1,53 +1,36 @@
-import { StyleSheet } from 'react-native';
-import TabView, {
-  type OnPageSelectedEventData,
-  type TabViewItems,
-} from 'react-native-bottom-tabs';
+import TabView, { SceneMap } from 'react-native-bottom-tabs';
 import { useState } from 'react';
 import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';
-import { Chat } from '../Screens/Chat';
 import { Contacts } from '../Screens/Contacts';
+import { Chat } from '../Screens/Chat';
 
-const items: TabViewItems = [
-  { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' },
-  { key: 'albums', title: 'Albums', icon: 'square.grid.2x2.fill', badge: '5' },
-  { key: 'contacts', title: 'Contacts', icon: 'person.fill' },
-  { key: 'chat', title: 'Chat', icon: 'keyboard' },
-];
-
-export default function FourTabs() {
-  const [selectedPage, setSelectedTab] = useState<string>('contacts');
-
-  const handlePageSelected = ({
-    nativeEvent: { key },
-  }: {
-    nativeEvent: OnPageSelectedEventData;
-  }) => setSelectedTab(key);
+export default function ThreeTabs() {
+  const [index, setIndex] = useState(0);
+  const [routes] = useState([
+    { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' },
+    {
+      key: 'albums',
+      title: 'Albums',
+      icon: 'square.grid.2x2.fill',
+      badge: '5',
+    },
+    { key: 'contacts', title: 'Contacts', icon: 'person.fill' },
+    { key: 'chat', title: 'Chat', icon: 'keyboard' },
+  ]);
 
-  const goToAlbums = () => {
-    setSelectedTab('albums');
-  };
+  const renderScene = SceneMap({
+    article: Article,
+    albums: Albums,
+    contacts: Contacts,
+    chat: Chat,
+  });
 
   return (
     <TabView
-      style={styles.fullWidth}
-      items={items}
-      tabViewStyle="sidebarAdaptable"
-      selectedPage={selectedPage}
-      onPageSelected={handlePageSelected}
-    >
-      <Article onClick={goToAlbums} />
-      <Albums />
-      <Contacts />
-      <Chat />
-    </TabView>
+      navigationState={{ index, routes }}
+      onIndexChange={setIndex}
+      renderScene={renderScene}
+    />
   );
 }
-
-const styles = StyleSheet.create({
-  fullWidth: {
-    width: '100%',
-    height: '100%',
-  },
-});
diff --git a/example/src/Examples/ThreeTabs.tsx b/example/src/Examples/ThreeTabs.tsx
index fdc4d312..87ea997c 100644
--- a/example/src/Examples/ThreeTabs.tsx
+++ b/example/src/Examples/ThreeTabs.tsx
@@ -1,50 +1,33 @@
-import { StyleSheet } from 'react-native';
-import TabView, {
-  type OnPageSelectedEventData,
-  type TabViewItems,
-} from 'react-native-bottom-tabs';
+import TabView, { SceneMap } from 'react-native-bottom-tabs';
 import { useState } from 'react';
 import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 
-const items: TabViewItems = [
-  { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' },
-  { key: 'albums', title: 'Albums', icon: 'square.grid.2x2.fill', badge: '5' },
-  { key: 'contacts', title: 'Contacts', icon: 'person.fill' },
-];
-
 export default function ThreeTabs() {
-  const [selectedPage, setSelectedTab] = useState<string>('contacts');
-
-  const handlePageSelected = ({
-    nativeEvent: { key },
-  }: {
-    nativeEvent: OnPageSelectedEventData;
-  }) => setSelectedTab(key);
+  const [index, setIndex] = useState(0);
+  const [routes] = useState([
+    { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' },
+    {
+      key: 'albums',
+      title: 'Albums',
+      icon: 'square.grid.2x2.fill',
+      badge: '5',
+    },
+    { key: 'contacts', title: 'Contacts', icon: 'person.fill' },
+  ]);
 
-  const goToAlbums = () => {
-    setSelectedTab('albums');
-  };
+  const renderScene = SceneMap({
+    article: Article,
+    albums: Albums,
+    contacts: Contacts,
+  });
 
   return (
     <TabView
-      style={styles.fullWidth}
-      items={items}
-      tabViewStyle="sidebarAdaptable"
-      selectedPage={selectedPage}
-      onPageSelected={handlePageSelected}
-    >
-      <Article onClick={goToAlbums} />
-      <Albums />
-      <Contacts />
-    </TabView>
+      navigationState={{ index, routes }}
+      onIndexChange={setIndex}
+      renderScene={renderScene}
+    />
   );
 }
-
-const styles = StyleSheet.create({
-  fullWidth: {
-    width: '100%',
-    height: '100%',
-  },
-});
diff --git a/example/src/Screens/Article.tsx b/example/src/Screens/Article.tsx
index 2636684d..9e76905c 100644
--- a/example/src/Screens/Article.tsx
+++ b/example/src/Screens/Article.tsx
@@ -13,7 +13,7 @@ import {
 
 type Props = Partial<ScrollViewProps> & {
   date?: string;
-  onClick?: () => void;
+  jumpTo?: (key: string) => void;
   author?: {
     name: string;
   };
@@ -42,7 +42,7 @@ const DEFAULT_AUTHOR = {
 export function Article({
   date = '1st Jan 2025',
   author = DEFAULT_AUTHOR,
-  onClick,
+  jumpTo,
   ...rest
 }: Props) {
   const ref = React.useRef<ScrollView>(null);
@@ -65,7 +65,12 @@ export function Article({
           <Text style={[styles.timestamp, { color: '#000' }]}>{date}</Text>
         </View>
       </View>
-      <Button title="Go to Albums" onPress={onClick} />
+      <Button
+        title="Go to Albums"
+        onPress={() => {
+          jumpTo?.('albums');
+        }}
+      />
       <Heading>What is Lorem Ipsum?</Heading>
       <Paragraph>
         Lorem Ipsum is simply dummy text of the printing and typesetting
diff --git a/package.json b/package.json
index d06f0deb..924bbfff 100644
--- a/package.json
+++ b/package.json
@@ -195,5 +195,8 @@
   "create-react-native-library": {
     "type": "view-mixed",
     "version": "0.41.2"
+  },
+  "dependencies": {
+    "use-latest-callback": "^0.2.1"
   }
 }
diff --git a/src/SceneMap.tsx b/src/SceneMap.tsx
new file mode 100644
index 00000000..7d236f34
--- /dev/null
+++ b/src/SceneMap.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+type SceneProps = {
+  route: any;
+  jumpTo: (key: string) => void;
+};
+
+const SceneComponent = React.memo(
+  <T extends { component: React.ComponentType<any> } & SceneProps>({
+    component,
+    ...rest
+  }: T) => {
+    return React.createElement(component, rest);
+  }
+);
+
+SceneComponent.displayName = 'SceneComponent';
+
+export function SceneMap<T>(scenes: { [key: string]: React.ComponentType<T> }) {
+  return ({ route, jumpTo }: SceneProps) => {
+    const component = scenes[route.key];
+    if (!component) {
+      return null;
+    }
+    return (
+      <SceneComponent
+        key={route.key}
+        jumpTo={jumpTo}
+        component={component}
+        route={route}
+      />
+    );
+  };
+}
diff --git a/src/TabView.android.tsx b/src/TabView.android.tsx
deleted file mode 100644
index 190815bd..00000000
--- a/src/TabView.android.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { useMemo } from 'react';
-import NativeTabView from './TabViewNativeComponent';
-import type { TabViewProps } from './TabViewNativeComponent';
-import { StyleSheet, View } from 'react-native';
-
-interface Props extends TabViewProps {}
-
-const TabView = ({ children, ...props }: Props) => {
-  const items = props.items;
-  const selectedPage = props.selectedPage;
-
-  const renderedChildren = useMemo(
-    () =>
-      React.Children.map(children, (child, index) => {
-        const key = items?.[index]?.key;
-        return (
-          <View
-            key={key}
-            style={[
-              styles.tabContent,
-              { display: key === selectedPage ? 'flex' : 'none' },
-            ]}
-          >
-            {child}
-          </View>
-        );
-      }),
-    [children, items, selectedPage]
-  );
-  return (
-    <View style={styles.container}>
-      <View style={styles.content}>{renderedChildren}</View>
-      <NativeTabView {...props} style={styles.tabBar} />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    height: '100%',
-  },
-  content: {
-    flex: 1,
-  },
-  tabContent: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-  },
-  tabBar: {},
-});
-
-export default TabView;
diff --git a/src/TabView.tsx b/src/TabView.tsx
index 3357a7d8..efb12b9f 100644
--- a/src/TabView.tsx
+++ b/src/TabView.tsx
@@ -1,34 +1,122 @@
-import React, { type ReactNode } from 'react';
-import NativeTabView from './TabViewNativeComponent';
-import type { TabViewProps } from './TabViewNativeComponent';
-import { View } from 'react-native';
-
-interface Props extends TabViewProps {}
-
-const childrenWithOverriddenStyle = (children?: ReactNode, pageMargin = 0) => {
-  return React.Children.map(children, (child) => {
-    return (
-      <View
-        style={{
-          height: '100%',
-          width: '100%',
-          paddingHorizontal: pageMargin / 2,
-        }}
-        collapsable={false}
-      >
-        {child}
-      </View>
+import React from 'react';
+import type { TabViewItems } from './TabViewNativeComponent';
+import { Platform, StyleSheet, View } from 'react-native';
+import TabViewAdapter from './TabViewAdapter';
+import useLatestCallback from 'use-latest-callback';
+
+export type BaseRoute = {
+  key: string;
+  title?: string;
+  badge?: string;
+  lazy?: boolean;
+};
+
+type NavigationState<Route extends BaseRoute> = {
+  index: number;
+  routes: Route[];
+};
+
+interface Props<Route extends BaseRoute> {
+  navigationState: NavigationState<Route>;
+  renderScene: (props: {
+    route: Route;
+    jumpTo: (key: string) => void;
+  }) => React.ReactNode | null;
+  /**
+   * Callback which is called on tab change, receives the index of the new tab as argument.
+   * The navigation state needs to be updated when it's called, otherwise the change is dropped.
+   */
+  onIndexChange: (index: number) => void;
+  /**
+   * Get lazy for the current screen. Uses true by default.
+   */
+  getLazy?: (props: { route: Route }) => boolean | undefined;
+}
+
+const TabView = <Route extends BaseRoute>({
+  navigationState,
+  renderScene,
+  onIndexChange,
+  getLazy = ({ route }: { route: Route }) => route.lazy,
+  ...props
+}: Props<Route>) => {
+  // @ts-ignore
+  const focusedKey = navigationState.routes[navigationState.index].key;
+
+  /**
+   * List of loaded tabs, tabs will be loaded when navigated to.
+   */
+  const [loaded, setLoaded] = React.useState<string[]>([focusedKey]);
+
+  if (!loaded.includes(focusedKey)) {
+    // Set the current tab to be loaded if it was not loaded before
+    setLoaded((loaded) => [...loaded, focusedKey]);
+  }
+
+  const items: TabViewItems = navigationState.routes.map((route) => ({
+    key: route.key,
+    title: route.title ?? route.key,
+    icon: 'document.fill',
+    badge: route.badge,
+  }));
+
+  const jumpTo = useLatestCallback((key: string) => {
+    const index = navigationState.routes.findIndex(
+      (route) => route.key === key
     );
+
+    onIndexChange(index);
   });
-};
 
-const TabView = ({ children, ...props }: Props) => {
   return (
-    <NativeTabView
+    <TabViewAdapter
+      style={styles.fullWidth}
+      items={items}
+      selectedPage={focusedKey}
+      onPageSelected={({ nativeEvent: { key } }) => {
+        const index = navigationState.routes.findIndex((r) => r.key === key);
+
+        if (index !== -1) {
+          onIndexChange?.(index);
+        }
+      }}
       {...props}
-      children={childrenWithOverriddenStyle(children, 0)}
-    />
+    >
+      {navigationState.routes.map((route) => {
+        if (getLazy({ route }) !== false && !loaded.includes(route.key)) {
+          // Don't render a screen if we've never navigated to it
+          if (Platform.OS === 'android') {
+            return null;
+          }
+          return <View key={route.key} />;
+        }
+
+        return (
+          <View
+            key={route.key}
+            style={[
+              { width: '100%', height: '100%' },
+              Platform.OS === 'android' && {
+                display: route.key === focusedKey ? 'flex' : 'none',
+              },
+            ]}
+          >
+            {renderScene({
+              route,
+              jumpTo,
+            })}
+          </View>
+        );
+      })}
+    </TabViewAdapter>
   );
 };
 
+const styles = StyleSheet.create({
+  fullWidth: {
+    width: '100%',
+    height: '100%',
+  },
+});
+
 export default TabView;
diff --git a/src/TabViewAdapter.android.tsx b/src/TabViewAdapter.android.tsx
new file mode 100644
index 00000000..3ed75523
--- /dev/null
+++ b/src/TabViewAdapter.android.tsx
@@ -0,0 +1,30 @@
+import NativeTabView from './TabViewNativeComponent';
+import type { TabViewProps } from './TabViewNativeComponent';
+import { StyleSheet, View } from 'react-native';
+
+const TabViewAdapter = ({ children, ...props }: TabViewProps) => {
+  return (
+    <>
+      <View style={styles.content}>{children}</View>
+      <NativeTabView {...props} style={styles.tabBar} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+  },
+  content: {
+    flex: 1,
+  },
+  tabContent: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+  tabBar: {},
+});
+
+export default TabViewAdapter;
diff --git a/src/TabViewAdapter.tsx b/src/TabViewAdapter.tsx
new file mode 100644
index 00000000..6caeb439
--- /dev/null
+++ b/src/TabViewAdapter.tsx
@@ -0,0 +1,7 @@
+import NativeTabView, { type TabViewProps } from './TabViewNativeComponent';
+
+const TabViewAdapter = ({ ...props }: TabViewProps) => {
+  return <NativeTabView {...props} />;
+};
+
+export default TabViewAdapter;
diff --git a/src/index.tsx b/src/index.tsx
index 0606acc8..9ad9e54e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,4 +6,6 @@ import type {
 
 export type { TabViewItems, OnPageSelectedEventData };
 
+export { SceneMap } from './SceneMap';
+
 export default TabView;
diff --git a/yarn.lock b/yarn.lock
index 201363c9..8a1f3060 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11507,6 +11507,7 @@ __metadata:
     release-it: ^15.0.0
     turbo: ^1.10.7
     typescript: ^5.2.2
+    use-latest-callback: ^0.2.1
   peerDependencies:
     react: "*"
     react-native: "*"