React native development with Coder

Other apps we could try later:

Note: I tried with standalone React Rative, but Expo (a beginner-friendly framework) works too. I tried this in 2021 with Coder.

In Coder

This works on a aws-linux VM. You can run it all at once

# add to .bashrc
echo "export ANDROID_SDK_ROOT=/usr/lib/android-sdk" >> ~/.bashrc
echo "export ANDROID_HOME=${ANDROID_SDK_ROOT}" >> ~/.bashrc
echo "export PATH=${PATH}:/usr/lib/android-sdk/platform-tools" >> ~/.bashrc
echo "export PATH=${PATH}:${ANDROID_SDK_ROOT}/cmdline-tools/latest/bin" >> ~/.bashrc

source ~/.bashrc

sudo su

# You have to run again since root has different path
export ANDROID_SDK_ROOT=/usr/lib/android-sdk
export ANDROID_HOME=${ANDROID_SDK_ROOT}
export PATH=${PATH}:/usr/lib/android-sdk/platform-tools
export PATH=${PATH}:${ANDROID_SDK_ROOT}/cmdline-tools/latest/bin

# Packages required for multi-editor support
DEBIAN_FRONTEND="noninteractive" apt-get update -y && \
    apt-get install -y \
    libxtst6 \
    libxrender1 \
    libfontconfig1 \
    libxi6 \
    libgtk-3-0 \
		openjdk-11-jre \
		unzip

mkdir -p $ANDROID_SDK_ROOT

# Install cmdline-tools.
cd ${ANDROID_SDK_ROOT} && \
    mkdir cmdline-tools && \
    cd cmdline-tools && \
    wget https://dl.google.com/android/repository/commandlinetools-linux-6858069_latest.zip && \
    unzip *.zip && rm *.zip && \
    mv cmdline-tools latest

# Install build tools.
yes | sdkmanager "build-tools;30.0.3"

# Install platform android-33.
yes | sdkmanager "platforms;android-33"

# Install Android Studio
DEBIAN_FRONTEND="noninteractive" add-apt-repository -y ppa:maarten-fonville/android-studio && \
    apt update && \
    apt install -y android-studio && \
    ln -s /opt/android-studio/bin/studio.sh /usr/local/bin/studio

# Back to Coder user
exit

# Install NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

# Add to path
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

nvm install 16
yes | npx react-native init reactNativeStarter

On local machine

Download Android studio
Open AVD manager, create a device, use android 33
Open device
Ensure ADB runs on port 5555
```
~/Library/Android/sdk/platform-tools/adb tcpip 5555
```
This assumes you are on MacOS
Forward port 5555 to Coder workspace

coder config-ssh

ssh -R 5555:127.0.0.1:5555 coder.<workspace-name>
# You should have an active session

# ensure ADB runs on port 5555
$ANDROID_SDK_ROOT/platform-tools/adb tcpip 5555

# ensure device shows up and is online
adb devices

Start app

cd reactNativeStarter
npm run android
npm start

Debugging

Debugging works via Google Chrome

Helpful resources

https://www.paincker.com/adb-remote/

bpmct/react-native-coder.md

React native development with Coder

In Coder

Debugging