Skip to content

[Enhancement] A props object containing a "key" prop is being spread into JSX #186

@hank205

Description

@hank205

Problem

When ModalSelector set property backdropPressToClose={true}, a warning message shows up because of changes in React 18:

 (NOBRIDGE) ERROR  Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, accessible: ..., onPress: ..., children: ...};
  <TouchableWithoutFeedback {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {accessible: ..., onPress: ..., children: ...};
  <TouchableWithoutFeedback key={someKey} {...props} />
    in ModalSelector (created by Index)
    in RCTView (created by View)
    in View (created by Index)
    in RCTView (created by View)
    in View (created by Index)
    in Index
    in Unknown (created by Route(index))
    in Suspense (created by Route(index))
    in Route (created by Route(index))
    in Route(index) (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by NativeStackNavigator)
    in RNSScreenContentWrapper (created by ScreenContentWrapper)
    in ScreenContentWrapper (created by DebugContainer)
    in DebugContainer
    in RNSScreen (created by Animated(Anonymous))
    in Animated(Anonymous)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze
    in InnerScreen (created by Screen)
    in Screen
    in ScreenStackItem (created by SceneView)
    in SceneView (created by NativeStackView)
    in RNSScreenStack (created by ScreenStack)
    in Unknown (created by ScreenStack)
    in ScreenStack (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaProviderCompat)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator
    in Unknown (created by RootLayout)
    in RootLayout
    in Unknown (created by Route())
    in Suspense (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in wrapper (created by ContextNavigator)
    in ThemeProvider
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (created by withDevTools(ErrorOverlay))
    in withDevTools(ErrorOverlay)
    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)

Fix

in index.js around line 296-315 split the "key" property out of overlayProps.

        let overlayKey = {};
        ...

          overlayKey = {
            key: `modalSelector${componentIndex++}`,
          }
          overlayProps = {
              accessible: false,
              onPress: this.close,
        ...

            <Overlay key={overlayKey} {...overlayProps}>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions