Spaces:

awacke1

/

MSGraphAPI

like 1

Running

This demo discusses a react native UI.

For starters you need:

1. Node 14+, JDK 11+, gradle-wrapper.properties (distribution url)
2. Chocolatey for windows
3. Run cmd as Administrator and use powershell command.

@%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

4. Put that into install1.bat and run it from Administrator cmd shell.
   C:\Users\aaron\ReactNative>install1

If you have choco you will see:
C:\Users\aaron\ReactNative>install1
WARNING: 'choco' was found at 'C:\ProgramData\chocolatey\bin\choco.exe'.
WARNING: An existing Chocolatey installation was detected. Installation will not continue.
Confirmed ;C:\ProgramData\chocolatey\bin

5. choco install -y nodejs-lts openjdk11
   C:\Users\aaron\ReactNative>choco install -y nodejs-lts openjdk11
   Chocolatey v2.2.2
   Installing the following packages:
   nodejs-lts;openjdk11
   By installing, you accept licenses for the packages.
   Progress: Downloading nodejs-lts 20.18.0... 100%

nodejs-lts v20.18.0 [Approved]
nodejs-lts package files install completed. Performing other installation steps.
Installing 64 bit version
Installing nodejs-lts...
nodejs-lts has been installed.
Environment Vars (like PATH) have changed. Close/reopen your shell to
see the changes (or in powershell/cmd.exe just type refreshenv).
The install of nodejs-lts was successful.
Software installed as 'MSI', install location is likely default.
Progress: Downloading Temurin11 11.0.24.8... 100%

Temurin11 v11.0.24.8 [Approved]
Temurin11 package files install completed. Performing other installation steps.
WARNING: Installing only Get-OSArchitectureWidth
Downloading Temurin11 64 bit
from 'https://github.com/adoptium/temurin11-binaries/releases/download/jdk-11.0.24%2B8/OpenJDK11U-jdk_x64_windows_hotspot_11.0.24_8.msi'
Progress: 100% - Completed download of C:\Users\aaron\AppData\Local\Temp\chocolatey\Temurin11\11.0.24.8\OpenJDK11U-jdk_x64_windows_hotspot_11.0.24_8.msi (166.21 MB).
Download of OpenJDK11U-jdk_x64_windows_hotspot_11.0.24_8.msi (166.21 MB) completed.
Hashes match.
Installing Temurin11...
Temurin11 has been installed.
Temurin11 may be able to be automatically uninstalled.
Environment Vars (like PATH) have changed. Close/reopen your shell to
see the changes (or in powershell/cmd.exe just type refreshenv).
The install of Temurin11 was successful.
Software installed to 'C:\Program Files\Eclipse Adoptium\jdk-11.0.24.8-hotspot'
Progress: Downloading openjdk11 11.0.16.20220913... 100%

openjdk11 v11.0.16.20220913 [Approved]
openjdk11 package files install completed. Performing other installation steps.
The install of openjdk11 was successful.
Software installed to 'C:\ProgramData\chocolatey\lib\openjdk11'

Chocolatey installed 3/3 packages.
See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).

6. Install Android Studio
   Go to google type: android studio download

7. Install Android SDK specifically for working with React Native.
   Click Gear icon at top
   Under SDK platforms
   Click Show Package Details:

8. Select 31 and Intel under Android 12.0 S

9. Add SDK's 34, 33, 31, 30.0.3

10. Click apply and confirm change:

 Intel x86_64 Atom System Image API 31 (revision 5)
- Android SDK Platform 31 (revision 1)
- Android SDK Build-Tools 31 v.31.0.0
- Android SDK Build-Tools 30.0.3 v.30.0.3
- Android SDK Build-Tools 33 v.33.0.0
- Android SDK Tools (Required by Android SDK Build-Tools 30.0.3)
Disk usage:
- Estimated download size: 988.4 MB
- Estimated disk space to be additionally occupied on SDK partition after installation: 3.9 GB
- Currently available disk space in SDK root (C:\Users\aaron\AppData\Local\Android\Sdk): 93.6 GB

11. After installs, open cmd, nav to your user directory
    go here:

This will be your location for Android SDK. Copy Path.

C:\Users\aaron\AppData\Local\Android\Sdk

Go to Start Environment Variables. Create New User variable.

12. Enter your ANDROID_HOME variable to point to user sdk directory:

13. Use Get-ChildItem -Path Env:
    Run a powershell shell, then type: Get-ChildItem -Path Env:
    You should now see ANDROID_HOME

14. Add C:\Users\aaron\AppData\Local\Android\Sdk\platform-tools to environment variables
    Edit System variables Path variable.

Add platform tools to path:

15. It is a good idea if you have a react-native earlier install if you missed a step you will get an error.
    If you uninstall it and reinstall you can be sure it will be installed correctly:

Open Admin cmd shell shell.
Run:
npm uninstall -g react-native-cli @react-native-community/cli

16. Install and Enable Android Studio emulator

Go to virtual device manager:

Create Virtual Device

If you already have a Medium Phone Device (default in new Virtual Device Config) add a second:
Add Pixel Fold

17. Create a hello world app to test:
    c:\projects\reactnative>npx react-native init hello_world

THis will create a basic react-native app for android.

18. Check your files:

c:\projects\reactnative>cd hello_world

c:\projects\reactnative\hello_world>dir /w
Volume in drive C is Windows
Volume Serial Number is 64F6-3D28

Directory of c:\projects\reactnative\hello_world

[.] [..] [.bundle] .eslintrc.js .gitignore .prettierrc.js
.watchmanconfig [android] app.json App.tsx babel.config.js Gemfile
index.js [ios] jest.config.js metro.config.js [node_modules] package-lock.json
package.json README.md tsconfig.json [tests]
15 File(s) 563,702 bytes
7 Dir(s) 93,013,868,544 bytes free

19. If you have VSCode type code .

This will open VSCode with your react native app.

20. Open a new terminal:

21. Type npm run android, allow network access

22. If you haven't set your JAVA_HOME variable do it now:
    https://www.oracle.com/java/technologies/downloads/

jdk-23_windows-x64_bin.msi
C:\Program Files\Java\jdk-23
Environment Variables for User variables, New

23. After java home is there close all command sessions and reload code opening project hello world.
    in Terminal run
    npm run android

24. You should now see the emulator in VSCode working..