TypeError: property is not configurable (in NavigationContainerInner)

[beetlebum]

After upgrading from 6.0.0-next.9 to 6.0.0-next.10, the application crashes with the following error:

This error is located at:
    in NavigationContainerInner (at Navigation.tsx:251)
    in RCTView (at View.js:34)
    in View
    in Unknown (at Navigation.tsx:250)
    in RCTView (at View.js:34)
    in View (at touchevents.js:74)
    in __Sentry.TouchEventBoundary (at EventBoundary.tsx:36)
    in ErrorBoundary (at EventBoundary.tsx:35)
    in EventBoundary (at Navigation.tsx:249)
    in Navigation (at App.tsx:14)
    in Splash (at Bootstrap.tsx:86)```

Using `react-native-screens` and `createNativeStackNavigator`

```const navigationRef = React.useRef<NavigationContainerRef>(null);
  const { onStateChange, onReady } = useOnStateChange(navigationRef);
  useNavigationListeners();
  return (
    <EventBoundary>
      <Host>
        <NavigationContainer
          ref={navigationRef}
          {...{ onStateChange, onReady }}
        >```

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/native

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.io link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[emadhajjar]

@react-navigation/native: ^6.0.0-next.10

[beetlebum]

"@react-navigation/bottom-tabs@^6.0.0-next.14" "@react-navigation/core@^6.0.0-next.10" "@react-navigation/drawer@6.0.0-next.2" "@react-navigation/elements@^1.0.0-next.13", "@react-navigation/elements@^1.0.0-next.2" "@react-navigation/native@^6.0.0-next.10" "@react-navigation/routers@^6.0.0-next.3" "@react-navigation/stack@^6.0.0-next.20" "react-native-screens@^3.2.0"

[satya164]

Can you provide a repro in a GitHub repo?

[emadhajjar]

import React from 'react'
import { Text } from 'react-native'
import {
  NavigationContainer,
  useNavigationContainerRef,
} from '@react-navigation/native'

export default function Main() {
  const navigationRef = useNavigationContainerRef()

  return (
      <NavigationContainer ref={navigationRef} theme={navigationTheme}>
        <Text>test</Text>
      </NavigationContainer>
  )
}

[satya164]

@aleppos we have the same code in the example app, so there's not much I can debug here. it'd be helpful if you can provide a repro where it happens so I can check

[hisothreed]

having the same issue when upgrading from 6.0.0-next.9 to next.10 or next.11, same code didn't change anything in my codebase

[hisothreed]

I guess this was fixed by in this commit, https://github.com/react-navigation/react-navigation/commit/324ea7181db6b743f512854be267cc9d65975b6f, not having the issue anymore on:

    "@react-navigation/elements": "1.0.0-next.16",
    "@react-navigation/native": "6.0.0-next.13",
    "@react-navigation/stack": "6.0.0-next.24",

[QammarJamshaid]

Gettng this issue in

    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/material-bottom-tabs": "^6.2.15",
    "@react-navigation/material-top-tabs": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.16",

on iOS

[github-actions[bot]]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[nvdnvd00]

Can we re-open this issue, I'm getting it on ios too

"@react-navigation/material-top-tabs": "^6.6.2",
"@react-navigation/native": "6.1.6",
"@react-navigation/stack": "6.2.0",

[beetlebum]

Can we re-open this issue, I'm getting it on ios too

"@react-navigation/material-top-tabs": "^6.6.2",
"@react-navigation/native": "6.1.6",
"@react-navigation/stack": "6.2.0",

are you using reanimated 3?

[malikzype]

Getting Same error again using reanimated 3.0.2 and "@react-navigation/bottom-tabs": "6.5.7", "@react-navigation/core": "6.4.8", "@react-navigation/native": "6.1.6", "@react-navigation/stack": "6.3.16",

@beetlebum Any help?

[invyctus92]

Same problem with reanimated 3.0.2 but removing options from page settings with react navigation works

<Stack.Screen name="DetailTeamScreenFromGlobal" component={DetailTeamScreen} // delete this options options={({ navigation, route }) => ({ headerTitle: () => ( <Text style={{ fontFamily: 'Nunito-Regular', }}> {route.params?.pageTitle ?? strings('id_4_15')} </Text> ), })} />

[nvdnvd00]

Can we re-open this issue, I'm getting it on ios too

"@react-navigation/material-top-tabs": "^6.6.2",
"@react-navigation/native": "6.1.6",
"@react-navigation/stack": "6.2.0",

are you using reanimated 3?

I can answer yes. I used reanimated 3 to custom tabbar. When I changed to default tabbar, the issue was disappear

[beetlebum]

Can we re-open this issue, I'm getting it on ios too

"@react-navigation/material-top-tabs": "^6.6.2",
"@react-navigation/native": "6.1.6",
"@react-navigation/stack": "6.2.0",

are you using reanimated 3?

I can answer yes. I used reanimated 3 to custom tabbar. When I changed to default tabbar, the issue was disappear

Can you open a new issue on Github with your findings? thanks (I'm not associated with Software Mansion, I simply reported this issue last year)

[minemos]

Same here

"dependencies": {
    "@react-native-community/blur": "^4.3.0",
    "@react-native-community/netinfo": "^9.3.7",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "@types/react-native-vector-icons": "^6.4.13",
    "patch-package": "^6.5.1",
    "postinstall-postinstall": "^2.1.0",
    "react": "18.2.0",
    "react-native": "0.71.4",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-reanimated": "^3.0.2",
    "react-native-safe-area-context": "^4.5.0",
    "react-native-screens": "^3.20.0",
    "react-native-ui-lib": "^7.2.1",
    "react-native-vector-icons": "^9.2.0",
    "react-native-video": "^5.2.1"
  },

[cocadev]

Me too

[jasontlouro]

+1

[EHRdev]

I had the same problem and it worked for me to downgrade version of react-native-reanimated to: ^2.9.1 in package.json.

After npm i then npx react-native start --reset-cache and then npx react-native run-android

[zhenguet]

+1

    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.16",
    "react": "18.2.0",
    "react-native": "0.71.4",

[idlework]

Reverting to the latest 2.x.x solved this issue for me.

[mikebouwmans]

Could it be an issue with reanimated? Looks like they fixed something in https://github.com/software-mansion/react-native-reanimated/pull/4252