I am a newbie on react native.
Is it possible to setup the correct sdk version or other things for the third party library automatically after npm install? Because sometimes when i mess up the project and the code cannot be rolled back, i will remove it and clone the project from git. But that is the problem, because the android library sdk version and ios library search path are incorrect, i need to correct them by myself.
Add postinstall into the package.json scripts. This will be run automatically after install has ran:
"postinstall": "./edit_modules.sh",
And create an edit_modules.sh file in project root directory. Something like this:
#!/bin/bash
if [[ "$OSTYPE" == "darwin"* ]]; then
SED_CMD="sed -i ''"
else
SED_CMD="sed -i"
fi
$SED_CMD 's/<pattern to find>/<replace with>/' <path to file relative to root>
The if/else for sed is because it has different signature on macos and linux.
And example sed we have in our project:
$SED_CMD 's/#import <fishhook\/fishhook.h>/#import "fishhook.h"/' ./node_modules/react-native/Libraries/WebSocket/RCTReconnectingWebSocket.m
Related
I have followed the instructions to install react-native-twitter-lite via npm page ....as per below:
npm install twitter-lite
....then on app.js:
import Twitter from 'twitter-lite';
const twtClient = new Twitter({
consumer_key: 'xxxx',
consumer_secret: 'xxxx',
});
...I get error Unable to resolve module crypto from node_modules\twitter-lite\dist\twitter.js: crypto could not be found within the project
...even though I can see that the file node_modules\twitter-lite\dist\twitter.js exists
The issue might be that cryptojs is missing from your dependencies (not installed in your app), but react-native-twitter-lite still need it to run for security. You surely have the twitter.js but not the crypto.js. Cryptojs is used by twitter-lite to cypher and encrypt data. You may choose to use Nodejs's crypto module or react-native's build-in cryptojs. I always choose the later one for a more native behavior. For that, simple run
npm install react-native-crypto-js --save.
The first time I run into this issue this source helped me understand.
This happens to me, most likely when installing a new package to my project, I didn't try to install react-native-twitter-lite , but my general approach is :
Try to install the missing module yourself , in your case, install Crypto
Delete node_modules and install the dependencies again, run rm -rf node_modules && npm install
run your project npm start and then npm run android && npm run ios
If you install native module you will need to rebuild your app. It’s jut hot reloadable.
If that’s not your issue, but you’re using typescript, you may be missing a dependency that can fortunately be resolved using:
npx typesync
Are you using Expo or Xcode/Android Studio? If Expo, note that Expo handles a Bare and a Managed workflow. If you are using a managed workflow you may have these issues since Expo is managing native modules for you so you may want to check if Expo has a similar dependency to what you’re using, otherwise you may want to eject from Expo.
If developing for iOS, you may also want to check if you’ve installed the pods you need. You can do this using the following:
npx pod-install from root of project directory (likely same directory as package.json)
All else fails:
rn -rf node_modules
npm install && npx pod-install
(If usingTypescript also try npx typesync)
If developing for Android, make sure you add necessary code on gradle file, can be pasted anywhere (likely in docs)
error Could not find "Podfile.lock" at projects\reactNative\ios\Podfile.lock. Did you run "pod install" in iOS directory?
(node:11696) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use node --trace-warnings ... to show where the warning was created)
error Could not get the simulator list from Xcode. Please open Xcode and try running project directly from there to resolve the remaining issues. Run CLI with --verbose flag
Issue 1
For fixing the issue:
Could not find "Podfile.lock" at projects\reactNative\ios\Podfile.lock. Did you run "pod install" in iOS directory?
Please make sure you have install cocoapods and run this command at your project root:
gem install cocoapods // If you haven't install cocoapods
cd ios && pod install && cd ..
Issue 2
For fixing the issue:
(node:11696) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency (Use node --trace-warnings ... to show where the warning was created)
Please downgrade your node.js version to v13.x.x, one of the solutions below:
npm install -g n
sudo n 13.13.0
Issue 3
For fixing the issue:
Could not get the simulator list from Xcode. Please open Xcode and try running project directly from there to resolve the remaining issues. Run CLI with --verbose flag
Please make sure you have installed Xcode correctly from App Store and use the latest React Native version in your project (should be v0.62.2 now for stable). If still cannot open the project, please try to add some simulator in Xcode's developer settings.
Cheers!
you did not install cocoapods
install cocoapods commands
sudo gem install cocoapods
after that in react native directory
cd ios && pod install && cd ../ && react-native run-ios
CocoaPods manages library dependencies for your Xcode projects. We need it to setup the iOS project. Like yarn
sudo gem install cocoapods
The Podfile is a specification that describes the dependencies of the targets of one or more Xcode projects. Like package.json
access to the folder with Podfile, run
pod install
This will resolve the code of those dependency framework, and generate Pods.xcodeproj for your iOS project.
I'm testing React Native 0.56.0-rc.2 on Mac OS Mojave and Xcode 10.
Running:
react-native init TestProject --version="0.56.0-rc.2"
cd TestProject
npm run start
react-native run-ios
Which generated some long errors.
Entering Xcode gave me a failure on missing config.h for glog, which I found could be built manually:
cd ./node_modules/react-native/third-party/glog-0.3.4
./configure && make && make install
Which passed that stage, but got me on yet another issue
(...)/node_modules/react-native/third-party/glog-0.3.4/src/glog/logging.h:85:10:
'gflags/gflags.h' file not found
I can't find anything related to RN and this on Google or Stack Overflow, only references to other packages and instructions to install those on a Debian-based system.
Is this a known issue?
Running this from the project directory fixed it for me:
cd ./node_modules/react-native/third-party/glog-0.3.4 && ../../scripts/ios-configure-glog.sh
This manually triggers the config script
A simple and quick resolution.
In Xcode, go to File->Project/Workspace settings.
Change the build system to Legacy Build system.
This is the resolution from Wesley's link. Saw something the other day about posting the direct answer and trying to avoid linking because links / websites can change. I was going to leave this as a comment, but don't have enough rep.
Update
It is a known issue, tracked here:
https://github.com/facebook/react-native/issues/19774
I resolved it by running following steps
In the root of the project, run npm install or yarn - install packages
cd node_modules/react-native - go to node modules directory
scripts/ios-install-third-party.sh - install # node_modules/react-native/third-party
cd third-party - go to newly created third party directory
cd glog-0.3.x - ls -la to find your directory version number or just use tab to auto-complete)
./configure - run setup
cd ../../../../ - change back to your project directory
react-native run-ios or react-native run-android - deploy
If any of these solution does not work, please check your project path. Project path and/or directory names should not contain any
space in its name or you can create project on Desktop or in Documents
directory.
Because of invalid name in project path, React Native project unable to link / add glob header files inside project / workspace.
I tried almost all the solutions given to resolve this issue but nothing is working for me.
This issue is occurring when I am opening .xcodeproj
Can anyone please provide a permanent solution for this?
1) Close your Xcode.
2) Open Terminal, go to your project's root folder and do:
cd node_modules/react-native/third-party/glog-0.3.4/
3) Run the configure script:
./configure
4) Open Xcode and try to run your app.
You need to change to the legacy build system in Xcode 10 and install third party scripts manually.
File > Project/Workspace settings
Build System: dropdown > change to Legacy Build system
Follow this to manually install third party scripts for RN:
Clean RN cache
$ rm -rf ~/.rncache
Re-install the deps
$ cd your_project_path
$ rm -rf node_modules/ && npm install
Then install the third-party
$ cd node_modules/react-native/scripts
$ ./ios-install-third-party.sh
Run the commands below if glog installation failed.
$ cd ../third-party/glog-0.3.x
$ ./configure
This issue is caused by Xcode's recent update. I fixed this issue by the following easy steps and I found this to be the best solution after searching for a while and tried many.
Go to Xcode > File > Project Settings
Build System > Select "Legacy Build System"
Go to terminal and run cd /to-your-project-folder
Run rm -rf node_modules && yarn (to remove node_modules and reinstall them)
Go back to Xcode > Product > Clean
Product > press option key and then click Clean Build Folder
And click the clean button
Now you can run the project from Xcode or on the terminal run yarn run ios or react-native run-ios
Credits to Spencer Carli's video on YouTube
I hope this helps :-)
PS C:\Users\Codey55\temp> npm run build
> todomvc-flux#0.0.3 build C:\Users\Codey55\temp
> set NODE_ENV=production browserify . | uglifyjs -cm > js/bundle.min.js
PS C:\Users\Codey55\temp> npm start
> todomvc-flux#0.0.3 start C:\Users\Codey55\temp
> watchify -o js/bundle.js -v -d .
Error: Cannot find module 'C:\User\Codey55\temp' from 'C:\Users\Codey55\temp'
I'm trying to run this TodoMVC React tutorial on my Windows PC but i can't seem to get through the first steps of setting up the project. I've googled around and tried to add a NODE_PATH in system variable with no results, does anyone know what the problem is ?
I had the same issue and I solved it by renaming my old react component files which were .jsx to standard .js. I read in another thread that I lost in the meantime that require works only with standard .js extensions.