i could not resolve this bundling error with react navigation v4 - react-native

bundling failed: Error: Unable to resolve module react-navigation-stack from App.js: react-navigation-stack could not be found within the project.
i tried removing the node modules and reinstalling them, clearing the cache, trying the same in a new fresh project but no result
Package.json file
{
"name": "navigator",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.9.0",
"react-native": "0.61.2",
"react-native-gesture-handler": "^1.4.1",
"react-native-reanimated": "^1.3.0",
"react-native-screens": "1.0.0-alpha.23",
"react-navigation": "^4.0.10"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/runtime": "^7.6.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
App.js
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './src/screens/HomeScreen';
import ComponentScreen from './src/screens/ComponentScreen';
const navigator = createStackNavigator(
{
Home: HomeScreen
},
{
initialRouteName: 'Home',
defaultNavigationOptions: {
title: 'App'
}
}
);
export default createAppContainer(navigator);

Your package.json does not have the module you want to use. You need to install a module.
yarn add react-navigation-stack
or
npm install react-navigation-stack

npm install react-navigation-stack
npm install react-navigation-stack --save

Related

Error: Unable to resolve module react-navigation-stack from /src/navigation/index.js:

I'm a react-native beginner.
I was doing stack screen. Then I've got the below error.
Error: Unable to resolve module react-navigation-stack from /Users/chosohee/app2/src/navigation/index.js: react-navigation-stack could not be found within the project or in these directories:
node_modules
../node_modules
1 | import { createAppContainer, createSwitchNavigator } from 'react-navigation';
> 2 | import { createStackNavigator } from 'react-navigation-stack';
| ^
3 | import LoginScreen from './LoginScreen';
4 | import HomeScreen from './HomeScreen';
5 |
at ModuleResolver.resolveDependency (/Users/chosohee/app2/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:178:15)
at DependencyGraph.resolveDependency (/Users/chosohee/app2/node_modules/metro/src/node-haste/DependencyGraph.js:264:43)
at Object.resolve (/Users/chosohee/app2/node_modules/metro/src/lib/transformHelpers.js:170:21)
at resolveDependencies (/Users/chosohee/app2/node_modules/metro/src/DeltaBundler/graphOperations.js:466:33)
at processModule (/Users/chosohee/app2/node_modules/metro/src/DeltaBundler/graphOperations.js:232:31)
at async addDependency (/Users/chosohee/app2/node_modules/metro/src/DeltaBundler/graphOperations.js:361:18)
at async Promise.all (index 7)
at async processModule (/Users/chosohee/app2/node_modules/metro/src/DeltaBundler/graphOperations.js:279:3)
at async addDependency (/Users/chosohee/app2/node_modules/metro/src/DeltaBundler/graphOperations.js:361:18)
at async Promise.all (index 7)
Here is my src/navigation/index.js
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginScreen from './LoginScreen';
import HomeScreen from './HomeScreen';
const AuthStack = createStackNavigator(
{
LoginScreen: {screen: LoginScreen},
HomesScreen: {screen: HomeScreen}
},
{
initialRouteName: 'LoginScreen'
}
);
const AppNavigator = createSwitchNavigator(
{
Auth: AuthStack
},
{
initialRouteName: 'Auth',
}
);
export default createAppContainer(AppNavigator);
Here is my package.json
{
"name": "app2",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "0.1.11",
"#react-navigation/bottom-tabs": "6.5.2",
"#react-navigation/native": "6.1.1",
"#react-navigation/native-stack": "6.9.7",
"#react-navigation/stack": "6.3.10",
"react": "18.1.0",
"react-native": "0.70.6",
"react-native-gesture-handler": "2.8.0",
"react-native-reanimated": "2.13.0",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "3.18.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "0.72.3",
"react-test-renderer": "18.1.0"
},
"jest": {
"preset": "react-native"
}
}
I tried
Unable to resolve module 'react-navigation'
https://github.com/react-navigation/react-navigation/issues/9976
https://reactnavigation.org/docs/troubleshooting/
when I tried
npx react-native start --reset-cache
I got another error below.
error listen EADDRINUSE: address already in use :::8081.
Error: listen EADDRINUSE: address already in use :::8081
at Server.setupListenHandle [as _listen2] (node:net:1717:16)
at listenInCluster (node:net:1765:12)
at Server.listen (node:net:1853:7)
at /Users/chosohee/app2/node_modules/metro/src/index.flow.js:398:14
at new Promise (<anonymous>)
at earlyPortCheck (/Users/chosohee/app2/node_modules/metro/src/index.flow.js:394:11)
at exports.runServer (/Users/chosohee/app2/node_modules/metro/src/index.flow.js:155:9)
at Object.runServer [as func] (/Users/chosohee/app2/node_modules/#react-native-community/cli-plugin-metro/build/commands/start/runServer.js:123:49)
at async Command.handleAction (/Users/chosohee/app2/node_modules/#react-native-community/cli/build/index.js:142:9)
info Run CLI with --verbose flag for more details.
Your import is not correct according to the stack navigation documentation you need to import createStackNavigator from #react-navigation/stack not from react-navigation-stack like this:
import { createStackNavigator } from '#react-navigation/stack';
For more information you can check the documentation from here.

How to use container in react native?

I am very new to React native I am trying to show content it is showing from starting. But I have
To show the content from the container, but I don't know how to apply this in React native. So
So someone please help me how to use container in React native.
In this component I tried some code please check it once
This is App.js
import React from 'react';
import {View, Text} from 'react-native';
const App = props => {
return (
<View>
<Text>Hi Mark</Text>
</View>
);
};
export default App;
These are the packages I installed in my React native project
{
"name": "testone",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/native": "^5.3.2",
"#react-navigation/stack": "^5.3.6",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^1.0.0",
"react-native-screens": "^2.7.0"
},
"devDependencies": {
"#babel/core": "7.9.6",
"#babel/runtime": "7.9.6",
"#react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "6.8.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.58.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
Note I am not using expo I am using pure React native for app development.
Add margin style property to root View to make it like container
import React from "react";
import { Text, View } from "react-native";
const App = () => {
return (
<View style={{ margin:100 }}>
<Text>Hi There!</Text>
</View>
);
};
export default App;

When I Press Back Button(from the stack header) or swipe left to right, ios app crashes

When I Press Back Button(In the stack header) or swipe left to right in a physical iPhone device my react native app crashes. The App is working fine in the simulator but not in a physical device.
So, how can I fix this issue?
Here is the code for my main navigator
import { themeColor, themeColorLite } from "../styles/common";
import Login from "../views/Login"
import ForgetPass from "../views/forgetPass"
import Registration from "../views/Registration"
import UserDashboard from "../views/user/dashboard"
import ProductDetails from "../views/user/productDetails"
import ShoppingMall from "../views/user/shoppingMalls"
import Shops from "../views/user/shops"
import NormalProducts from "../views/user/normalProducts"
import ShoppingCart from "../views/user/shoppingCart"
import UserProfile from "../views/user/profile"
import { createSwitchNavigator, createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createDrawerNavigator } from 'react-navigation-drawer'
import UserDrawerNav from '../views/drawerNav'
const ProductStackNavigator = createStackNavigator({
UserDashboard: UserDashboard,
ProductDetails: ProductDetails,
ShoppingCart: ShoppingCart,
ShoppingMall: ShoppingMall,
Shops: Shops,
NormalProducts: NormalProducts
})
const DrawerNavigator = createDrawerNavigator(
{
UserDashboard: ProductStackNavigator,
ShoppingMall: ProductStackNavigator,
UserProfile: UserProfile
},
{
contentComponent: UserDrawerNav,
hideStatusBar: true,
drawerBackgroundColor: 'white',
overlayColor: themeColorLite,
contentOptions: {
activeTintColor: '#fff',
activeBackgroundColor: themeColor,
}
}, {
unmountInactiveRoutes: true
}
);
const AuthStack = createSwitchNavigator({
Login: { screen: Login } ,
Registration: { screen: Registration } ,
ForgetPass: { screen: ForgetPass }
});
const AppContainer = createAppContainer(createSwitchNavigator(
{
App: DrawerNavigator,
Auth: AuthStack
},
{
initialRouteName: 'Auth',
}
));
export default AppContainer;
Here is my package.json
{
"name": "ENC",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"ipadAir": "react-native run-ios --simulator 'iPad Air (3rd generation)'",
"start": "react-native start",
"iphone11": "react-native run-ios --simulator 'iPhone 11'",
"cleanStart": "react-native start --reset-cache",
"link": "react-native link",
"podInstall": "cd ios && pod install && cd ..",
"podUpdate": "cd ios && pod update && cd ..",
"upgradeRN": "react-native upgrade",
"regenDir": "react-native upgrade --legacy true",
"test": "jest"
},
"dependencies": {
"#react-native-community/async-storage": "^1.6.1",
"axios": "^0.19.0",
"react": "16.10.1",
"react-native": "0.61.2",
"react-native-flip-card": "^3.5.5",
"react-native-fs": "^2.14.1",
"react-native-gesture-handler": "^1.4.1",
"react-native-image-picker": "^1.1.0",
"react-native-photo-upload": "^1.3.0",
"react-native-really-awesome-button": "^1.4.2",
"react-native-reanimated": "^1.2.0",
"react-native-tiny-toast": "^1.0.3",
"react-native-webview": "^7.4.0",
"react-native-xml2js": "^1.0.3",
"react-navigation": "^4.0.5",
"react-navigation-drawer": "^2.2.1",
"react-navigation-stack": "1.5.1"
},
"devDependencies": {
"#babel/core": "^7.5.0",
"#babel/runtime": "^7.5.0",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.1.0",
"jest": "^24.1.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.10.1"
},
"jest": {
"preset": "react-native"
}
}
The above code is also available at my gist here
Finally found the solution after profiling the issue in xcode
this solution is work for me fine :
https://github.com/kmagiera/react-native-gesture-handler/issues/320#issuecomment-447534290

Solution to react-navigation Can't find module

Does React has a solution for this issue. This is really frustrating
none of thee fix workaround work.
this is my package.json
{
"name": "HotelReservation",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "^16.3.0-alpha.1",
"react-native": "0.54.0",
"react-navigation": "^1.5.1"
},
"devDependencies": {
"#babel/core": "^7.6.0",
"#babel/runtime": "^7.6.0",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.4.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
and class App
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import HomeScreen from './screens/HomeScreen'
import ProfileScreen from './screens/ProfileScreen'
const MainNavigator = createStackNavigator({
Home: {screen: HomeScreen},
Profile: {screen: ProfileScreen},
});
const App = createAppContainer(MainNavigator);
export default App;
Anything I should update ?
Is that a react issue or a bug with react-navigation
Looking at your package.json file, it seems like you do not have the following libraries: react-native-reanimated, react-native-gesture-handler and react-native-screens. If you are using bare React Native project, you need to add these libraries and link those libraries. For versions of React Native 0.60 and higher, these libraries will be automatically linked after you add the above libaries (i.e either use yarn or npm to add those). However, as you are using React Native 0.59, you need to link the dependencies manually. Refer to this documentation to add and link those dependencies. It also gives you all the details of getting started on React Navigation.

Cannot run React Native project with Expo

I have an old React Native project, now i want to run it with Expo. The problem is Expo software stuck at “waiting for package and tunnel to start” when i try to use Expo to open the project and start it. I am working on MacOS with watchman already installed.
Here's the structure of my project
My app.json:
{ "name": "myapp", "displayName": "myApp", "expo": { "sdkVersion": "28.0.0" } }
package.json:
{
"name": "MyApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"expo": "^28.0.0",
"react": "15.4.1",
"react-native": "0.42.0",
"react-native-calendar-strip": "^0.1.4",
"react-native-check-box": "^1.0.4",
"react-native-checkbox": "^1.1.0",
"react-native-code-push": "1.17.0-beta",
"react-native-collapsible": "0.8.0",
"react-native-datepicker": "^1.6.0",
"react-native-fetch-blob": "0.10.6",
"react-native-image-picker": "0.26.2",
"react-native-keyboard-aware-scroll-view": "^0.2.9",
"react-native-modal-picker": "0.0.16",
"react-native-modalbox": "1.3.9",
"react-native-pdf": "1.2.4",
"react-native-picker": "4.0.18",
"react-native-signature-pad": "git+https://github.com/silverspace/react-native-signature-pad/#greg/android_blank_workaround",
"react-native-simple-store": "^1.2.0",
"react-native-vector-icons": "4.0.1",
"react-navigation": "1.0.0-beta.7",
"react-redux": "5.0.3",
"realm": "2.11.0",
"redux": "3.6.0",
"redux-logger": "2.8.2",
"redux-thunk": "2.2.0",
"tipsi-stripe": "3.2.0"
},
"devDependencies": {
"babel-jest": "19.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "20.0.4",
"react-test-renderer": "15.4.1"
},
"jest": {
"preset": "react-native"
}
}
index.ios.js and and index.android.js have the same code: import './App';
Here's my App.js:
import React from 'react';
import {
AppRegistry,
Text,
View,
Button,
AppState,
DeviceEventEmitter
} from 'react-native';
import { BackAndroid } from 'react-native'
import { NavigationActions, StackNavigator } from 'react-navigation';
// Redux
import { Provider } from 'react-redux'
import store from './app/store'
import codePush from 'react-native-code-push';
import HomeNavigation from './app/Home/screens/HomeNavigation'
import simpleStore from 'react-native-simple-store';
import { HOST } from './app/Common/constants';
const GET_USER_URL = `${HOST}/api/user`;
let codePushOptions = {
checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
installMode: codePush.InstallMode.ON_NEXT_RESUME
};
class App extends React.Component {
//Doing something here...
render(){
return(
<Provider store={store}>
<HomeNavigation />
</Provider>
)
}
}
export default CodePushApp = codePush(codePushOptions)(App);
AppRegistry.registerComponent('MypApp', () => CodePushApp);
I have try to install Expo on a Window PC but still have the same issues when try to run this project.
I know this is late but if you have already installed expo-cli then try changing the scripts section of your package.json file to the following
"scripts": {
"start": "expo start",
"eject": "expo eject",
"android": "expo start --android",
"ios": "expo start --ios",
"test": "jest"
}
This worked for me