From 7b8515011893f8aa03d64a75e74b1da1e317f7d0 Mon Sep 17 00:00:00 2001
From: Richard Lindhout <richardlindhout96@gmail.com>
Date: Wed, 2 Aug 2023 21:03:02 +0200
Subject: [PATCH] fix: improve make onChangeIndex not required

---
 README.md            |  4 ++--
 src/TabsProvider.tsx | 16 +++++++---------
 src/utils.tsx        |  2 +-
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 7ab6db4..03ccbb8 100644
--- a/README.md
+++ b/README.md
@@ -73,10 +73,10 @@ function Example() {
     return (
       <TabsProvider
         defaultIndex={0}
-        onChangeIndex={handleChangeIndex}
+        // onChangeIndex={handleChangeIndex} optional
       >
         <Tabs
-          // uppercase={false} // true/false | default=true | labels are uppercase
+          // uppercase={false} // true/false | default=true (on material v2) | labels are uppercase
           // showTextLabel={false} // true/false | default=false (KEEP PROVIDING LABEL WE USE IT AS KEY INTERNALLY + SCREEN READERS)
           // iconPosition // leading, top | default=leading
           // style={{ backgroundColor:'#fff' }} // works the same as AppBar in react-native-paper
diff --git a/src/TabsProvider.tsx b/src/TabsProvider.tsx
index 37919c7..4824081 100644
--- a/src/TabsProvider.tsx
+++ b/src/TabsProvider.tsx
@@ -2,23 +2,21 @@ import React, { useState } from 'react';
 import { TabsContext } from './context';
 import type { TabsProviderProps } from './utils';
 
-export const TabsProvider = ({
+export function TabsProvider({
   children,
   onChangeIndex,
   defaultIndex,
-}: TabsProviderProps): JSX.Element => {
+}: TabsProviderProps) {
   const [index, setIndex] = useState<number>(defaultIndex || 0);
   const goTo = React.useCallback(
     (ind: number) => {
       setIndex(ind);
-      onChangeIndex(ind);
+      onChangeIndex?.(ind);
     },
     [setIndex, onChangeIndex]
   );
 
-  return (
-    <TabsContext.Provider value={{ goTo, index }}>
-      {children}
-    </TabsContext.Provider>
-  );
-};
+  const value = React.useMemo(() => ({ goTo, index }), [goTo, index]);
+
+  return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>;
+}
diff --git a/src/utils.tsx b/src/utils.tsx
index c890068..c87da62 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -71,6 +71,6 @@ export type IndicatorReturns = [RefObject<View> | undefined, () => any, Animated
 
 export interface TabsProviderProps {
   children: any;
-  onChangeIndex: (index: number) => void;
+  onChangeIndex?: (index: number) => void;
   defaultIndex?: number;
 }