|
| 1 | +# Example React Native app |
| 2 | + |
| 3 | +This was created using [`npx create-expo-app@latest`](https://reactnative.dev/docs/environment-setup#start-a-new-react-native-project-with-expo) |
| 4 | + |
| 5 | +Content was taken from the web app example in src/frontend and modified to work |
| 6 | +in a React Native environment. |
| 7 | + |
| 8 | +## Get started |
| 9 | + |
| 10 | +Start the OpenTelemetry demo from the root of this repo: |
| 11 | + |
| 12 | +```bash |
| 13 | +cd ../.. |
| 14 | +make start # or start-minimal |
| 15 | +``` |
| 16 | + |
| 17 | +## Building the app |
| 18 | + |
| 19 | +Unlike the other components under src/ which run within containers this |
| 20 | +app must be built and then run on a mobile simulator on your machine or a physical |
| 21 | +device. If this is your first time running a React Native app then in order to |
| 22 | +execute the steps under "Build on your host machine" you will need to setup your |
| 23 | +local environment for Android or iOS development or both following |
| 24 | +[this guide](https://reactnative.dev/docs/set-up-your-environment). Alternatively |
| 25 | +for Android you can instead follow the steps under "Build within a container" to |
| 26 | +leverage a container to build the app's apk for you. |
| 27 | + |
| 28 | +### Build on your host machine |
| 29 | + |
| 30 | +Build and run the React Native app for a given platform by navigating to this folder |
| 31 | +and running: |
| 32 | + |
| 33 | +```bash |
| 34 | +cd src/react-native-app |
| 35 | +npm install |
| 36 | +``` |
| 37 | + |
| 38 | +To run on Android: |
| 39 | + |
| 40 | +```bash |
| 41 | +npm run android |
| 42 | +``` |
| 43 | + |
| 44 | +Note that for the above command a server is also spun up to serve the JS bundle |
| 45 | +to the deployed app. |
| 46 | + |
| 47 | +To run on iOS you may find it cleanest to build through the XCode IDE. First spin |
| 48 | +up the react native dev server with the following (feel free to ignore the output |
| 49 | +commands referring to opening an iOS simulator, we'll do that directly through |
| 50 | +XCode in a later step): |
| 51 | + |
| 52 | +```bash |
| 53 | +npm run start |
| 54 | +``` |
| 55 | + |
| 56 | +Then install the pods for the project: |
| 57 | + |
| 58 | +```bash |
| 59 | +cd ios |
| 60 | +pod install |
| 61 | +``` |
| 62 | + |
| 63 | +Note that the above is the quickest way to get going but you may end up with |
| 64 | +slightly different versions of the Pods than what has been committed to this repo, |
| 65 | +in order to install the precise versions first setup [rbenv](https://github.com/rbenv/rbenv#installation) |
| 66 | +followed by: |
| 67 | + |
| 68 | +```bash |
| 69 | +rbenv install 2.7.6 # the version of ruby we've pinned for this app |
| 70 | +bundle install |
| 71 | +cd ios |
| 72 | +bundle exec pod install |
| 73 | +``` |
| 74 | + |
| 75 | +Then open XCode, open this as an existing project by opening `src/react-native-app/ios/react-native-app.xcworkspace` |
| 76 | +then trigger the build by hitting the Play button or from the menu using Product->Run. |
| 77 | + |
| 78 | +Or alternatively build and run from the command-line: |
| 79 | + |
| 80 | +```bash |
| 81 | +npm run ios |
| 82 | +``` |
| 83 | + |
| 84 | +Note that for the above command a server is also spun up to serve the JS bundle |
| 85 | +to the deployed apps. |
| 86 | + |
| 87 | +### Build within a container |
| 88 | + |
| 89 | +For Android builds you can produce an apk using Docker without requiring the dev |
| 90 | +tools to be installed on your host. From the project root run: |
| 91 | + |
| 92 | +```bash |
| 93 | +make build-react-native-android |
| 94 | +``` |
| 95 | + |
| 96 | +Or directly from this folder using: |
| 97 | + |
| 98 | +```bash |
| 99 | +docker build -f android.Dockerfile --platform=linux/amd64 --output=. . |
| 100 | +``` |
| 101 | + |
| 102 | +This will produce `react-native-app.apk` in the directory where you ran the command. |
| 103 | +If you have an Android emulator running on your machine then you can simply drag |
| 104 | +and drop this file onto the emulator's window in order to install it following |
| 105 | +[these steps](https://developer.android.com/studio/run/emulator-install-add-files). |
| 106 | + |
| 107 | +TODO: For a physical device you can install this by sending the apk file to your |
| 108 | +device, giving the "Install unknown apps" permission to the app you will be opening |
| 109 | +the file with, and then installing it. However this won't be able to hit the APIs |
| 110 | +because they are hard-coded to be localhost, need those to be configurable before |
| 111 | +this method would work. |
| 112 | + |
| 113 | +## Troubleshooting |
| 114 | + |
| 115 | +### iOS build issues |
| 116 | + |
| 117 | +If you see a build failure related to pods try forcing a clean install with and |
| 118 | +then attempt another build after: |
| 119 | + |
| 120 | +```bash |
| 121 | + cd src/react-native-app/ios |
| 122 | + rm Podfile.lock |
| 123 | + pod cache clean --all |
| 124 | + pod repo update --verbose |
| 125 | + pod deintegrate |
| 126 | + pod install --repo-update --verbose |
| 127 | +``` |
| 128 | + |
| 129 | +If there is an error compiling or running the app try closing any open simulators |
| 130 | +and clearing all derived data: |
| 131 | + |
| 132 | +```bash |
| 133 | +rm -rf ~/Library/Developer/Xcode/DerivedData |
| 134 | +``` |
| 135 | + |
| 136 | +### Android build issues |
| 137 | + |
| 138 | +Try stopping and cleaning local services (in case there are unknown issues related |
| 139 | +to the start of the app): |
| 140 | + |
| 141 | +```bash |
| 142 | + cd src/react-native-app/android |
| 143 | + ./gradlew --stop // stop daemons |
| 144 | + rm -rf ~/.gradle/caches/ |
| 145 | +``` |
| 146 | + |
| 147 | +### JS build issues |
| 148 | + |
| 149 | +Try removing the `src/react-native-app/node_modules/` folder and then re-run |
| 150 | +`npm install` from inside `src/react-native-app`. |
0 commit comments