How to setup up the development environment for React Native in Apple M1 ARM-based system?
RN Environment Set For Android & iOS :
Install home-brew (https://brew.sh)
/bin/bash -c "$(curl -fsSL
https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Install node & watchman (from terminal)
brew install node
brew install watchman
Don’t use the wrong JDK for React Native if you’re using an M1 Mac
…or you’ll be going 2x as slow and not know why
*Reference (https://shift.infinite.red/dont-use-the-wrong-jdk-for-react-native-if-you-re-using-an-m1-mac-252533dd47a2)
Install SDKMAN (https://sdkman.io)
curl -s "https://get.sdkman.io" | bash
sdk list java (check the version you want to install)
sdk install java 11.0.14-zulu
*Using of Sdkman (https://towardsdatascience.com/install-and-run-multiple-java-versions-on-linux-using-sdkman-858571bce6cf)
Download and Install Android Studio
Select AS for Mac (https://developer.android.com/studio/preview)
Select the Mac with Apple chip
Android Studio installs the latest Android SDK by default.
Select latest Android SDK Command-line Tools (Preference > Android SDK > SDK Tools > show package details)
Add the following lines to your in your ~/.zshrc :
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
Note : To add this :
Open terminal & type nano $HOME/.zshrc
Copy that 5 lines and paste it
Control + O and then press return (to save).
Control + x (to exit)
Create project :
npx react-native init AwesomeProject
Run project :
npx react-native run-android - (to run in android)
Reaming Setup for iOS :
Install Xcode from Appstore
ruby -v (ruby is default installed)
Open terminal and type :
sudo xcode-select -switch /Applications/Xcode.app/Contents/ Developer
sudo xcode-select --install
brew install libffi
brew install cocoapods
Now to run iOS application
Simulator : npx react-native run-is
Device :
npm install -g ios-deployRun on a connected device, e.g. Max's iPhone:
react-native run-ios --device "Max's iPhone"
Related
Screenshot of npx react-native doctor:
As you can see, the iOS is all green ticks. I npm start in a terminal tab to run react native metro server. I then open another terminal and npm run ios Yes, the simulator opens straight away, but then I get a long error: https://pastebin.com/6bFTMDTr
I cd ios then pod install and got this:
Anyone have any idea?
Have you tried installing the pod dependency manually?
$ cd iOS && pod install
upd.
Looks like you haven't installed Ruby
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install ruby
echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.bash_profile
source ~/.bash_profile
after that install a watchman depend
$ brew update
$ brew install watchman
upd2.
1) brew reinstall cocoapods
(error message will come up regarding linking)
2) brew link --overwrite cocoapods
(to fix the link)
I'm new to android studio. I downloaded Bumblebee and then followed the react-native quick start installation guide react-native installation
I will open Android studio and within the terminal run npx react-native init MyApp, cd MyApp, npx react-native start, npx react-native run-android. I get the errors:
error Failed to launch emulator. Reason: No emulators found as an output of 'emulator -list-avds'
Unable to detect AGP versions for included builds. All projects in the build should use the same AGP version. Class name for the included build object: org.gradle.composite.internal.DefaultIncludedBuild$IncludedBuildImpl_Decorated.
6 actionable tasks: 4 executed, 2 up-to-date
Note: /mnt/c/Users/RandallTaylor/Mobile/App3/node_modu
* What went wrong:
Could not determine the dependencies of task ":app:compileDebugJavaWithJavac".
> SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at "/mnt/c/Users/RandallTaylor/Mobile/App3/android/local.properties"
/ note local.properties exists. I attempted with the linux and windows path version as SDK manager points to the Microsoft OS where it exits. and still get this error /
I've spent two days on this reading stack overflow thread with no progress. Any advice would be appreciated.
SetUp and local system info:
Windows 10
Processor AMD Ryzen 7 PRO 5850U
wsl --status
Default Distribution: Ubuntu-20.04
Default Version: 2
Windows Subsystem for Linux was last updated on 4/27/2022
WSL automatic updates are on.
Kernel version: 5.10.102.1
Android Studio Bubblebee
SDK manager -> SDK Platorms -> Android 11.0R with Android SDK Platform 30, Source for Android
30, Intel x86 Aton Sytem Image
SDK Tools -> 30.0.2 installed
Environment Variables -> ANDROID_HOME C:\Users\UserName\AppData\Local\Android\Sdk
ANDROID_ROOT same as ANDROID_HOME
JAVA_HOME C\Users\UserName\Desktop
cmdline-tools\external\com\google\guava\guava\30.1-jre
Inital setup
You need to install on your Windows 10 Android Studio.
Set user variable: ANDROID_HOME=C:\Users<YOUR_USER>\AppData\Local\Android\Sdk
Add to system variable PATH:
%ANDROID_HOME%\emulator
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools
Then go to your WSL2 and install:
sudo apt-get install unzip
get android studio Command Line Tools Only and unzip it into /home/Android
install jdk 8 with sudo apt-get install openjdk-8-jdk
add this to your .bashrc/.zshrc:
export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
export PATH=$PATH:$JAVA_HOME/bin
export WSL_HOST=$(tail -1 /etc/resolv.conf | cut -d' ' -f2)
export ADB_SERVER_SOCKET=tcp:$WSL_HOST:5037
export ANDROID_HOME=$HOME/Android
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
restart bash and run sdkmanager --sdk_root=${ANDROID_HOME} "platform-tools"
run adb version && adb.exe version check if versions match
Running on emulator
Start emulator run emulator -avd <YOUR_AVD_NAME> - don't close terminal window!
run adb kill-server and adb -a -P 5037 nodaemon server start - don't close terminal window!
run adb devices and check you device port, e.g. device port is 5554.
form your wsl terminal run socat -d -d TCP-LISTEN:5554,reuseaddr,fork TCP:$(cat /etc/resolv.conf | tail -n1 | cut -d " " -f 2):5554, to install socat sudo apt-get install socat.
you should be all set up now.
run yarn start inside project folder and then click 'a' to run android emulator, it takes me about 4-5 minutes.
EDITED
You can skip steps 3-6 and connect to emulator by inserting expo url manually without waiting minutes.
running on my device used to work fine. However, suddenly,
when I run react-native run-ios --device,
I get to the ending like
[[ true != true ]]
** BUILD SUCCEEDED **
installing and launching your app on User’s iPhone...
However, nothing happens after and the app does not get installed in my device.
For me the following worked a while back when I faced a similar issue:
>npm install -g ios-deploy
>react-native run-ios --device "My iPhone"
I seriously offer you to install ios-deploy by using brew:
brew install ios-deploy
If you installed it by npm before installing by brew uninstall it by the following command:
sudo npm uninstall -g ios-deploy
After having the correct version with the correct installation plug your device and then run the below command:
npx react-native run-ios --device
This current command directly installs the app on the first plugged device to your macOS system. if you plugged several devices then you should pass the name of a targeted device just like below:
npx react-native run-ios --device "DeviceName"
i have a problem with react native in ubuntu, i have installed,
java jdk 8 (both javac --version) as well as echo $JAVA_HOME gives the proper output.
I have also installed android studio and set the android environment variables as well as the tools and echo $ANDROID_HOME gives output of the sdk location.
I have also installed gradle version 4.4.
I am unable to start the android app using react-native run-android. can any one let me know if i have missed something during installation.
And react-native as well as android studio works fine as I am currently using react-native start to start the metro builder as well as the other react-native cli commands. also android studio and gradle is also able to generate debug as well as release apks with no problems.
The error i get,
Scanning folders for symlinks in /home/igate-naveed/Documents/ReactNative/mobile-app-android/node_modules (16ms)
Starting JS server...
Building and installing the app on the device (cd android && ./gradlew installDebug)...
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html
First of all you need to create a project like this:
react-native init myProjectName
Then, start an emulator from Android Studio... Afterwards:
npm install && npm start
in your project directory, and from another terminal, inside your project directory, run :
react-native run-android
Is this working?
Instead of using the npm install manager, I used yarn and it worked for me. In your project directory, just do:
(project-directory)$ yarn
Update the gradle version.
Create new project:
react-native init projectname
Uninstall the npm pack.
Reinstall the npm pack again.
npm start
react-native start
react-native run-android
I built a react-native app for Windows (https://github.com/Microsoft/react-native-windows). The app runs fine on my development machine, but if I copy the EXE (and DLL dependencies) to another machine and run, I get the error message
Unable to Download the JS bundle. Did you forget to start the
development server or connect your device?
Is there a way to build a self-contained app that does not depend on a "development server"?
React Native Windows Environment Setup (with Typescript)
Download and Install Visual Studio 2017 Download Link
Download and Install Visual Studio Code Download Link
Download and Install NodeJS Download Link
Install React Native CLI
npm i -g react-native-cli
Install TypeScript
npm i -g typescript
Create your project
react-native init --version="0.55.0-rc.0" MyApp --template typescript && node MyApp/setup.js
Change project directory MyApp
cd MyApp
Install the React Native Windows CLI Plugin
npm i --save-dev rnpm-plugin-windows
Run the Windows initialization command
react-native windows --windowsVersion 0.55.0-rc.0
Open project MyApp.sln file in Visual Studio
Follow the prompts to install the Windows 10 SDK v. 10.0.14393.0
If prompted, select Developer Mode in the Settings window under "Use developer features" and approve the Certificate Installation request. Enable "Developer mode" to allow the custom application to run
Install windows build tools (run in Windows Power Shell)
npm i -g --production windows-build-tools
Run your application
react-native run-windows
Prompt Windows PowerShell Installing Certificate: Enter Y to install
Prompt window: Allow Access to windows firewall
You can bundle your JS code using
react-native bundle --platform windows --entry-file index.windows.js
--bundle-output windows\myapp\ReactAssets\index.windows.bundle
--assets-dest windows\myapp\ReactAssets
--dev false
If you want to upload to store then you can follow
https://learn.microsoft.com/en-us/windows/uwp/packaging/packaging-uwp-apps#create-an-app-package