I'm a beginner in react, I learned using a (french) tutorial for learning react native. I have a new library in my project and I added react-navigation, i don't know why i have this error when I check my device.
"Unable to resolve module 'react-navigation-stack' from 'Navigation/Navigation.js' (my files) react-navigation-stack could not be found within the project.
Here is the link to the french tutorial: https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/5046301-concevez-une-navigation-entre-vos-vues
Thanks you so much if you can help me. I don't understand why it does not work
Package.json :
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-web": "~0.11.7",
"react-navigation": "^4.4.0"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
Your guide is using React Navigation 4, and it has a link to React Navigation page which has been updated to use version 5.
So you are probably missing some dependencies here, but since you are learning, it would be best to move to the new version and follow the Getting started guide to install new version and all dependencies, and then use:
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
You also have a code example there: Hello React Navigation
Related
I'm new to React Native. I get import errors like this when I try to import a class from another file in React Native. How can I resolve this ? (I'm using react-navigation 2.18.3)
C:/Users/Suman Shaw/Login/components/Login.js
Module not found: Can't resolve '../config/firebaseSDK' in 'C:\Users\Suman Shaw\Login\components'
[![my folder hierarchy][1]][1]
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~36.0.0",
"firebase": "^7.9.3",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gifted-chat": "^0.13.0",
"react-native-web": "~0.11.7",
"react-navigation": "^2.18.3",
"uuid": "^7.0.1"
},
"devDependencies": {
"babel-preset-expo": "~8.0.0",
"#babel/core": "^7.0.0"
},
"private": true
}
Can't resolve '../config/firebaseSDK' means you are giving wrong path
import as '../../'till you find config
you can refer this https://www.youtube.com/watch?v=ephId3mYu9o
I am getting the following error on creating the navigation stack as follows:
Unable to resolve "./vendor/TransitionConfigs/CardStyleInterpolators" from "node_modules/react-navigation-stack/lib/module/index.js"
App.js:-
import React from "react";
import {createAppContainer,createSwitchNavigator} from "react-navigation";
import {createStackNavigator} from "react-navigation-stack";
import {createBottomTabNavigator} from "react-navigation-tabs";
import AccountScreen from "./src/screens/AccountScreen";
import SigninScreen ...... ;
const switchNavigator=createSwitchNavigator({
loginFlow:createStackNavigator({
Signin:SigninScreen,
Signup:SignupScreen
}),
mainFlow:createBottomTabNavigator({
trackListFlow:createStackNavigator({
TrackList:TrackListScreen,
TrackDetails:TrackDetailsScreen
}),
TrackCreate:TrackCreateScreen,
Account:AccountScreen
})
});
export default createAppContainer(switchNavigator);
I am using the following dependency version:-
Package.json:-
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gesture-handler": "^1.5.3",
"react-native-reanimated": "^1.4.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.7.0"
},
"devDependencies": {
"babel-preset-expo": "~8.0.0",
"#babel/core": "^7.0.0"
},
"private": true
}
While bundling I am getting the following error although I am using stable version of all the dependencies...
You need to clear your metro Cache.
Since you're using Expo, first stop Expo server. Then run:
expo start -c
If you're not, run:
react-native start --reset-cache
So, I deleted and reinstalled everything possible for React Native. I began to get an error for expo. In the terminal a reoccurring error was .json is missing. I don’t know how to fix this. I’m new to React and using a Mac. I was in the middle of a tutorial when it all stopped working. Thank you in advance!
Please create package.json file in your project root folder and past below code and update according to your requirement like project name or description:
{
"name": "expo-template-tabs",
"description": "The Tab Navigation project template includes several example screens.",
"version": "0.0.2",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/samples": "2.1.1",
"expo": "^31.0.5",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-navigation": "^3.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"jest-expo": "^31.0.0"
}
}
Then run below command:
- npm install
I hope it would help you out.
Problem:
I have created a react native application there I am using the react-navigation-tab module. But It causing an error which says this.
Unable to resolve "react-native-reanimated" from "node_modules\react-navigation-tabs\lib\module\views\MaterialTopTabBar.js
This is my package.json file.
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "^35.0.0",
"expo-linear-gradient": "^7.0.0",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-native": "0.59.8",
"react-native-elements": "^1.2.1",
"react-native-gesture-handler": "~1.3.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.11.7",
"react-navigation": "^4.0.8",
"react-navigation-stack": "^1.9.0",
"react-navigation-tabs": "^2.5.5"
},
"devDependencies": {
"babel-preset-expo": "^7.0.0"
},
"private": true
}
I tried lot to find a solution to this problem on the internet but I was unable to do so. Can someone help me to solve this issue? Thank you.
You need to in add "react-native-reanimated" library also as described in react navigation site
Try this
yarn add react-native-reanimated
# or with npm
cd ios
pod install
I encounter a problem with, I think, Expo environment
When my Redux State is updated, my components are not rendered, whereas in Production mode, everything works fine
I do not print my code because it's surely not related to code, but rather than Expo environnement. Some others developers encountered that problem, but I still not found a working solution ..
It's just annoying to code in Prod' env rather than Dev' / Local env
Here is my package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"expo": "^32.0.0",
"native-base": "^2.12.1",
"react": "^16.5.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-navigation": "^3.9.1",
"react-redux": "^6.0.0",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"schedule": "^0.4.0"
},
"private": true
}
If anyone has an idea about how to fix it, it would be great
If you require more information, don't hesitate to ask
EDIT : Here is my app.js
import React from 'react'
import { View, StyleSheet } from 'react-native'
import Navigation from './Navigation/Navigation'
import { Provider } from 'react-redux'
import Store from './Store/configureStore'
class App extends React.Component {
render() {
return (
<Provider store={Store} >
<Navigation />
</Provider>
);
}
}
export default App
Here is another Git post relative to this subject : https://github.com/expo/expo/issues/3859#issuecomment-490979505