TypeError: Cannot assign to read-only property 'current'

[MagnasiePro]

Describe the bug

Hello,

Since I updated to React Native 0.72.3, I encountered this error when I rerender a screen with a DraggableFlatlist:

TypeError: Cannot assign to read-only property 'current'.

It was working fine on React Native 0.71.6. I also updated Reanimated from version 2.14.4 to 3.4.1 and react-native-gesture-handler from version 2.9.0 to 2.12.1.

I have tried everything I can, but it seems the problem is within the component.

The first render works correctly, but if I come back to the screen or update a state that triggers a rerender of the component, it crashes with this error.

To Reproduce

import React, { ReactElement, useState, useEffect } from 'react'
import DraggableFlatList, { DragEndParams, RenderItemParams, OpacityDecorator, RenderPlaceholder } from 'react-native-draggable-flatlist'
import { StyleProp, ViewStyle } from 'react-native'

export type DraggableProps<T> = T & {
  drag?: () => void
}

interface Props<T> {
  items: T[]
  renderItem(params: RenderItemParams<T>): ReactElement
  renderPlaceholder?: RenderPlaceholder<T>
  keyExtractor(item: T, index: number): string
  onDrop(to: number, from: number, item: T): void
  style?: StyleProp<ViewStyle>
}

export function CustomDraggableFlatList<T>({ items, renderItem, keyExtractor, onDrop, renderPlaceholder, style }: Props<T>) {
  const [currentOrder, setCurrentOrder] = useState(items)

  useEffect(() => {
    setCurrentOrder(items)
  }, [items])

  function renderDraggableItem(params: RenderItemParams<T>) {
    return <OpacityDecorator activeOpacity={0.6}>{renderItem(params)}</OpacityDecorator>
  }

  function onDragEnd({ to, from, data }: DragEndParams<T>) {
    onDrop(to, from, data[to])
    setCurrentOrder(data)
  }

  return (
    <DraggableFlatList
      data={currentOrder}
      renderItem={renderDraggableItem}
      keyExtractor={keyExtractor}
      onDragEnd={onDragEnd}
      renderPlaceholder={renderPlaceholder}
      containerStyle={style}
    />
  )
}

Platform & Dependencies

• react-native-draggable-flatlist version: 4.0.1
• Platform: iOS (not tested on Android)
• React Native or Expo version: 0.72.3
• Reanimated version: 3.4.1
• React Native Gesture Handler version: 2.12.1

[FlawaCLV]

Same for me

[MarkCSmith]

In case this helps someone else: I was experiencing similar "read-only property" exceptions after I updated react-native-draggable-flatlist from version 3.1.1 to 4.0.1. At the same time I also updated React Native, react-native-reanimated, and many other modules — so lots of changes. I was able to fix the problem by wrapping my app content in a <GestureHandlerRootView> and taking into account some <DraggableFlatList> changes including removing an obsolete ListHeaderComponent prop.

[HuuNguyen312]

Same issue

[robrechtme]

Had the same issue after updating to RN 0.72 (I was already on the latest version of reanimated and RNGH). I could pinpoint it to the ListHeaderComponent prop. When ListHeaderComponent={() => <View />}, I don't get the error, but when ListHeaderComponent={<View />}, I do.

[zailtoncalheiros]

I also mitigated the same issue by downgrading the react-native version to version 0.71.8 (and expo to 48.0.20).

[adclark1]

@robrechtme 's suggestion worked for me. Issue was with ListFooterComponent, which is described here:

https://github.com/computerjazz/react-native-draggable-flatlist/issues/483

I used the alternative () => notation he mentioned and things worked. Good temporary workaround until that's fixed.

[helferleinsoftware]

For me, the error was similar:

TypeError: TaskQueue: Error with task : Cannot assign to read-only property 'validated'

I am on

"react-native-draggable-flatlist": "^4.0.1",
"react-native-reanimated": "~3.3.0",
"expo": "^49.0.7",
"react-native": "0.72.3",
"react-native-gesture-handler": "~2.12.0",

And the error for me is iOS-only!

Using

ListFooterComponent={() => <AddCategory onAddCategory={addCategory} />}

instead of

ListFooterComponent={<AddCategory onAddCategory={addCategory} />}

fixed the error for me.

[ucheNkadiCode]

My error was "cannot assign to read-only property 'validated' but the solution was the same

ListFooterComponent={() => DescriptionMemo}

[Rc85]

Having the same error. The issue is passing a component input ListHeaderComponent with a ref inside and only occurs when the component is unmounting/navigating away from screen.

ListHeaderComponent={
   <TextInput ref={inputRef} />
}

And the reason I can't use arrow function is because when the component rerenders from the TextInput being changed, the keyboard dismisses on every key entered. https://github.com/facebook/react-native/issues/13365

ERROR  TypeError: Cannot assign to read-only property 'current'

This error is located at:
    in MaybeScreen (created by CardStack)
    in RNSScreenContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by CardStack)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by CardStack)
    in CardStack (created by HeaderShownContext)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by StackView)
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by StackView)
    in StackView (created by StackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by StackNavigator)
    in StackNavigator (created by Menus)
    in Menus (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by Drawer)
    in RCTView (created by View)
    in View (created by Screen)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by Screen)
    in Screen (created by Drawer)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by Drawer)
    in RNSScreenContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by Drawer)
    in RCTView (created by View)
    in View (created by Drawer)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by Drawer)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by PanGestureHandler)
    in PanGestureHandler (created by Drawer)
    in Drawer (created by DrawerViewBase)
    in DrawerViewBase (created by DrawerView)
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by DrawerView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by DrawerView)
    in DrawerView (created by DrawerNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by DrawerNavigator)
    in DrawerNavigator (created by Main)
    in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
    in BottomSheetModalProviderWrapper (created by Main)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by Main)
    in RCTView (created by View)
    in View (created by Main)
    in Main (created by App)
    in RNCSafeAreaView
    in Unknown (created by Initialize)
    in RCTView (created by View)
    in View (created by ModalPanel)
    in ModalPanel (created by ApplicationProvider)
    in ThemeProvider (created by StyleProvider)
    in MappingProvider (created by StyleProvider)
    in StyleProvider (created by ApplicationProvider)
    in ApplicationProvider (created by Initialize)
    in Initialize (created by App)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by App)
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by App)
    in PersistGate (created by App)
    in Provider (created by App)
    in QueryClientProvider (created by App)
    in App (created by RootApp)
    in ReactNativeProfiler (created by RootApp)
    in RCTView (created by View)
    in View (created by __Sentry.TouchEventBoundary)
    in __Sentry.TouchEventBoundary (created by RootApp)
    in RootApp
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in merchant(RootComponent), js engine: hermes

I tried FlatList and there is no issue with the ref at all.

I also tried to replicate the error on snack.expo.dev but I cannot get 4.0.1 to work. Using 3.1.2, there was no error.

[watadarkstar]

Had the same issue after updating to RN 0.72 (I was already on the latest version of reanimated and RNGH). I could pinpoint it to the ListHeaderComponent prop. When ListHeaderComponent={() => <View />}, I don't get the error, but when ListHeaderComponent={<View />}, I do.

I had the same issue with ListFooterComponent thanks for the solution!

[varem611]

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

[afrasali07]

Facing issue here in the below link.

Not able to pass components directly and getting locked with re-render issue

https://github.com/computerjazz/react-native-draggable-flatlist/issues/483#issuecomment-2312204218