fix: fix setNativeProps

web-ridge · Aug 1, 2023 · a85eaaf · a85eaaf
1 parent c9c178a
commit a85eaaf
Show file tree

Hide file tree

Showing 11 changed files with 39 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -74,7 +74,6 @@ function Example() {
       <TabsProvider
         defaultIndex={0}
         onChangeIndex={handleChangeIndex}
-        persistKey="test"
       >
         <Tabs
           // uppercase={false} // true/false | default=true | labels are uppercase

diff --git a/example/package.json b/example/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
     "expo": "~49.0.5",
+    "expo-font": "~11.4.0",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -22,7 +23,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@expo/webpack-config": "^18.0.1",
+    "@expo/webpack-config": "^18.1.2",
     "babel-loader": "^8.1.0",
     "babel-plugin-module-resolver": "^5.0.0"
   },

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -31,7 +31,6 @@ import {
   useTabIndex,
   useTabNavigation,
 } from 'react-native-paper-tabs';
-
 function App({
   onToggleDarkMode,
   dark,
@@ -125,11 +124,7 @@ function App({
             <Appbar.Action icon="menu" />
             <Appbar.Content title="react-native-paper-tabs" />
           </Appbar>
-          <TabsProvider
-            defaultIndex={0}
-            onChangeIndex={handleChangeIndex}
-            persistKey="test"
-          >
+          <TabsProvider defaultIndex={0} onChangeIndex={handleChangeIndex}>
             {mode === 'fixed' ? (
               <Tabs {...tabProps}>
                 <TabScreen

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -1509,7 +1509,7 @@
   resolved "https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-13.0.0.tgz#e2989b85e95a82bce216f88cf8fb583ab050ec95"
   integrity sha512-TI+l71+5aSKnShYclFa14Kum+hQMZ86b95SH6tQUG3qZEmLTarvWpKwqtTwQKqvlJSJrpFiSFu3eCuZokY6zWA==
 
-"@expo/webpack-config@^18.0.1":
+"@expo/webpack-config@^18.1.2":
   version "18.1.2"
   resolved "https://registry.npmjs.org/@expo/webpack-config/-/webpack-config-18.1.2.tgz#98921b3d56d57dea6aaf270c2e9a0b66f85cae24"
   integrity sha512-nlYVzcheaOZdxSt31he16f/ZgcdS3BT4BjEU85TwgFUdUJngjhT9wcmmkvXmOYz0o0NBMtZCkX8S0Z2Ta3yuNQ==
@@ -4048,7 +4048,7 @@ expo-status-bar@~1.6.0:
   resolved "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.6.0.tgz#e79ffdb9a84d2e0ec9a0dc7392d9ab364fefa9cf"
   integrity sha512-e//Oi2WPdomMlMDD3skE4+1ZarKCJ/suvcB4Jo/nO427niKug5oppcPNYO+csR6y3ZglGuypS+3pp/hJ+Xp6fQ==
 
-expo@~49.0.5:
+expo@~49.0.0:
   version "49.0.6"
   resolved "https://registry.npmjs.org/expo/-/expo-49.0.6.tgz#ae01b5171027762f151fd4ada7d9cd01900c80f0"
   integrity sha512-prwW1DNTehTdJh2xp+HrEMVrO53WfFNdCC9c2yo3BfsqASGhP8LUePC+RyNgNZzOTL0OsXY7pxkEd0zH1idudA==

diff --git a/package.json b/package.json
@@ -66,6 +66,7 @@
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "5.0.0",
+    "expo-font": "^11.4.0",
     "jest": "^28.1.1",
     "pod-install": "^0.1.0",
     "prettier": "^3.0.0",
@@ -74,7 +75,7 @@
     "react-native-builder-bob": "^0.21.3",
     "react-native-pager-view": "^6.2.0",
     "react-native-paper": "^5.9.1",
-    "react-native-vector-icons": "^10.0.0",
+    "react-native-vector-icons": "9.2.0",
     "release-it": "^15.0.0",
     "typescript": "^5.0.2"
   },

diff --git a/src/MaterialCommunityIcon.tsx b/src/MaterialCommunityIcon.tsx
@@ -4,12 +4,12 @@ import { StyleSheet, Animated } from 'react-native';
 let MaterialCommunityIcons: any;
 
 try {
-  // Optionally require vector-icons
-  const component =
-    require('react-native-vector-icons/MaterialCommunityIcons').default;
-  MaterialCommunityIcons = Animated.createAnimatedComponent(component);
+  MaterialCommunityIcons = Animated.createAnimatedComponent(
+    require('react-native-vector-icons/MaterialCommunityIcons').default
+  );
 } catch (_e: any) {
   const e = _e;
+  console.log({ e });
   let isErrorLogged = false;
 
   // Fallback component for icons

diff --git a/src/TabsHeaderItem.tsx b/src/TabsHeaderItem.tsx
@@ -6,9 +6,10 @@ import type { MD3LightTheme } from 'react-native-paper';
 import type { ReactElement } from 'react';
 import type { TabScreenProps } from './TabScreen';
 import Color from 'color';
-import MaterialCommunityIcon from './MaterialCommunityIcon';
 import { useAnimatedText } from './internal';
 import type { IconPosition, Mode } from './utils';
+import MaterialCommunityIcon from './MaterialCommunityIcon';
+
 const AnimatedText = Animated.createAnimatedComponent<
   React.ComponentType<TextProps>
 >(Text as any);

diff --git a/src/TabsProvider.tsx b/src/TabsProvider.tsx
@@ -1,29 +1,19 @@
 import React, { useState } from 'react';
-import { Platform } from 'react-native';
 import { TabsContext } from './context';
 import type { TabsProviderProps } from './utils';
 
-// used to persist position on web
-const cache = createCache();
-
 export const TabsProvider = ({
   children,
   onChangeIndex,
   defaultIndex,
-  persistKey,
 }: TabsProviderProps): JSX.Element => {
-  const [index, setIndex] = useState<number>(
-    getDefaultIndex(defaultIndex, persistKey) || 0
-  );
+  const [index, setIndex] = useState<number>(defaultIndex || 0);
   const goTo = React.useCallback(
     (ind: number) => {
-      if (persistKey && Platform.OS === 'web') {
-        cache.set(persistKey, ind);
-      }
       setIndex(ind);
       onChangeIndex(ind);
     },
-    [setIndex, onChangeIndex, persistKey]
+    [setIndex, onChangeIndex]
   );
 
   return (
@@ -32,26 +22,3 @@ export const TabsProvider = ({
     </TabsContext.Provider>
   );
 };
-
-// used to persist position on web
-function createCache() {
-  let c: { [k: string]: number } = {};
-  const set = (k: string, i: number) => {
-    c[k] = i;
-  };
-  const get = (key: string) => c[key];
-  return {
-    set,
-    get,
-  };
-}
-
-function getDefaultIndex(
-  defaultIndex: number | undefined,
-  persistKey: string | undefined
-) {
-  if (persistKey) {
-    return cache.get(persistKey) || defaultIndex || 0;
-  }
-  return defaultIndex || 0;
-}
diff --git a/src/internal.ts b/src/internal.ts
@@ -30,16 +30,17 @@ export function useIndicator({
   index,
   layouts,
 }: IndicatorArgs): IndicatorReturns {
+  const [indicatorStyle, setIndicatorStyle] = React.useState<ViewStyle | null>(
+    null
+  );
   const indicatorRef = React.useRef<View>(null);
   const updateIndicator = React.useCallback(() => {
     if (!indicatorRef.current || !layouts.current) {
       return;
     }
     const cl = layouts.current[index];
     if (cl) {
-      indicatorRef.current.setNativeProps({
-        style: getIndicatorStyle({ left: cl.x, width: cl.width }),
-      });
+      setIndicatorStyle(getIndicatorStyle({ left: cl.x, width: cl.width }));
     }
   }, [index, indicatorRef, layouts]);
 
@@ -48,7 +49,7 @@ export function useIndicator({
     updateIndicator();
   }, [updateIndicator]);
 
-  return [indicatorRef, updateIndicator, null];
+  return [indicatorRef, updateIndicator, indicatorStyle];
 }
 
 export function useOffsetScroller(_: OffsetScrollArgs) {}

diff --git a/src/utils.tsx b/src/utils.tsx
@@ -65,15 +65,12 @@ export interface IndicatorArgs {
   offset: Animated.Value | undefined;
   tabsLayout: LayoutRectangle | null;
 }
-export type IndicatorReturns = [
-  RefObject<View> | undefined,
-  () => any,
-  AnimatedViewStyle | null,
-];
+
+// prettier-ignore
+export type IndicatorReturns = [RefObject<View> | undefined, () => any, AnimatedViewStyle | null];
 
 export interface TabsProviderProps {
   children: any;
   onChangeIndex: (index: number) => void;
   defaultIndex?: number;
-  persistKey?: string;
 }
diff --git a/yarn.lock b/yarn.lock
@@ -4556,6 +4556,13 @@ expect@^28.0.0, expect@^28.1.3:
     jest-message-util "^28.1.3"
     jest-util "^28.1.3"
 
+expo-font@^11.4.0:
+  version "11.4.0"
+  resolved "https://registry.npmjs.org/expo-font/-/expo-font-11.4.0.tgz#e2d31c0bb76ba3c37c2d84703a49aeafc3afef28"
+  integrity sha512-nkmezCFD7gR/I6R+e3/ry18uEfF8uYrr6h+PdBJu+3dawoLOpo+wFb/RG9bHUekU1/cPanR58LR7G5MEMKHR2w==
+  dependencies:
+    fontfaceobserver "^2.1.0"
+
 external-editor@^3.0.3:
   version "3.1.0"
   resolved "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
@@ -4734,6 +4741,11 @@ flow-parser@^0.206.0:
   resolved "https://registry.npmjs.org/flow-parser/-/flow-parser-0.206.0.tgz#f4f794f8026535278393308e01ea72f31000bfef"
   integrity sha512-HVzoK3r6Vsg+lKvlIZzaWNBVai+FXTX1wdYhz/wVlH13tb/gOdLXmlTqy6odmTBhT5UoWUbq0k8263Qhr9d88w==
 
+fontfaceobserver@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz#5fb392116e75d5024b7ec8e4f2ce92106d1488c8"
+  integrity sha512-6FPvD/IVyT4ZlNe7Wcn5Fb/4ChigpucKYSvD6a+0iMoLn2inpo711eyIcKjmDtE5XNcgAkSH9uN/nfAeZzHEfg==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -7994,10 +8006,10 @@ react-native-paper@^5.9.1:
     patch-package "^7.0.0"
     use-latest-callback "^0.1.5"
 
-react-native-vector-icons@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.0.0.tgz#0f031f7717f76f0a397f725de9b5a47ec87862e9"
-  integrity sha512-efMOVbZIebY8RszZPzPBoXi9pvD/NFYmjIDYxRoc9LYSzV8rMJtT8FfcO2hPu85Rn2x9xktha0+qn0B7EqMAcQ==
+react-native-vector-icons@9.2.0:
+  version "9.2.0"
+  resolved "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz#3c0c82e95defd274d56363cbe8fead8d53167ebd"
+  integrity sha512-wKYLaFuQST/chH3AJRjmOLoLy3JEs1JR6zMNgTaemFpNoXs0ztRnTxcxFD9xhX7cJe1/zoN5BpQYe7kL0m5yyA==
   dependencies:
     prop-types "^15.7.2"
     yargs "^16.1.1"