Most of the react navigation examples on snack are not working

[armyofda12mnkeys]

Most of the react navigation examples on snack are not working

[wodin]

Hi @armyofda12mnkeys

Yes, it looks to me like there are extra dependencies specified in package.json that don't need to be there are are causing problems.

e.g. if I try the link you posted above, it only has the following imports:

import * as React from 'react';
import { View, Text, Button, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

By the way, the first one (the 'react' import) is no longer needed and can just be deleted.

If you check package.json it has all of these dependencies specified:

  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-community/masked-view": "*",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-pager-view": "6.1.2",
    "react-native-paper": "^4.7.2",
    "react-native-reanimated": "~2.14.4",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-tab-view": "^3.0.0",
    "@react-navigation/bottom-tabs": "6.3.1",
    "@react-navigation/drawer": "6.4.1",
    "@react-navigation/elements": "1.3.3",
    "@react-navigation/material-bottom-tabs": "6.2.1",
    "@react-navigation/material-top-tabs": "6.2.1",
    "@react-navigation/native-stack": "6.6.1",
    "@react-navigation/native": "6.0.10",
    "@react-navigation/stack": "6.2.1"
  }

In Snack it does not list things like expo or react-native. They are automatically included based on the selected Expo SDK version.

The following should fix this Snack: Remove everything from dependencies except the stuff you're actually importing:

  "dependencies": {
    "@react-navigation/native-stack": "6.6.1",
    "@react-navigation/native": "6.0.10"
  }

Snack will then prompt you to add back a few things and you'll end up with this:

  "dependencies": {
    "@react-navigation/native": "6.0.10",
    "@react-navigation/native-stack": "6.6.1",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0"
  }

If I do that it works for me.

[wodin]

@satya164 I think this issue can be closed since you and Cedric fixed the examples