After I create a new project using the below code in terminal
niteshrastogi#Niteshs-MacBook-Air ~ % npx react-native init AwesomeProject1
Takes a lot of time on Installing Cocoapods dependencies step and returns an error. See this Error
✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing Bundler
✖ Installing CocoaPods dependencies (this may take a few minutes)
error warn Multiple Podfiles were found: ios/Podfile,vendor/bundle/ruby/2.7.0/gems/cocoapods-core-1.11.3/lib/cocoapods-core/Podfile. Choosing ios/Podfile automatically. If you would like to select a different one, you can configure it via "project.ios.sourceDir". You can learn more about it here: https://github.com/react-native-community/cli/blob/master/docs/configuration.md
✖ Installing CocoaPods dependencies (this may take a few minutes)
error Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
Error: Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
at createFromTemplate (/Users/niteshrastogi/.npm/_npx/7930a8670f922cdb/node_modules/#react-native-community/cli/build/commands/init/init.js:129:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.initialize [as func] (/Users/niteshrastogi/.npm/_npx/7930a8670f922cdb/node_modules/#react-native-community/cli/build/commands/init/init.js:181:3)
at async Command.handleAction (/Users/niteshrastogi/.npm/_npx/7930a8670f922cdb/node_modules/#react-native-community/cli/build/index.js:106:9)
I am new to development and trying to setup a development environment for the first time. Any help with this would be helpful.
Followed all the steps mentioned here to set up react native CLI and create my first project.
System config: M1 Ventura 13.2 macos watchman version: 2023.02.06.00 homebrew version: Homebrew 3.6.21 node: v19.6.0
Also installed Xcode with the latest version and selected the latest command line tool location.
enter image description here
I am trying to run react native project using expo package on web browser.
but I am getting error message.
Commands executed
yarn install - installed all packages.
expo start - executed very well no issue
npm install react-native-web - no issue
npm install react-dom packages - no issue
expo start - no issue
pressed w - no issue
Browser opened up but in console it says something like.
The issue
Uncaught Error: react-native-permissions: NativeModule.RNPermissions is null. To fix this issue try these steps:
installed npm packages
when I run npx #react-native-community/cli doctor I get this warnings.
Android
✓ JDK
✓ Android Studio - Required for building and installing your app on Android
✖ Android SDK - Required for building and installing your app on Android
- Versions found: 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0
- Version supported: .b31.0.0
✓ ANDROID_HOME
iOS
✓ Xcode - Required for building and installing your app on iOS
✓ CocoaPods - Required for installing iOS dependencies
● ios-deploy - Required for installing your app on a physical device with the CLI
✖ .xcode.env - File to customize Xcode environment
1) Android SDK:
How to set up .b31.0.0?
2) iOS: How to fix .xcode.env error?
And when I run npm run android build succeeds.
But npm ~doctor shows these errors.
I want to start React native programming. so in CMD I tried react-native init AwesomeProject then tried react-native run-android but I had some errors that I could not find solution.
some of errors resolved by editing this project in android studio:
add implementation 'androidx.appcompat:appcompat:1.1.0' to build.gradle
and change classpath("com.android.tools.build:gradle:3.4.2") to classpath("com.android.tools.build:gradle:3.5.0")
but emulator showed me
Unable to load script....
showed in this image:
error in emulator
befor this message it showed me on my phone:
JSIExecutor+JSCRuntime does not support Sampling Profiler
so I tried to create the assets directory in
...AwesomeProject\android\app\src\main\
and run gradlew clean in my root project directory.then I tried
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
but this error is occurred:
....error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[
\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\
\.*)$/: Unterminated character class. Run CLI with --verbose flag for more detai
ls.
SyntaxError: Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\
]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__t
ests__\\.*)$/: Unterminated character class....
and that error is showed me again in emulator.
I clicked Reload in emulator but it show me this error:
could not connect to development server...
i run react-native info for mor details and its result is:
info Fetching system and libraries information...
System:
OS: Windows 7
CPU: (8) x64 Intel(R) Core(TM) i7 CPU Q 740 # 1.73GHz
Memory: 892.99 MB / 3.98 GB
Binaries:
Node: 12.11.1 - C:\Program Files\nodejs\node.EXE
npm: 6.11.3 - C:\Program Files\nodejs\npm.CMD
SDKs:
Android SDK:
API Levels: 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29
Build Tools: 25.0.0, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.1, 28.0.2, 28.0.3, 29.0.1, 29.0.2
System Images: android-25 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.2 => 0.61.2
the screen shot of react-native run-android command is :
CMD screen shot
and logcat in android studio after runing react-native run-android show this error:
first screen shot of logcat in android studio
then i clicked on reload and logcat showed this error:
logcat screen shot when click on reload
what is problem and how can i resolve it?
my problem is solved.
I tried to run choco uninstall nodejs.install and choco uninstall npm in CMD then I run choco install nodejs.install --version=10.16.3 and choco install npm --version=6.9.0
when I run react-native run android I had other problems, So I opened my project in Android studio and add bellow codes to build.gradle:
implementation "com.facebook.react:react-native:0.61.2" // From node_modules
implementation 'com.android.support:appcompat-v7:27.0.1'
of course that project had some warnings that using Android studio resolved them.
finally react-native run-android work correctly without error.
Adnan comment was helpful but I could not understand why:
React causes lots of errors because of version incompatibility
when I followed official website?!
The way how I ran React-Native for the first time is by following these steps mentioned on the official site:
https://facebook.github.io/react-native/docs/getting-started.html
1) Download NodeJS from this link and install
https://nodejs.org/en/
2) Download Python from this link and install
https://www.python.org/downloads/
3)download JDK from this link and install
https://www.oracle.com/technetwork/java/javase/downloads/index.html
4) If you do not have android studio installed on your PC, download from this link and install
https://developer.android.com/studio/index.html
And later install SDK from within android studio
5) Configure the ANDROID_HOME environment variable
Go to Environment variables and create a new User variable ANDROID_HOME and add the SDK path to Variable path
The default SDK location: c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
If you changed the SDK location in step 4, add that path above
6) Add platform-tools to Path
Go to Environment variables and in User variables, click on Path>Edit>New
Add this path in the text field
c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk\platform-tools
If you changed SDK location, then your SDK path/platform-tools
7) Install a nice text editor like this one, VS Code:
https://code.visualstudio.com
8)Goto Viw>Terminal in VS Code, run this command
npm install -g react-native-cli
9)Create a new project
react-native init NewProjectName
10)For running the project on a physical device, follow these steps:
https://facebook.github.io/react-native/docs/running-on-device
OR use a virtual device like Genymotion
11) Run the project
-Goto your project folder, run this in VS Code terminal:
cd NewProjectName cd means change directory
-Run the project:
react-native run-android
Hope this helps!
I ran my project without any errors following these steps
IMPORTANT
Do not forget to run VS Code As Administrator if your project is in C:/Users/.. folder because it needs administrative privileges to make changes to that folder.
Make sure Metro Server window is running. The Metro Server starts automatically after running react-native run-android.
See the picture below, the top window is the server window.
ReactNative fails to deploy build to iOS simulator but does deploy it to Android emulator
Attached are screenshots showing this on both.
Steps:
Created react native app
react-native init proto
Run app on Android emulator after I started emulator
react-native run-android
this is running fine on Android emulator
Run app on iOS simmulator
react-native run-ios
This produces error as per screenshot
Error
** BUILD FAILED **
The following build commands failed:
CompileC /Users/dinob/reactnativework/proto/ios/build/Build/Intermediates/React.build/Debug-iphonesimulator/React.build/Objects-normal/x86_64/RCTShadowView+Internal.o Views/RCTShadowView+Internal.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)
Installing build/Build/Products/Debug-iphonesimulator/proto.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist
Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/proto.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
Versions
MacBookPro OSX El Capitain
react-native 0.55.3
react-native-cli 2.0.1
npm 5.5.1
node v8.9.1
watchman 4.9.0
Please have a look here for help with troubleshooting
I would suggest you try all the solutions described in that thread to try and fix this issue. Good Luck!