FlatList declares a local variable for "props"

[ctapang]

Description

I have tried to repro the issue, but it won't repro because of the nature of the bug. The bug is about an un-initialized local variable in the FlatList class declaration ("props") that shouldn't be there. As it is, this props declaration is never initialized. In the constructor, it is referenced as follows:

  constructor(props: Props<ItemT>) {
    super(props); // props here refers to constructor parameter
    this._checkProps(this.props); // refers to local var, which is uninitialized

In my case, an exception occurs in _checkProps because this.props is undefined. The "props" parameter in the constructor (line 421) declares a "props" local object by default, but this declaration is hidden by the other props declaration in line 306, which is not initialized.

Note: I am using both Expo and Metro, but this does not seem to be relevant to the issue. Expo and Metro would only be relevant in terms of how props gets initialized, but I don't think either Expo or Metro could prevent initialization of a local variable in a react-native component, especially in this case.

The repro app I did was not reproducing the issue, but I think that's only because the uninitialized var props happens to have a viable viable value in this case.

Steps to reproduce

1. Using dev environment (PC), Create a react-native app that uses a FlatList.
2. Run Expo packager in PC using "npx expo start".
3. Connect Android phone and run Expo app. Expo app connects to PC and downloads app package.
4. Android phone starts running react-native app.

Expected: app runs with no issues.

Actual: app crashes with following error:

ERROR TypeError: Cannot read property 'getItem' of undefined

This error is located at:
in FlatList
in RCTView (created by View)
in View (created by ScreenWithoutScrolling)
in RCTView (created by View)
in View (created by KeyboardAvoidingView)
in KeyboardAvoidingView (created by ScreenWithoutScrolling)
in ScreenWithoutScrolling (created by Screen)
in Screen
in RCTView (created by View)
in View

React Native Version

0.72.6

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: Windows 10 10.0.19045
  CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
  Memory: 2.55 GB / 15.74 GB
Binaries:
  Node:
    version: 20.10.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.21
    path: C:\Program Files\nodejs\yarn.CMD
  npm:
    version: 9.2.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowAllTrustedApps: Disabled
    Versions:
      - 10.0.17763.0
      - 10.0.19041.0
IDEs:
  Android Studio: AI-231.9392.1.2311.11255304
  Visual Studio:
    - 16.11.32901.82 (Visual Studio Community 2019)
Languages:
  Java: 17.0.6
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.6
    wanted: 0.72.6
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

This error is located at:
    in FlatList
    in RCTView (created by View)
    in View (created by ScreenWithoutScrolling)
    in RCTView (created by View)
    in View (created by KeyboardAvoidingView)
    in KeyboardAvoidingView (created by ScreenWithoutScrolling)
    in ScreenWithoutScrolling (created by Screen)
    in Screen
    in RCTView (created by View)
    in View
    in Unknown (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen
    in Unknown (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 SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by _c)
    in _c (created by AppNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by AppNavigator)
    in AppNavigator (created by App)
    in ErrorBoundary (created by App)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes

Reproducer

https://github.com/does/not/repro

Screenshots and Videos

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.72.10. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[ctapang]

It is possible that several other FlatList bugs are related to this un-initialized props variable. Please take a look even though there is no reproducer.

[ctapang]

The same code exists in the latest version, so this problem still exists in the latest version.

[cortinico]

this._checkProps(this.props); // refers to local var, which is uninitialized

this.props is initialized in the super constructor which is called just above.

Without a reproducer we can't check what's going on here.

[NickGerleman]

This happens due to misconfigured Babel config. Some combination of transforms seems to turn this code into something invalid. Has been observed when folks add the transform for private members and functions, which RN now supports out of the box.

Have you customized the config you are using beyond the Metro preset?

[ctapang]

Somebody in Discord pointed me to issue #36828 and so I compared my Babel config to the Babel config that should fix the issue. I tried a couple of fixes in 36828 and both of those failed. If you read the discussion in 36828, it seems to me that the fixes are not consistent: one fix works for one person and another for another person. I think this is symptomatic of an uninitialized var or prop.

I don't believe that the call super(props) initializes this.props - I have been looking for documentation on this and I can't find any that says super() is able to initialize props declared in the derived class.

If it were true that super(props) does initialize this.props, then it should still work for you if you initialize the declaration in line 306:

props: Props = null;

On the other hand, if it now fails for you, then we would have proven that super() does not initialize this.props

[ctapang]

The best way to fix this bug is here:
#36828 (comment)

[ctapang]

It's not possible for users like me to fix this by modifying FlatList.js directly because subsequent EAS builds would simply erase the fix. We need the react-native team to fix it.

[radovix]

It's not possible for users like me to fix this by modifying FlatList.js directly because subsequent EAS builds would simply erase the fix. We need the react-native team to fix it.

I'm having the same issue. "Fixed" it by adding that props initialization myself and using the patch-package to save the change for other colleagues.

[ctapang]

It's not possible for users like me to fix this by modifying FlatList.js directly because subsequent EAS builds would simply erase the fix. We need the react-native team to fix it.

I'm having the same issue. "Fixed" it by adding that props initialization myself and using the patch-package to save the change for other colleagues.

Thanks for the hint. Didn't know about patch-package.

[dieguezz]

This has been fixed in 0.74-rc1_

In case that you cannot upgrade, you can do this: #34783 (comment)

Can you confirm its working for you and close the issue @ctapang ?

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This issue was closed because it has been stalled for 7 days with no activity.