My react-native run-ios --device stuck after displaying this line.
simulator does not stuck.
I tried
`rm -rf $TMPDIR/react-* && watchman watch-del-all && rm -rf ios/build/ModuleCache/* && rm -rf node_modules/ && npm cache clean && npm i`.
No luck.
bundle: Done writing bundle output
bundle: Copying 84 asset files
bundle: Done copying assets
+ [[ ! -n false ]]
Same on using xcode build.
Xcode says running 2 of 4 custom shell scripts and report navigator displays
bundle: Done writing bundle output
bundle: Copying 84 asset files
bundle: Done copying assets
+ [[ ! -n false ]]
Any suggestion?
react-native: 0.44.0
Related
I change my MacBook within new MacBook M1 pro and have issue an old project.
I work on old project where I use:
expo(version 40) which one is ejected and use
react-native(version ~0.63.4)
and when I try to build(command: react-native run-ios) project It return errors always, but when I make new project everything is Okay.
I don't know what is problem.
I found one solution.
Firstly I clean project and install everything again, then start building.
Commands:
watchman watch-del-all && rm -rf node_modules && rm -rf yarn.lock && rm -rf package-lock.json && yarn cache clean && yarn && cd ios && rm -rf Pods && rm -rf Podfile.lock && pod install && cd .. && cd android && ./gradlew clean && cd .. && yarn start --reset-cache
After that I start build with this command:
arch -x86_64 yarn run ios
or
arch -x86_64 react-native run-ios
How I resolved my issue, with M1 arm Mac
> arch -x86_64 expo init AwesomeProject
> cd AwesomeProject
> arch -x86_64 yarn
>arch -x86_64 yarn start
**Working :) **
Don't clean everything, removing yarn.lock and podfile.lock is not required. As this might upgrade the dependencies which might be required and would require testing.
I faced similar issues on M1 Mac. I am listing them down.
Error: GET https://github.com/electron/electron/releases/download/v1.8.8/electron-v1.8.8-darwin-arm64.zip returned 404
Solution this was to upgrade react-devtools in your package file
"react-devtools": "^4.23.0", // Upgrade to the latest one
Then make sure your paths are setup correctly. I added one additionally as it was required for me. You can update path if required as suggested below. I am using z Shell so suggesting zshrc
echo 'export PATH=/usr/bin/node:$PATH' >> ~/.zshrc
Since mine was an existing project and has x86 libs. I use Rosetta for Xcode. By right clicking on xcode => Get Info => Select Open using Rosetta.
Finally
brew install cocoapods // To install compatible arch for m1
arch -x86_64 gem install ffi. // Install the ffi Ruby gem for Apple’s Rosetta 2
arch -x86_64 pod install
arch -x86_64 yarn run ios
Getting this error after adding aws-amplify to the project, Did complete setup for aws-amplify according to the docs, then pod install and react-native run-ios
I have also tried changing the import statement as mentioned in the suggestion below error, still doesn't work, Thanks in advance.
node_modules/#aws-amplify/core/node_modules
node_modules
../node_modules
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
11 | * and limitations under the License.
12 | */
> 13 | import AsyncStorage from '#react-native-async-storage/async-storage';
| ^
14 | var MEMORY_KEY_PREFIX = '#MemoryStorage:';
15 | var dataMemory = {};
16 | /** #class */
at ModuleResolver.resolveDependency (/Users/monk/Projects/Airbnb/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:234:15)
at DependencyGraph.resolveDependency (/Users/monk/Projects/Airbnb/node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
at Object.resolve (/Users/monk/Projects/Airbnb/node_modules/metro/src/lib/transformHelpers.js:317:42)
at resolve (/Users/monk/Projects/Airbnb/node_modules/metro/src/DeltaBundler/traverseDependencies.js:629:33)
at /Users/monk/Projects/Airbnb/node_modules/metro/src/DeltaBundler/traverseDependencies.js:645:26
at Array.reduce (<anonymous>)
at resolveDependencies (/Users/monk/Projects/Airbnb/node_modules/metro/src/DeltaBundler/traverseDependencies.js:644:33)
at /Users/monk/Projects/Airbnb/node_modules/metro/src/DeltaBundler/traverseDependencies.js:329:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (/Users/monk/Projects/Airbnb/node_modules/metro/src/DeltaBundler/traverseDependencies.js:137:24)```
Install Amplify libraries: here,
yarn add #react-native-async-storage/async-storage
After that Try cleaning the project if there is an issue,
rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-* && watchman watch-del-all && yarn cache clean --force && rm -rf ios/build && rm -rf node_modules/
yarn install
rm -rf pods && pod install
I just deleted the app from the emulator and reinstalled it and it finally worked after a long time of research that led to no emends!
delete your node_modules & reinstall your node_modules
I resolve so - in package.json
"#react-native-community/async-storage": "https://github.com/react-native-async-storage/async-storage",
I created a new project with the command react-native init LocationExample --version 0.57.7
It created a project named LocationExample but when I further went into project folder and ran the command react-native run-ios.
This gave an error stating Entry, ":CFBundleIdentifier", Does Not Exist
I have tried removing the build folder by running command rm -rf ios/build and also tried removing the mode modules by rm -rf node_modules. After which i ran yarn command to install the node_modules again but, this had no effect.
Edit1:
/Users/apple/React Native/LocationExample/node_modules/react-native/scripts/ios-install-third-party.sh: line 56: /Users/apple/React/ios-configure-glog.sh: No such file or directory
Command /bin/sh emitted errors but did not return a nonzero exit code to indicate failure
Also this error
'glog/logging.h' file not found
Expected: App should be installed and should run successfully.
Actual: App is not installed and states the error of BundleIdentifier.
Build it in Xcode. If the build is successful then run it in Xcode using Cmd+R
EDIT
Try this
1- Changing the bundle identifier.
2- Adding package:
yarn add #babel/runtime
3-
watchman watch-del-all
4- Removing the build:
rm -rf ios/build
5-
sed -i '' '/DevelopmentTeam = V9WTTPBFK9/d;/DEVELOPMENT_TEAM/d;/ProvisioningStyle = Automatic/d' ./node_modules/react-native/React/React.xcodeproj/project.pbxproj
6-
react-native start --reset-cache
7-
react-native run-ios
I have followed all the documentation of react native elements here
https://react-native-training.github.io/react-native-elements/docs/getting_started.html
First, I did the installation itself
yarn add react-native-elements
Even for vector icons to make sure it can work
yarn add react-native-vector-icons
Then, link the project
react-native link react-native-vector-icons
However, there is an error while I am trying to use this code as listed under overview of the documentation
import { Button, ThemeProvider } from 'react-native-elements';
const MyApp = () => {
return (
<ThemeProvider>
<Button title="Hey!" />
</ThemeProvider>
);
};
I do not even change a single code there, but I got this following error when I want to make sure that it works properly.
Unable to find module for EventDispatcher
-[RCTCxxBridge moduleForName:lazilyLoadIfNecessary:]
RCTCxxBridge.mm:462
-[RCTCxxBridge moduleForClass:]
-[RCTBridge(RCTEventDispatcher) eventDispatcher]
-[RCTSettingsManager userDefaultsDidChange:]
__CFNOTIFICATIONCENTER_IS_CALLING_OUT_TO_AN_OBSERVER__
_CFXRegistrationPost
___CFXNotificationPost_block_invoke
-[_CFXNotificationRegistrar find:object:observer:enumerator:]
_CFXNotificationPost
-[NSNotificationCenter postNotificationName:object:userInfo:]
-[RCTDevSettingsUserDefaultsDataSource _reloadWithDefaults:]
-[RCTDevSettingsUserDefaultsDataSource initWithDefaultValues:]
-[RCTDevSettings init]
__44-[RCTModuleData initWithModuleClass:bridge:]_block_invoke
-[RCTModuleData setUpInstanceAndBridge]
__25-[RCTModuleData instance]_block_invoke
RCTUnsafeExecuteOnMainQueueSync
-[RCTModuleData instance]
__49-[RCTCxxBridge _prepareModulesWithDispatchGroup:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start
I really appreciate any help. Thank you
When installing packages for React-Native most of the time you need to clear the cache and or build folders for the new changes to get compiled correctly.
Try these commands within your apps folder;
// ** Clear caches and update pods (IOS)
watchman watch-del-all && rm -rf /node_modules && rm -rf /$TMPDIR/react-* && rm -rf /$TMPDIR/npm-* && rm -rf /ios/build && rm -rf /ios/Pods && pod cache clean --all && pod repo update && cd ios/ && pod install && cd ../ && npm install
// ** clear caches without updating pods (IOS)
watchman watch-del-all && rm -rf /node_modules && rm -rf /$TMPDIR/react-* && rm -rf /$TMPDIR/npm-* && rm -rf /ios/build && npm install
// ** clear caches (Android)
watchman watch-del-all && rm -rf /node_modules && rm -rf /$TMPDIR/react-* && rm -rf /$TMPDIR/npm-* && rm -rf /android/build && rm -rf /android/app/build && npm cache verify && npm install && cd android/ && ./gradlew clean && cd ../
// ** Clear caches (iOS & Android)
watchman watch-del-all && rm -rf /node_modules && rm -rf /$TMPDIR/react-* && rm -rf /$TMPDIR/npm-* && rm -rf /ios/build && rm -rf /android/build && rm -rf /android/app/build && rm -rf /ios/Pods && pod cache clean --all && npm install && ./android/gradlew clean -p ./android/ && cd ../ios/ && pod install && cd ../
Your original question of why the documentation is not accurate;
Some packages do inform you to clear your caches etc, however, your terminal output does actually provide you with a link and steps on how to fix your issue
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`. (null))
So there for the documentation doesn't really need to tell you this as well.
How to clean react native project?
Is there any way to clean react native project as we can clean xcode project?
Any help will be appreciated!
A react-native Project is about one XCode Project and one Android Project. (for pure js code, there's no need to do clean)
So, what you need would be
Clean XCode Project with
cd ios
xcodebuild clean
And then clean Android Project with
cd android
./gradlew clean
You can simply write a batch file for it.
For android project
cd android &&./gradlew clean && cd ../
For iOS project
cd ios && xcodebuild clean && cd ../
If you need build clean again and again then add this scripts in the package.json file like this
scripts: {
"clean:android": "cd android && ./gradlew clean && cd ../",
"clean:ios": "cd ios && xcodebuild clean && cd ../",
}
Then run for android
yarn clean:android
And run for iOS
yarn clean:ios
For Android
cd android
gradlew clean
For IOS
cd ios
xcodebuild clean
Delete node modules and
npm ci
react-native link
followed by
react-native start --reset-cache
React Native clean-project is now the best and easiest way to do deal with react-native artifacts and cleanup. Since it's automatically detected by react-native, it becomes its own command in react-native.
$ yarn add -D react-native-clean-project
$ react-native clean-project
this script will clean the Android and IOS build cache, then removes node modules and caches, and reinstall the react native project.
# rm -rf $HOME/.gradle/caches/
cd android && ./gradlew cleanBuildCache
cd ..
cd ios && pod cache clean --all && rm -rf build
cd ..
rm -rf node_modules
yarn cache clean --force
yarn install
cd ios && pod install
To reset the iOS simulator and erase all simulator data, focus on the simulator then go to Hardware -> Erase All Content and Settings
To reset the Android emulator and erase all data, open Android Studio then goes to menu Tools -> AVD Manager, then click the dropdown menu on the selected simulator and click on wipe data.
More useful cleaner scripts. Seperating modules cleaning & native cleaning, based on the other great answers:
"scripts": {
"npm:clean": "rm -rf node_modules && npm cache clean && npm install"
"yarn:clean": "rm -rf node_modules && yarn cache clean --force && yarn install"
"android:clean": "cd android && ./gradlew clean && ./gradlew cleanBuildCache && cd ..",
"ios:clean": "cd ios && xcodebuild clean && rm -rf ~/Library/Caches/CocoaPods && rm -rf Pods && rm -rf ~/Library/Developer/Xcode/DerivedData/* && pod cache clean --all && pod deintegrate && pod setup && pod install && cd ..",
}
To reset react-native specific cache, run:
npm start -- --reset-cache
if in package.json you have
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
}
I added the following scripts to my package.json
scripts: {
....
"clean:android": "echo 'require(\"child_process\").execSync(\"cd android; ./gradlew clean\", {stdio: \"inherit\"})' | node ",
"clean:ios": "echo 'require(\"child_process\").execSync(\"cd ios; xcodebuild clean\", {stdio: \"inherit\"})' | node ",
"clean": "npm run clean:android && npm run clean:ios",
....
}
now you can clean android
npm run clean:android
clean ios
npm run clean:ios
clean both
npm run clean
React and node specific cleaning:
Remove node_modules to avoid inconsitence which may appear somehow rarely:
rm -rf node_modules
(reinstall if need with npm or yarn)
Clean npm cache if npm is used
npm cache clean
Clean react temp files:
rm -rf $TMP/react*
Clean the Android Project with:
cd android/
gradlew clean
remove android folder
run
react-native upgrade
then
react-native run-android