No examples from React navigation docs working on Snack - Attempted to assign to readonly property about snack-web HOT 6 CLOSED

I am also having this same problem

from snack-web.

I looked into this a little further.

Maintainers: could it have something to do with this?

And is it an expo snack-web issue or a react-navigation issue?

from snack-web.

To get a little more insight into this:

In the Hello React Navigation page of react-navigation's docs, the first snack example link is this

And as of this writing, it does not work. But if you edit the package.json inside the snack, and change it from this:

{
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.7",
    "@react-navigation/native": "^5.1.3",
    "@react-navigation/bottom-tabs": "^5.2.4",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.4.0",
    "@react-navigation/drawer": "^5.3.4",
    "react-native-reanimated": "^1.7.0",
    "@react-navigation/material-bottom-tabs": "^5.1.6",
    "react-native-paper": "^3.0.0",
    "@react-navigation/material-top-tabs": "^5.1.6",
    "react-native-tab-view": "^2.0.0",
    "@react-navigation/stack": "^5.2.6"
  }
}

to this:

{
  "dependencies": {
    "@react-native-community/masked-view": "0.1.7",
    "@react-navigation/native": "5.1.3",
    "@react-navigation/bottom-tabs": "^5.2.4",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "2.4.0",
    "@react-navigation/drawer": "^5.3.4",
    "react-native-reanimated": "^1.7.0",
    "@react-navigation/material-bottom-tabs": "^5.1.6",
    "react-native-paper": "^3.0.0",
    "@react-navigation/material-top-tabs": "5.1.6",
    "react-native-tab-view": "^2.0.0",
    "@react-navigation/stack": "5.2.6"
  }
}

It will begin to work.

from snack-web.

What do you think is the solution to this?

When I started learning Expo, one of my key pain points was this: When I try a snack, 80% of the time they were broken. That was a real pain. I know it has to do with the nature of npm's package system. So many projects don't lock their versions down, so one repo updates and breaks apps and snacks all over the ecosystem.

I was taking a look at that snack link that I posted in my last comment... and I see that the dependencies are coded in there. Is it safe to say that they (in this case React navigation) should lock down the version numbers in their example snacks and/or projects if they want to keep this from happening?

from snack-web.

@faisalchishtii to make the first snack work on that page you mentioned, open the snack, and change package.json to:

{
  "dependencies": {
    "@react-native-community/masked-view": "0.1.7",
    "@react-navigation/native": "5.1.3",
    "@react-navigation/bottom-tabs": "5.2.4",
    "react-native-safe-area-context": "0.7.3",
    "react-native-screens": "2.4.0",
    "@react-navigation/drawer": "5.3.4",
    "react-native-reanimated": "1.7.0",
    "@react-navigation/material-bottom-tabs": "5.1.6",
    "react-native-paper": "3.0.0",
    "@react-navigation/material-top-tabs": "5.1.6",
    "react-native-tab-view": "2.8.0",
    "@react-navigation/stack": "5.2.6"
  }
}

That got it working for me.

None of the React navigation examples working on the web for me:

All examples are giving below error:
https://reactnavigation.org/docs/drawer-based-navigation/

Device: (900:881) Attempted to assign to readonly property.
Evaluating module://@react-navigation/native.js
Evaluating module://@react-navigation/drawer.js
Evaluating module://App.js.js
Loading module://App.js

I am getting same error when I try it using the Expo appon my Android device.

from snack-web.

Hi 👋

The issues with Snack and react-navigation have been resolved.
I'm going to close this but feel free with new reproduction steps if this still happens for you. 👍

from snack-web.