BigList Sections - TypeError: Attempted to assign to readonly property.

I’m using the Section List Example 1:1 from here https://marcocesarato.github.io/react-native-big-list-docs/basics/sections-list/

When I render the List in my View I’m getting:

TypeError: Attempted to assign to readonly property.

This error is located at:
    in BigListItem
    in BigListItem (created by BigList)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (created by BigList)
    in RCTView (at View.js:34)
    in View (created by BigList)
    in BigList (at order-list/index.js:113)
    in OrderList (at orders/index.js:57)
    in RCTView (at View.js:34)
    in View (created by Layout)
    in Layout (created by Context.Consumer)
    in Wrapper (created by Layout)
    in Layout (at orders/index.js:56)
    in OrdersView (at SceneView.tsx:126)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:119)
    in EnsureSingleNavigator (at SceneView.tsx:118)
    in SceneView (at useDescriptors.tsx:209)
    in RCTView (at View.js:34)
    in View (at DebugContainer.native.tsx:27)
    in DebugContainer (at NativeStackView.native.tsx:71)
    in MaybeNestedStack (at NativeStackView.native.tsx:228)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:150)
    in Screen (at NativeStackView.native.tsx:175)
    in SceneView (at NativeStackView.native.tsx:276)
    in RNSScreenStack (at NativeStackView.native.tsx:267)
    in NativeStackViewInner (at NativeStackView.native.tsx:321)
    in SafeAreaProviderCompat (at NativeStackView.native.tsx:320)
    in NativeStackView (at createNativeStackNavigator.tsx:67)
    in NativeStackNavigator (at navigation/index.js:45)
    in OrdersNavigator (at SceneView.tsx:126)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:119)
    in EnsureSingleNavigator (at SceneView.tsx:118)
    in SceneView (at useDescriptors.tsx:209)
    in RCTView (at View.js:34)
    in View (at Screen.tsx:61)
    in RCTView (at View.js:34)
    in View (at Background.tsx:13)
    in Background (at Screen.tsx:56)
    in Screen (at BottomTabView.tsx:129)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:150)
    in Screen (at ScreenFallback.tsx:37)
    in MaybeScreen (at BottomTabView.tsx:122)
    in RNSScreenContainer (at src/index.native.tsx:189)
    in ScreenContainer (at ScreenFallback.tsx:28)
    in MaybeScreenContainer (at BottomTabView.tsx:93)
    in SafeAreaProviderCompat (at BottomTabView.tsx:92)
    in BottomTabView (at createBottomTabNavigator.tsx:112)
    in Unknown (at createBottomTabNavigator.tsx:111)
    in BottomTabNavigator (at navigation/index.js:66)
    in TabNavigator (at SceneView.tsx:126)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:119)
    in EnsureSingleNavigator (at SceneView.tsx:118)
    in SceneView (at useDescriptors.tsx:209)
    in RCTView (at View.js:34)
    in View (at DebugContainer.native.tsx:27)
    in DebugContainer (at NativeStackView.native.tsx:71)
    in MaybeNestedStack (at NativeStackView.native.tsx:228)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:150)
    in Screen (at NativeStackView.native.tsx:175)
    in SceneView (at NativeStackView.native.tsx:276)
    in RNSScreenStack (at NativeStackView.native.tsx:267)
    in NativeStackViewInner (at NativeStackView.native.tsx:321)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:38)
    in SafeAreaProviderCompat (at NativeStackView.native.tsx:320)
    in NativeStackView (at createNativeStackNavigator.tsx:67)
    in NativeStackNavigator (at navigation/index.js:129)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:429)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in ForwardRef(NavigationContainerInner) (at navigation/index.js:104)
    in AppNavigator (at App.js:58)
    in RCTView (at View.js:34)
    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 (at App.js:53)
    in RNCAppearanceProvider (at src/index.tsx:70)
    in AppearanceProvider (at App.js:51)
    in AuthProvider (at App.js:50)
    in QueryClientProvider (at App.js:49)
    in Unknown (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
at [native code]:null in commitRootImpl
at [native code]:null in performSyncWorkOnRoot
at [native code]:null in callFunctionReturnFlushedQueue

When I remove

      renderHeader={renderHeader}
      renderFooter={renderFooter}
      renderSectionHeader={renderSectionHeader}
      renderSectionFooter={renderSectionFooter}

the error is gone.

[mightym]

Oh @marcocesarato one question as I have the chance to bother you 😃 -> Is there somehow a way like with onEndReached to get a callback when a section is reached? In my scenario I somehow need to know which section is currently “visible” to highlight it in somekind of navgiation and also to provide a link to that section.

And is there a way to pass in custom data for each section? Like that you can display a dynamic title per section? Like eg a Date? Currently I figured that I only can use the index of the sections array.

And btw. last thing I realized: using: renderSectionHeader={renderSectionHeader}

const renderSectionHeader = () => <MySectionHeader />;

const MySectionHeader = (section) => {
  console.log(section);
  return (
    <Text>{"Section " + (section + 1)}</Text>
  );
};

Then section is an object that looks like:

Object {
  "0": Object {
    "style": Object {
      "flex": 1,
    },
  },
  "1": Object {
    "width": "100%",
  },
  "2": Object {},
}

And I wonder what this is?

[000xuandu]

@marcocesarato

And is there a way to pass in custom data for each section? Like that you can display a dynamic title per section? Like eg a Date? Currently, I figured that I only can use the index of the sections array.

Can you support it?