Skip to content
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

Render Error: Cannot assign to read-only property 'current' #524

Open
0xsilver-bullet opened this issue Jan 29, 2024 · 2 comments
Open

Render Error: Cannot assign to read-only property 'current' #524

0xsilver-bullet opened this issue Jan 29, 2024 · 2 comments

Comments

@0xsilver-bullet
Copy link

Call Stack:
useSetupRefs
RefProvider

const animationConfigRef = useRef(animConfig);
animationConfigRef.current = animConfig;

it crashes when trying to set animationConfigRef value

Describe the bug
This bug only occurs in Debug mode but it's working fine in release mode.
The initial render for the screen works fine but in case of triggering rerender when any state changes it crashes with this error.
This is different to what's mentioned in the issue #496 where the bug could be solved by passing a function that returns a component to ListHeader, in my case even removing ListHeader component doesn't solve the issue.

To Reproduce
<DraggableFlatList horizontal showsHorizontalScrollIndicator={false} activationDistance={30} data={subImagesUris} keyExtractor={item => item} contentContainerStyle={{paddingVertical: 8}} onDragEnd={({data}) => { applyNewOrder(data); }} renderItem={({item, drag, isActive}) => ( <ScaleDecorator> <Pressable key={item} onPress={() => onSelect(item)} onLongPress={() => { Vibration.vibrate(); setTimeout(() => { Vibration.cancel(); }, 50); drag(); }} delayLongPress={125} disabled={isActive}> <Image style={styles.subContainer} source={{uri: item}} /> </Pressable> </ScaleDecorator> )} ListFooterComponent={ subImagesUris.length >= 10 ? undefined : ( <TouchableOpacity style={styles.pickSubImageButton} onPress={onPickSubImages}> <AddCircularIcon /> </TouchableOpacity> ) } />

Note that in my my case it's enough to render the component with much simpler props and error would still occur in debug mode.

Platform & Dependencies
Please list any applicable dependencies in addition to those below (react-navigation etc).

  • react-native-draggable-flatlist version: 4.0.1
  • Platform: Android, iOS
  • React Native : 4.0.1
  • Reanimated version: 4.0.1
  • React Native Gesture Handler version: 4.0.1
@Rc85
Copy link

Rc85 commented Mar 29, 2024

Duplicate #496

@varem611
Copy link

The fix can be found here in PR 484
It has not been committed by the maintainer/s of this lib, but I have used it and it resolves the issue. Apply it using patch-package. All credit to NoahCardoza

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants