Reanimated 3.15 Warning

[pavelbabenko]

Having lots of warnings in console starting from reanimated 3.15.

Here is the warning: [Reanimated] Reading from valueduring component render. Please ensure that you do not access thevalueproperty or useget` method of a shared value while React is rendering a component.

If you don't want to see this message, you can disable the strict mode. Refer to: https://docs.swmansion.com/react-native-reanimated/docs/debugging/logger-configuration for more details.`

[pavelbabenko]

Here is my patch which fixes warnings react-native-collapsible-tab-view-npm-8.0.0-d940cdc0a3.patch

[TierryBr]

@pavelbabenko when applying this fix I had TypeError: Cannot read property '__internalInstanceHandle' of undefined, I'm using version 0.76 of RN and 3.16.3 of reanimated

[quangtuan28200]

@pavelbabenko seems not to work, I applied this patch but still warning I'm using 0.75.4 react native and 3.15 reanimated

[maximilian]

@TierryBr did you find a fix? I am also getting this on Reanimated 3.16. Is a downgrade of react-native-collapsible-tab-view an option?

[tech-sunvi]

@TierryBr, did you get a solution? I'm facing the same issue.

[tech-sunvi]

Ok I got it fixed. It was because of react-native-reanimated package. I put it to version 3.16.4 and everything worked fine.

[maximilian]

@tech-sunvi What version of this project are you using? I've tried on version 7 and 8 but same issue with 3.16.4. Unfortunately still get the same message :

[Reanimated] Reading from value during component render. Please ensure that you do not access the value property or use get method of a shared value while React is rendering a component. If you don't want to see this message, you can disable the strict mode. Refer to: https://docs.swmansion.com/react-native-reanimated/docs/debugging/logger-configuration for more details.

[rileysay]

@TierryBr @tech-sunvi @maximilian the latest version reanimated 3.16.7 fixes the '__internalInstanceHandle' of undefined issue

[leekaiwei]

@pavelbabenko seems not to work, I applied this patch but still warning I'm using 0.75.4 react native and 3.15 reanimated

Same. I am on 0.76.5 RN and 3.16.7 reanimated.

[vargajacint]

Same issue using 0.76.7 RN and 3.16.7 reanimated

[JasCodes]

+1

[catzine]

+1, having the same flood of warnings

react_native: 0.76.9 reanimated: 3.16.7 collapsible_tab_view: 8.01. carousel: 4.0.0-canary.22 pager_view: 6.5.1

upgrading to 3.17.5 for reanimated since that seems to be the latest stable release, will update here if that fixed it update: it didn't

[csark0812]

Try this patch:

diff --git a/node_modules/react-native-collapsible-tab-view/src/Container.tsx b/node_modules/react-native-collapsible-tab-view/src/Container.tsx
index e782b90..8054faa 100644
--- a/node_modules/react-native-collapsible-tab-view/src/Container.tsx
+++ b/node_modules/react-native-collapsible-tab-view/src/Container.tsx
@@ -145,7 +145,7 @@ export const Container = React.memo(
         }, [headerHeight, minHeaderHeight])
 
       const indexDecimal: ContextType['indexDecimal'] = useSharedValue(
-        index.value
+        initialIndex
       )
 
       const afterRender = useSharedValue(0)
@@ -330,8 +330,10 @@ export const Container = React.memo(
         ref,
         () => ({
           setIndex: (index) => {
-            const name = tabNames.value[index]
-            onTabPress(name)
+            runOnUI(() => {
+              const name = tabNames.value[index]
+              runOnJS(onTabPress)(name)
+            })()
             return true
           },
           jumpToTab: (name) => {
@@ -339,10 +341,12 @@ export const Container = React.memo(
             return true
           },
           getFocusedTab: () => {
-            return tabNames.value[index.value]
+            // Use current state instead of accessing .value during render
+            return tabNamesArray[initialIndex] || ''
           },
           getCurrentIndex: () => {
-            return index.value
+            // Use current state instead of accessing .value during render
+            return initialIndex
           },
         }),
         // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/node_modules/react-native-collapsible-tab-view/src/hooks.tsx b/node_modules/react-native-collapsible-tab-view/src/hooks.tsx
index ba7dffa..5b9b9b7 100644
--- a/node_modules/react-native-collapsible-tab-view/src/hooks.tsx
+++ b/node_modules/react-native-collapsible-tab-view/src/hooks.tsx
@@ -579,21 +579,28 @@ export function useAfterMountEffect(
 export function useConvertAnimatedToValue<T>(
   animatedValue: Animated.SharedValue<T>
 ) {
-  const [value, setValue] = useState<T>(animatedValue.value)
+  const [value, setValue] = useState<T | undefined>(undefined)
 
   useAnimatedReaction(
     () => {
       return animatedValue.value
     },
     (animValue) => {
-      if (animValue !== value) {
-        runOnJS(setValue)(animValue)
-      }
+      runOnJS(setValue)(animValue)
     },
-    [value]
+    []
   )
 
-  return value || 0
+  // Initialize with current value on first render
+  useEffect(() => {
+    if (value === undefined) {
+      runOnUI(() => {
+        runOnJS(setValue)(animatedValue.value)
+      })()
+    }
+  }, [animatedValue, value])
+
+  return value
 }
 
 export interface HeaderMeasurements {
diff --git a/node_modules/react-native-collapsible-tab-view/src/types.ts b/node_modules/react-native-collapsible-tab-view/src/types.ts
index 00fbafc..983b04b 100644
--- a/node_modules/react-native-collapsible-tab-view/src/types.ts
+++ b/node_modules/react-native-collapsible-tab-view/src/types.ts
@@ -157,6 +157,8 @@ export type ContextType<T extends TabName = TabName> = {
    * Name of the current focused tab.
    */
   focusedTab: SharedValue<T>
+
+  initialFocusedTab: T
   /**
    * DiffClamp value. It's the current visible header height if
    * `diffClampEnabled={true}`.

worked for me.

[coleturner]

@csark0812 I tried your patch, and I am observing an issue with getFocusedTab. initialIndex does not get updates when the focus tab changes, and that value will always be stale. Thanks for sharing

[jamiechong]

I know these warnings are intended to help discover anti-patterns, but if you just want to disable them, stick this in App.tsx or your root _layout.tsx:

import { configureReanimatedLogger, ReanimatedLogLevel } from 'react-native-reanimated';

configureReanimatedLogger({
  level: ReanimatedLogLevel.warn,
  strict: false
});

[alihamzaazhar]

Even with the above patches, I am still getting the same warning. React Native 0.77.3 Reanimated 3.18