fix: improve make onChangeIndex not required

Author: RichardLindhout

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

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>;
+}

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;
 }