Skip to content

Latest commit

 

History

History
162 lines (117 loc) · 4.68 KB

README.md

File metadata and controls

162 lines (117 loc) · 4.68 KB

Example React Native app

This was created using npx create-expo-app@latest

Content was taken from the web app example in src/frontend and modified to work in a React Native environment.

Get started

Start the OpenTelemetry demo from the root of this repo:

cd ../..
make start # or start-minimal

Building the app

Unlike the other components under src/ which run within containers this app must be built and then run on a mobile simulator on your machine or a physical device. If this is your first time running a React Native app then in order to execute the steps under "Build on your host machine" you will need to setup your local environment for Android or iOS development or both following this guide. Alternatively for Android you can instead follow the steps under "Build within a container" to leverage a container to build the app's apk for you.

Build on your host machine

Before building the app you will need to install the dependencies for the app.

cd src/react-native-app
npm install

Android: Build and run app

To run on Android, the following command will compile the Android app and deploy it to a running Android simulator or connected device. It will also start a a server to provide the JS Bundle required by the app.

npm run android

iOS: Setup dependencies

Before building for iOS you will need to setup the iOS dependency management using CocoaPods. This command only needs to be run the first time before building the app for iOS.

cd ios && pod install && cd ..

iOS: Build and run with XCode

To run on iOS you may find it cleanest to build through the XCode IDE. In order to start a server to provide the JS Bundle, run the following command (feel free to ignore the output commands referring to opening an iOS simulator, we'll do that directly through XCode in the next step).

npm run start

Then open XCode, open this as an existing project by opening src/react-native-app/ios/react-native-app.xcworkspace then trigger the build by hitting the Play button or from the menu using Product->Run.

iOS: Build and run from the command-line

You can build and run the app using the command line with the following command. This will compile the iOS app and deploy it to a running iOS simulator and start a server to provide the JS Bundle.

npm run ios

Build within a container

For Android builds you can produce an apk using Docker without requiring the dev tools to be installed on your host. From this repository root run the following command.

make build-react-native-android

Or directly from this folder using.

docker build -f android.Dockerfile --platform=linux/amd64 --output=. .

This will create a react-native-app.apk file in the directory where you ran the command. If you have an Android emulator running on your machine then you can drag and drop this file onto the emulator's window in order to install it.

Pointing to another demo environment

By default, the app will point to EXPO_PUBLIC_FRONTEND_PROXY_PORT on localhost to interact with the demo APIs. This can be changed in the Settings tab when running the app to point to a demo environment running on a different server.

Troubleshooting

JS Bundle: build issues

Try removing the src/react-native-app/node_modules/ folder and then re-run npm install from inside src/react-native-app.

Android: build app issues

Try stopping and cleaning local services (in case there are unknown issues related to the start of the app).

cd src/react-native-app/android
./gradlew --stop  // stop daemons
rm -rf ~/.gradle/caches/

iOS: pod install issues

Note that the above is the quickest way to get going but you may end up with slightly different versions of the Pods than what has been committed to this repository, in order to install the precise versions first setup rbenv followed by the following commands.

rbenv install 2.7.6 # the version of ruby we've pinned for this app
bundle install
cd ios
bundle exec pod install

iOS: build app issues

If you see a build failure related to pods try forcing a clean install with and then attempt another build after:

  cd src/react-native-app/ios
  rm Podfile.lock
  pod cache clean --all
  pod repo update --verbose
  pod deintegrate
  pod install --repo-update --verbose

If there is an error compiling or running the app try closing any open simulators and clearing all derived data:

rm -rf ~/Library/Developer/Xcode/DerivedData