This is a new React Native project, bootstrapped using @react-native-community/cli.
Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.
Ensure you have those environment variables set
# React native
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
export JAVA_HOME=/usr/lib/jvm/default-java
export PATH=$PATH:$JAVA_HOME/bin
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/10.0/binYou could add those to your favorite shell configuration (like ~/.zshrc or ~/.bashrc). You should also create a .env file:
DATADOG_CLIENT_TOKEN=<DATADOG_CLIENT_TOKEN>
DATADOG_ENVIRONMENT=<DATADOG_CLIENT_TOKEN>
DATADOG_APPLICATION_ID=<DATADOG_CLIENT_TOKEN>
DATADOG_TRACK_USER_INTERACTIONS=true
DATADOG_TRACK_XHR_RESOURCES=true
DATADOG_TRACK_ERRORS=true
DATADOG_PROXY_HOST=<proxy host or IP>
DATADOG_PROXY_PORT=8080
DATADOG_PROXY_TYPE=httpProxy configuration entries are optional: they should be removed if not used. DATADOG_PROXY_TYPE can be https, http or socks as documented. To test chained proxy, get the host IP address that can be used from virtual device and docker container:
hostname -I | awk '{print $1}'This IP has to be set Android WIFI proxy settings, on port 3128. It has to be set also in .env for DATADOG_PROXY_HOST
Docker build commands:
TODO Fix following. Build and run the web-proxy:
docker build -t squid-proxy ./squid
docker run --rm -p 3128:3128 -v ./logs:/var/log -v ./squid/squid.conf:/etc/squid3/squid.conf squid-proxy
First, you will need to start Metro, the JavaScript bundler that ships with React Native.
To start Metro, run the following command from the root of your React Native project:
# using npm
npm start
# OR using Yarn
yarn startLet Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:
# using npm
npm run android
# OR using Yarn
yarn android# using npm
npm run ios
# OR using Yarn
yarn iosIf everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.
This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
Now that you have successfully run the app, let's modify it.
-
Open
App.tsxin your text editor of choice and edit some lines. -
For Android: Press the R key twice or select "Reload" from the Developer Menu (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes!
For iOS: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes!
Whenever your environment is changed you should perform those commands to ensure it is taken into account:
cd android
./gradlew clean
cd ..
npm run android- Create a root CA:
cd dd_gateway
openssl req -x509 -sha256 -days 1825 -newkey rsa:2048 -keyout rootCA.key -out rootCA.crt --conf rootCA.conf- Create a combined CA certificate for Android:
openssl pkcs12 -export -in rootCA.crt -inkey rootCA.key -out rootCA-combined.p12- Create a server certificate
openssl req -newkey rsa:2048 -nodes -keyout server.key -out server.csr --config server.conf - Sign certificate with root CA
openssl x509 -req -in server.csr -CA rootCA.crt -CAkey rootCA.key -CAcreateserial -out server.crt -days 365 -sha256 -extfile server.conf -extensions v3_req- Copy certificate for later embedding (TODO repeat for debug env...):
cp server.crt ../android/app/src/main/res/raw/server.crt
cp rootCA.crt ../android/app/src/main/res/raw/server.crtopenssl x509 -in rootCA.crt -textCurrently debug doesn't work when proxy is enabled.
cd android
./gradlew clean assemble
adb install -r app/build/outputs/apk/release/app-release.apk
You've successfully run and modified your React Native App. 🥳
- If you want to add this new React Native code to an existing application, check out the Integration guide.
- If you're curious to learn more about React Native, check out the Introduction to React Native.
If you can't get this to work, see the Troubleshooting page.
To learn more about React Native, take a look at the following resources:
- React Native Website - learn more about React Native.
- Getting Started - an overview of React Native and how setup your environment.
- Learn the Basics - a guided tour of the React Native basics.
- Blog - read the latest official React Native Blog posts.
@facebook/react-native- the Open Source; GitHub repository for React Native.