-
-
Notifications
You must be signed in to change notification settings - Fork 784
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Address reanimated API misuse warnings that pop up starting with reanimated 3.16.0 #1983
Comments
To resolve this for now, create a file named reanimatedConfig.js at the root of your project, then import it in App.tsx.
Import this file at the beginning of your App.tsx to apply the configuration:
|
i tested the library on RN75 with REA 3.16.0, but im not getting these warnings ? any ideas |
I was having the very same issue. It's gone now out of nowhere and trying to understand why. Thinking if this could be related to cache in any way ?.. Also RN 75 |
I'm experiencing same issue. react-native: 0.75.4 I tried to unistall/install app, |
i'll try to submit a new release today to remove all accessing animated values as hooks dependancies |
i pushed a potential fix on |
@gorhom I updated the dependency from The warning seems to no longer be displaying. I think the ship worked :D . Great job |
Hi @gorhom, thanks for the update. Unfortunately, the warnings persist on both platforms (Android / iOS) using react-native v0.74.5. Just to mention, the bottom sheet I’m using is in detached mode, though I’m not sure if this is related to the issue. |
edit: it seems that a slider I was using inside the bottom sheet was causing the error so I guess all good after upgrading to 5.0.4
https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue#remarks from docs:
from my understanding (demo code): bad: const reverseAnim = scaleEmoji.value === 2 ? [2, 1, 1] : [1, 1, 2];
const emojiAnimatedScaled = useAnimatedStyle(() => {
return {
transform: [
{
translateY: interpolate(
scaleEmoji.value,
[0, 1, 2],
scaled ? [1, -3, -5] : [1, 1, 1]
)
},
{
scaleY: interpolate(
scaleEmoji.value,
[0, 1, 2],
scaled ? [0, 1, 1.5] : reverseAnim
)
},
{
scaleX: interpolate(
scaleEmoji.value,
[0, 1, 2],
scaled ? [0, 1, 1.5] : reverseAnim
)
}
]
};
}, [emojiDuration, scaleDuration, scaleEmoji, scaled]); good: const emojiAnimatedScaled = useAnimatedStyle(() => {
const reverseAnim = scaleEmoji.value === 2 ? [2, 1, 1] : [1, 1, 2]; <----- moved inside reanimated hook
return {
transform: [
{
translateY: interpolate(
scaleEmoji.value,
[0, 1, 2],
scaled ? [1, -3, -5] : [1, 1, 1]
)
},
{
scaleY: interpolate(
scaleEmoji.value,
[0, 1, 2],
scaled ? [0, 1, 1.5] : reverseAnim
)
},
{
scaleX: interpolate(
scaleEmoji.value,
[0, 1, 2],
scaled ? [0, 1, 1.5] : reverseAnim
)
}
]
};
}, [emojiDuration, scaleDuration, scaleEmoji, scaled]); |
Thank you! The warning is gone, everything works great. |
I still get the warning on 5.0.4 (using BottomSheetModal) unfortunately |
Same issue here but it's depends on the provided child. |
the warning is coming directly from reanimated 3.16, i don't have @gorhom packages still it is showing to me. |
It's probably showing because of a difference package that has the same issue. |
Yeah, After i have commented some of my code i found that it's coming from react-native-pager-view
|
I guess it came from the |
it's true that a few libraries cause this warning, I got it as well from react-native-skia for example. However I think that in 5.0.4 still not all warnings have been removed from the BottomSheet. I get the warning even in an empty bottom sheet where I'm positive I don't use any shared values or other libraries. I use a wrapper component but maybe some of the props / DOM helps:
|
@gorhom I have removed from BottomSheet the remaining if (__DEV__) {
print({
component: BottomSheet.name,
method: 'render',
params: {
animatedSnapPoints: animatedSnapPoints.value,
animatedCurrentIndex: animatedCurrentIndex.value,
providedIndex: _providedIndex,
},
});
} |
Seeing the error too on In my case, I use a |
same for me, if remove BottomSheetView the warnings are gone |
I am facing the same problem in the code |
You can disable strict mode in the logger configuration by setting strict: Alternatively, ensure that you read or write to shared values within relevant callbacks (like If you are stuck, try using |
here isa fix: #1983 |
Im facing this issue on 5.0.4 with reanimated 3.16.1, when i press my TouchableOpacity i get the same log error <BottomSheet
ref={bottomSheetRef}
backgroundStyle={{ backgroundColor: theme.colors.background}}
snapPoints={snapPoints}
index={-1}
>
<BottomSheetScrollView contentContainerStyle={styles.sheetContent}>
<Text style={styles.heading}>Select Consultation Type</Text>
<View style={styles.consultationContainer}>
{consultationTypes.map((type) => (
<TouchableOpacity
key={type}
style={[
styles.consultationButton,
selectedConsultation === type && styles.selectedButton,
]}
onPress={() => {
setSelectedConsultation(type);
}}>
<Text
style={[styles.buttonText, selectedConsultation === type && styles.selectedText]}>
{type}
</Text>
</TouchableOpacity>
))}
</View>
</BottomSheetView> |
This Issue is still on version 5.0.4
|
…(by @pinpong) * fix(#1983): updated shared values access as hook dependancies * chore: removed render message --------- Co-authored-by: Mo Gorhom <[email protected]>
another attempt to fix the issue by @pinpong was released on |
I'm still getting warnings on which leads to this: react-native-bottom-sheet/src/components/bottomSheet/BottomSheet.tsx Lines 173 to 182 in 4f26c78
The props validator is accessing the |
After updating to version 5.0.5, the warnings disappeared for me 🎉 |
Just to clearify my earlier comment: the snap points must be shared value for the warnings to appear. Using normal values as snap points does not produce any warnings. |
This Issue is still on version 5.0.6
|
Any update on this? |
@rochajulian I'm using this as a temporary solution for now until they fix this with an update. |
Version
v5
Reanimated Version
v3
Gesture Handler Version
v2
Platforms
iOS, Android
What happened?
Reanimated version 3.16.0 introduced a logger that by default shows warnings about API misuse.
We are currently using bottom sheet version
5.0.2
in our app and noticed warnings started to pop up whenever the bottom sheet is rendered/re-rendered.Reproduction steps
Reproduction sample
https://snack.expo.dev/IUep5KqJQjKmj-dPQdc3g
Relevant log output
The text was updated successfully, but these errors were encountered: