When I enter react-native -v in my react-native project directory, all I get is command not found! How do I install this command?
You have to install the react native cli first, globally:
sudo npm i -g react-native-cli
Now you can enter 'react-native -v' at the command line from inside your project directory, and the version info for react native will appear correctly.
You can also see how react native is installed globally on your system (not just for the project) with
npm view react-native version
SCREEN SHOT
Help Please
yarn add #types/react --save-dev
yarn add #types/react-native --save-dev
I am getting multiple Imports and not getting all Components
Delete all node_modules and install again by yarn install
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import { NavigationContainer } from '#react-navigation/native'
This is the erro message.
Unable to resolve "react-native-screens" from "node_modules\#react-navigation\bottom-tabs\src\views\BottomTabView.tsx"
Failed building JavaScript bundle.
Did you install
npm install #react-navigation/bottom-tabs or if you used yarn package manager,
yarn add #react-navigation/bottom-tabs
Have you updated the pod file if you added this package?
cd ios
pod install
Install the following packages
npm install --save react-native-gesture-handler react-native-reanimated react-native-screens
Check the docs
https://reactnavigation.org/docs/getting-started/
Hope this helps!
I have installed react-navigation in my React Native project. Its a starter project doesn't have any codes. But while running project I am facing error like this.
Here is my Navigation code
import { createStackNavigator } from 'react-navigation';
import Home from './screens/Home';
import WeatherDetail from './screens/WeatherDetail';
const Navigation = createStackNavigator({
Home: { screen: Home },
WeatherDetail: {
screen: WeatherDetail
}
});
export default Navigation;
And here is the App.js codes
import Navigator from './Router';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Navigator />
</View>
);
}
}
If I remove the navigator component from the App.js and replace it with a Text the application runs without any error.
remove node_modules and package-lock.json
npm install
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link
If you are using react-link to link your dependencies:
0pen your ios Podfile and delete all yout linked dependencies: pod 'xxxxxxx', :path => '../node_modules/xxxxx
Close Xcode
In your /ios folder run "pod update"
In your project source run "react-native link"
Open Xcode and Clean Build Folder from Xcode Menu -> Product
Run your application from Xcode
Link manually the dependency "react-native-gesture-handler" into your Xcode Project following steps in documentation: https://facebook.github.io/react-native/docs/linking-libraries-ios
Now run your application from Xcode, you should be fine.
From the official doc:
If you're on React Native >= 0.60, you need to disable autolinking for react-native-gesture-handler first. To disable autolinking for it, create a react-native.config.js file in the root of your project with the following content:
module.exports = {
dependencies: {
'react-native-gesture-handler': {
platforms: {
android: null,
ios: null,
},
},
},
};
If your are using React 0.60, just omit this official doc. Follow following steps:
rm react-native.config.js if exist
react-native link react-native-gesture-handler
cd ios && pod install && cd ..
react-native run-ios
I get the same error on ios from RN v0.60
The following worked for me:
cd ios
pod install
First, remove node_modules and package-lock.json and run npm install.
After installing the react-navigation package in your React Native project. You should install react-native-gesture-handler. If you’re using Expo you don’t need to do anything here, it’s included in the SDK. Otherwise:
npm install react-native-gesture-handler
And finally, link gesture dependency as:
react-native link react-native-gesture-handler
This answer based on the React Navigation document.
maybe someone come here because same problem as me.
i got this error because i'm using react-navigation version 3.x, in that version stackNavigator is change to createStackNavigator and should use createAppContainer(createStackNavigator)
im fix it just like mr.amiri said but im not delete my node_module im just follow step 3 - 5
Since I am not allowed to comment, I am posting it here. This is the answer by #Amiri Houssem but I am adding one more thing:
remove node_modules and package-lock.json
npm install
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link
If there is an error even after these 5 steps, check android/settings.gradle and change that line to this:
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
I'm answering because none of the above answers were relevant to me.
I got this error because VSCode automatically inserted import { TouchableOpacity } from 'react-native-gesture-handler' as a dependency in my file when I added a <TouchableOpacity> element.
Give the last files you edited a once-over just in case there's an import statement you don't expect!
I used this in the CLI to solve the issue
cd iOS
pod install
cd ..
react-native unlink react-native-gesture-handler
Uninstalled the app from the device and run the android project - react-native run-android and it worked fine
you can check your version of react-native
if React Native 0.59 and lower you can
react-native link react-native-gesture-handler
and check your #react-navigation version in
https://reactnavigation.org/versions
may be its late.
Temporary solution downgrade the version of react navigation:
1- unlink and uninstall react-navigation and the handler
2- add "react-navigation": "^2.18.2" to package.json
3- remove node_modules folder
4- npm i
5- react-native link
if you have done the above, it hasn't run yet, try this
if you use Windows
cd android
.\gradlew cleanBuildCache
and try running it
react-native run-android
Even though react-native-gesture-handler is present in node_modules folder, we need to add it to path or install it again. Then link with native code.
1) npm install --save react-native-gesture-handler
success Saved 1 new dependency.
info Direct dependencies
└─ react-native-gesture-handler#1.0.15
info All dependencies
└─ react-native-gesture-handler#1.0.15
2) react-native link
rnpm-install info Linking react-native-gesture-handler ios dependency
rnpm-install info Platform 'ios' module react-native-gesture-handler has been
successfully linked
rnpm-install info Linking react-native-gesture-handler android dependency
rnpm-install info Platform 'android' module react-native-gesture-handler has
been successfully linked
3) react-native run-android or react-native run-ios
If you are using a configuration with Podfile in ios. Follow this steps:
Comment this line pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler' in <react-native-project>/ios/Podfile.
Open <react-native-project>.xcworkspace Add RNGestureHandler.xcodeproj in Libraries (Right click over library folder and select "Add files to ") from node_modules/react-native-gesture-handler/ios.
Add libRNGestureHandler.a in (Build Phases) -> (Link Binary With Libraries).
This worked well for me as well.
1) npm install react-navigation
2) npm install react-native-gesture-handler
3) npm intstall
4) react-native link
uninstall the app
5) react-native run-android
Execute the following commands in command prompt (Run as Administrator)
npm install react-navigation
npm install react-native-gesture-handler
npm intstall
react-native link
Re-Install the application will resolve the issue.
I struggled with this and none of the above answers worked for me. Here's what I had to do:
Delete your ios folder entirely.
Delete your node_modules folder and package-lock.json.
Restart your computer.
Run react-native eject to re-create your native code folders.
Run npm install
Run react-native link
Run npm run start -- --reset--cache
Now run react-native run-ios
see your native react version, if version 0.60 then you must migrate to androidX using a jetifier, follow the steps in this link
https://github.com/mikehardy/jetifier
successful for me :)
If you're on React Native >= 0.60:
You should see the following entry in your ios/Podfile:
pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
If this line is not there, first run:
react-native link react-native-gesture-handler
ios/Podfile should now contain a new entry.
Now run this command from iOS directory /ios/:
pod install
Run your iOS project again either directly using XCode or react-native run-ios
I ran:
react-native install react-native-in-app-utils
and it completed successfully. I added the import to my code:
import { NativeModules } from 'react-native'
const { InAppUtils } = NativeModules
No errors occur in building and starting but NativeModules is empty and InAppUtils is undefined.
I have used this successfully in RN 0.48; this is on RN 0.55.
Is there some step I am missing?
Documentation details for react-native-in-app-utils is misleading regarding Linking.
Install Library (react-native-in-app-utils) using rnpm. you need to install rnpm.
1.npm install rnpm -g
2. rnpm install react-native-in-app-utils
rnpm will auto link your library for IOS.
SUGGESTION
Do not install library using Yarn , npm and react-native install react-native-in-app-utils
react-native-in-app-utils requires you to have created your app with 'react-native init`. Or, you have to eject from CRNA.
CRNA can't use native modules unless you eject/detach (similar to expo, as they're interrelated):
https://github.com/chirag04/react-native-in-app-utils/issues/130
https://facebook.github.io/react-native/docs/getting-started.html