Closed yolpsoftware closed 1 year ago
Witnessing the same issue in 3.3.0 as well.
More observations:
For me, it also happens on a full reload.
Maybe relevant: https://stackoverflow.com/questions/47553904/react-error-cannot-assign-to-read-only-property-validated-of-object-objec
Have the same problem, I've noticed that the problem happens if I use useAnimatedStyle
, and if I change how I reference a property the problem goes away, here's my example component:
if I apply these changes:
Index: example/src/components/ripple-surface/RippleSurface.tsx
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/example/src/components/ripple-surface/RippleSurface.tsx b/example/src/components/ripple-surface/RippleSurface.tsx
--- a/example/src/components/ripple-surface/RippleSurface.tsx (revision 3403801037346ebde8b1254d78b2b5fbe8a8eba2)
+++ b/example/src/components/ripple-surface/RippleSurface.tsx (date 1692897605248)
@@ -28,9 +28,10 @@
pressed.value = false;
});
+ const rippleColor = props.rippleColor;
const animatedStyles = useAnimatedStyle(() => ({
borderRadius: radius,
- backgroundColor: props.rippleColor,
+ backgroundColor: rippleColor,
width: radius * 2,
height: radius * 2,
opacity: withTiming(pressed.value ? 1 : 0),
the error goes away... which leads me to believe that one of the RN reanimated babel plugins transforms any ref used inside of useAnimatedStyle
and implicitly transforms it to a immutable dep, which in this case ends up transforming props
We can probably solve the problem by using more granular refs on those hooks.. although I think that the plugin should never do implicit things that change behavior of code..
@Grohden can confirm your workaround works well! Thanks a lot for sharing.
Hi! This is a deliberate behavior of Reanimated. Take a look at this line:
We are freezing the whole props
object in this case so users wouldn't expect updates of Animated Styles on change of plain JS values.
The way how plugin works, it adds to a worklet closure whole objects whose properties were accessed in worklet's body, not only their properties. We tried to have only those properties in the closure - but it raised many issues and we decided to use whole objects again.
In this scenario, props
is having property children
which you try to mount into React's tree. React does many things when mounting a component - it also changes its props. But since the object was frozen, it cannot do that and an error is thrown.
Unfortunately, when you face this issue it's very obscure. We plan to improve this mechanism and somehow point to Reanimated and explain what you should do here, but it's a quite complicated case.
What @Grohden provided here is not a workaround, but an actual proper solution. You should always try to use plain JS values as granularly as possible if you don't want them to be read-only - therefore unpacking your objects is a good choice here.
@tjzel thanks for the clarification.
Instead of freezing the props
object, can't you replace its elements by properties (Object.defineProperty
), and in the property setter, issue a warning, but only if the caller of the setter is another file than react-jsx-runtime.development.js
? Not 100% sure though whether that is technically possible.
I tried to but went into cases when for some reasons I couldn't use defineProperty
on some props, there are some edge cases and I just decided to postpone it.
I'm having the same issue, any updates? What exactly is the solution now?
@tjzel I'm still getting this issue after updating from v3.1.0 to v3.6.0 even when I refactor my props as suggested:
import React from 'react';
import {Image, View} from 'react-native';
import {Icon, Text} from '@rneui/themed';
import PropTypes from 'prop-types';
import {Colors} from '../../../styles';
import styles from './styles';
function ListEmpty({custom, listItemName, customMessage, prompt, containerStyle}) {
return (
<View style={[styles.container, containerStyle]}>
<Image
source={require('../../../assets/images/nothing-found.png')}
style={{backgroundColor: 'transparent'}}
/>
<Text h4>{custom ? `${customMessage}` : `No ${listItemName} added yet!`}</Text>
{prompt} //this
</View>
);
}
ListEmpty.defaultProps = {
custom: false,
listItemName: 'events',
customMessage: '',
prompt: (
<Text style={styles.prompt}>
Tap the <Icon size={15} name={'pluscircle'} type={'antdesign'} color={Colors.SECONDARY} /> to
get started
</Text>
),
containerStyle: {},
};
ListEmpty.propTypes = {
custom: PropTypes.bool,
listItemName: PropTypes.string,
customMessage: PropTypes.string,
prompt: PropTypes.element,
containerStyle: PropTypes.object || PropTypes.any,
};
export default ListEmpty;
commenting out the prompt
from the component seems to get rid of the error but i have no clue why. It's annoying because i cant even downgrade the package because 3.1.0 doesn't work with RN0.72
In my case the issue was that I had some animation based tailwind classes that I copied over from a react app into a react-native app and that I guess somewhere real deep internally did not like. Honestly sheer luck that I figured this out. Hope this can save someone else a couple hours.
In my case the issue was that I had some animation based tailwind classes that I copied over from a react app into a react-native app and that I guess somewhere real deep internally did not like. Honestly sheer luck that I figured this out. Hope this can save someone else a couple hours.
Did you find any solution to this?
In my case I have to change from const Component = ({prop1, prop2}: Props) => {
to const Component = (props: Props) => {
and use the props like props.prop1
.
Seems like that way the memory reference maintain the same.
Hi! This is a deliberate behavior of Reanimated. Take a look at this line:
We are freezing the whole
props
object in this case so users wouldn't expect updates of Animated Styles on change of plain JS values.The way how plugin works, it adds to a worklet closure whole objects whose properties were accessed in worklet's body, not only their properties. We tried to have only those properties in the closure - but it raised many issues and we decided to use whole objects again.
In this scenario,
props
is having propertychildren
which you try to mount into React's tree. React does many things when mounting a component - it also changes its props. But since the object was frozen, it cannot do that and an error is thrown.Unfortunately, when you face this issue it's very obscure. We plan to improve this mechanism and somehow point to Reanimated and explain what you should do here, but it's a quite complicated case.
What @Grohden provided here is not a workaround, but an actual proper solution. You should always try to use plain JS values as granularly as possible if you don't want them to be read-only - therefore unpacking your objects is a good choice here.
If it's a solution, will it be implemented?
Description
After upgrading my Reanimated components to Reanimated 2 / 3, one of the components' animation behavior was not working in some cases. When I started the code in development mode (iOS simulator) to check out what was going wrong, I got a strange error message in the same Reanimated component:
The error can be reproduced by the following minimal repro:
See also the following repository:
https://github.com/yolpsoftware/rea-3-bugrepro-836
The error seems to happen in the file
react-jsx-runtime.development.js
(line 1113), and it only happens in development mode, so it seems my animation problems in production might have a different cause.Also, it seems that this file is a generic React file, and does not have a direct connection to Reanimated. However, as soon as you remove the
useAnimatedStyle
hook, the error does not happen anymore. That's why I posted it here. If you can reduce it to a minimal repro that does not contain any Reanimated code, I'm happy to submit it as a React or React Native bug.Steps to reproduce
Snack or a link to a repository
https://github.com/yolpsoftware/rea-3-bugrepro-836
Reanimated version
3.3.0
React Native version
0.72.3
Platforms
iOS
JavaScript runtime
Hermes
Workflow
Expo managed workflow
Architecture
Paper (Old Architecture)
Build type
Debug mode
Device
iOS simulator
Device model
No response
Acknowledgements
Yes