When I try to use 'react-native-elements' package in my code, I face this error :
bundling failed: Error: Unable to resolve module react-native-vector-icons/FontAwesome from node_modules\react-native-elements\src\social\SocialIcon.js: react-native-vector-icons/FontAwesome could not be found within the project.
I have done many things to fix it. I installed the 'react-native-vector-icons' again, I used 'rm ./node_modules/react-native/local-cli/core/fixtures/files/package.json' but non of them worked. what should I do to overcome this problem? I really appreciate your help guys.
make sure that you've installed the package with
npm install react-native-vector-icons and link it through
react-native link react-native-vector-icons
then for ios you need to install pod (goto your project ios folder on terminal and enter command pod install)
and then reset packager cache with react-native start --reset-cache
if you are using react version <0.60 use react-native link react-native-vector-icons and do the steps link and if react version > 0.60 then cd ios && pod install && cd .. and try again if its not work delete the build folder and rebuild again.
Just a quick question, how to run an existing older version of react native project. Lets say version 0.59.10 , without upgrading it. what would be the command line commands. Thanks
You should navigate to project directory (if you aren't yet)
cd PATH_TO_PROJECT_DIRECTORY
run the following command to install the dependencies
npm install
then if the react-native version is 0.59.10 and lowers you should also run the command below to link the dependencies to your native android and ios project.
react-native link
and then run one the following commands based on your device
for android
react-native run-android
for ios
react-native run-ios
When I follow the instruction by the react-navigation website : https://reactnavigation.org/docs/en/getting-started.html.
react-native link react-native-gesture-handler
and then change the MainActivity.java like it asks.
Then run react-native run-android, and error pop up :
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
react-native-gesture-handler (to unlink run: "react-native unlink react-native-gesture-handler")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink " and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
my react-native version :
react-native-cli: 2.0.1
react-native: 0.60.0
However, when I follow the instruction, to unlink the library
use : react-native unlink react-native-gesture-handler
The app successfully built, but now it pops up another error in the app :
null is not an object (evaluating 'rngesturehandlermodule.direction')
I tried a lot of solution in a lot of websites, like
undefined is not an object (evaluating 'RNGestureHandlerModule.State'
non of them is working for me
Looks like this is to do with the new autolinking feature in RN 0.60.
For iOS
To fix for now just add the following podspec for RNGesureHandler to ios/Podfile
pod 'RNGestureHandler', :podspec => '../node_modules/react-native-gesture-handler/RNGestureHandler.podspec'
Then in the ios directory run pod install to install it.
For Android
Path: android/app/src/main/java/com/projectname/MainApplication.java
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
....
protected List<ReactPackage> getPackages() {
// Add additional packages you require here
// No need to add RnnPackage and MainReactPackage
return Arrays.<ReactPackage>asList(
....
new RNGestureHandlerPackage()
);
}
Have a good day.
I'm not sure about what went wrong, but very possibly because of the react-native-cli that upgraded from below 0.60.0 to above it.
BEFORE 0.60.0 when running react-native run-android, the command will run a metro packager, along with building the android app, and then run the app that connect to the metro packager.
That's why in the past, we only run one command "react-native run-android" to run the project.
But AFTER 0.60.0 when running react-native run-android, the command will only build the android-app, and run the app to connect to the metro packager.
I saw a command prompt blinked once, might also be how the command start the metro packager went wrong and the packager just closed itself somehow.
Also as for the problem with react-native link react-native-gesture-handler I believe it is the new feature of react-native 0.60.0 to autolink library, so manual linking of library is not necessary anymore. As a lot of the library provider might need to start providing auto-linking features, or might face the same error, not just react-native-gesture-handler.
Temporary Solution until someone fix the react-native-cli to run the metro packager again:
Open 2 command prompt instead of 1. And run the command below on each of the command prompt:
react-native start
react-native run-android
You might want to run the first command first and wait for it to be ready before running the 2nd.
Otherwise, you app might turn out to be blank.
Source : I tried it myself by creating new project and running the command as mentioned by the question.
What you can do is, first uninstall react-native-gesture-handler.
Then delete IOS and Android folder.
Then run below command.
1.react-native upgrade --legacy true // to recover ios and android folder.
2.npm install react-native-gesture-handler
3.react-native link
4.react-native run-android
5.react-native run-ios
Also update your MainActivity.java file , follow official website:
https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html
Did you run react-native run-android or react-native run-ios ?
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 am using react-native-fbsdk in my application.
My react-native version is:0.39.1
I followed the all steps and when I build my project I'm getting the following error.
Can anyone please tell me how to solve this.
There was a breaking change in React-Native 0.40 where the headers have been moved to React namespace.
If you use a version prior to 0.40 you have to change 'React/RCTBridgeModule.h' to 'RCTBridgeModule.h' inside of RCTFBSDKAppEvents.m
See here for more info : https://github.com/facebook/react-native/releases/tag/v0.40.0
Or you can upgrade your react-native version: https://facebook.github.io/react-native/docs/upgrading.html
The latest version of react-native-fbsdk ( which is 0.5.0) only works with RN >=0.40.
For RN <0.40, do the following:
1) Uninstall react-native-fbsdk:
npm uninstall react-native-fbsdk --save
2) Reinstall with an older version and link it:
npm install react-native-fbsdk#0.4.0 --save
react-native link react-native-fbsdk