2

I'm following a tutorial to create this app, and I understand a lot has changed since it was posted. I followed the instructions based and inputted the code that was given in the guides. Now it seems that I am having trouble with conflicting code.

  1. I would type in:

$ npm start

to get my expo started, and I get a notice saying it expected an older version - which I did follow to input the code it said to do to change it, but then that doesn't fix the issue. $ npm start

  1. I then proceed with opening up the EXPO app and would get this ERROR on my screen:

Unable to resolve module pic 1/2

Unable to resolve module pic 2/2

  1. Next I open a new terminal and copy and paste the code

$ npx expo install react-native-reanimated@~2.9.1

resulting in this Error.

Error 1 Image(1/2)

Error 1 Image(2/2)

  1. I then tried:

4a) $npm update

4b) $npx expo install react-native-reanimated@~2.9.1 --legacy-peer-deps

4c) $npx expo install react-native-reanimated@~2.9. --force

4d) Found this code on another StackOverflow question and tried the code:

$ npm install @react-navigation/native --legacy-peer-deps

Steps 4A-4D

I thought everything was good, but when I checked to see my Expo App once again, I still have the same results showing up. I have closed the terminals, and restarted my app just in case, but did not make a difference. It's still the same results from the Step 2 picture I submitted.

I did do:

$npm update

which then just resulted in upgrading the numbers from 2.9.1 to 2.10.0, then I redid the same code as it said to do to bring it back down.

OTHER FILES:

This is what my package.json looks like: 

{
  "name": "uberchallenge",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.1",
    "@reduxjs/toolkit": "^1.8.5",
    "@rneui/base": "^4.0.0-rc.6",
    "@rneui/themed": "^4.0.0-rc.6",
    "expo": "~46.0.9",
    "expo-status-bar": "~1.4.0",
    "react": "18.0.0",
    "react-native": "0.69.6",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "~2.5.0",
    "react-native-reanimated": "~2.9.1",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "~3.15.0",
    "react-native-vector-icons": "^9.2.0",
    "react-redux": "^8.0.4",
    "tailwind-react-native-classnames": "^1.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

My App.js: 

// import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, SafeAreaView } from "react-native";
import React from "react";
import { Provider } from "react-redux";
import { store } from "./store";
import HomeScreen from "./screens/HomeScreen";
import { SafeAreaProvider } from "react-native-safe-area-context";
import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator, createAppContainer } from "react-navigation";

export default function App() {
  const Stack = createStackNavigator();

  return (
    <Provider store={store}>
      <NavigationContainer>
        <SafeAreaProvider>
          <Stack.Navigator>
            <Stack.Screen name="HomeScreen" component={HomeScreen} />
          </Stack.Navigator>
          {/* <HomeScreen /> */}
        </SafeAreaProvider>
      </NavigationContainer>
    </Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

My Setting.json: 

{
  "workbench.colorTheme": "Xcode Classic Dark",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.accessibilitySupport": "on",
  "workbench.editorAssociations": [
    {
      "viewType": "jupyter.notebook.ipynb",
      "filenamePattern": "*.ipynb"
    }
  ],
  "window.zoomLevel": 1
}

CONCLUSION:

Can someone help advise what to try next?

Been trying to figure this out for 2 days now. I'm thinking I need to downgrade one of the other dependencies, but I'm not even sure what numbers to even choose from, or which one exactly to downgrade so they can all work correctly. I was doing great until I got to install all of React Navigation. I did have to force some of the other dependencies in since it wasn't going through with the code that was given through their website.

QueenBossMarilynn
  • 21
  • 3

0 Answers0