[Demo] Add info about React Native app

content/en/docs/demo/_index.md

@@ -54,6 +54,7 @@ found here:
 - [Recommendation Service](services/recommendation/)
 - [Shipping Service](services/shipping/)
 - [Image Provider Service](services/imageprovider/)
+- [React Native App](services/reactnativeapp/)
 
 ## Scenarios
 

content/en/docs/demo/architecture.md

@@ -32,6 +32,7 @@ quoteservice(Quote Service):::php
 recommendationservice(Recommendation Service):::python
 shippingservice(Shipping Service):::rust
 queue[(queue<br/>&#40Kafka&#41)]:::java
+reactnativeapp(React Native App):::typescript
 
 adservice ---->|gRPC| flagd
 
@@ -73,6 +74,8 @@ recommendationservice -->|gRPC| productcatalogservice
 recommendationservice -->|gRPC| flagd
 
 shippingservice -->|HTTP| quoteservice
+
+reactnativeapp -->|HTTP| frontendproxy
 end
 
 classDef dotnet fill:#178600,color:white;

content/en/docs/demo/services/_index.md

@@ -15,10 +15,11 @@ To visualize request flows, see the [Service Diagram](../architecture/).
 | [currencyservice](currency/)              | C++           | Converts one money amount to another currency. Uses real values fetched from European Central Bank. It's the highest QPS service.    |
 | [emailservice](email/)                    | Ruby          | Sends users an order confirmation email (mock/).                                                                                     |
 | [frauddetectionservice](fraud-detection/) | Kotlin        | Analyzes incoming orders and detects fraud attempts (mock/).                                                                         |
-| [frontend](frontend/)                     | JavaScript    | Exposes an HTTP server to serve the website. Does not require sign up / login and generates session IDs for all users automatically. |
+| [frontend](frontend/)                     | TypeScript    | Exposes an HTTP server to serve the website. Does not require sign up / login and generates session IDs for all users automatically. |
 | [loadgenerator](load-generator/)          | Python/Locust | Continuously sends requests imitating realistic user shopping flows to the frontend.                                                 |
 | [paymentservice](payment/)                | JavaScript    | Charges the given credit card info (mock/) with the given amount and returns a transaction ID.                                       |
 | [productcatalogservice](product-catalog/) | Go            | Provides the list of products from a JSON file and ability to search products and get individual products.                           |
 | [quoteservice](quote/)                    | PHP           | Calculates the shipping costs, based on the number of items to be shipped.                                                           |
 | [recommendationservice](recommendation/)  | Python        | Recommends other products based on what's given in the cart.                                                                         |
 | [shippingservice](shipping/)              | Rust          | Gives shipping cost estimates based on the shopping cart. Ships items to the given address (mock/).                                  |
+| [reactnativeapp](reactnativeapp/)         | TypeScript    | React Native mobile application that provides a UI on top of the shopping services.                                                  |

content/en/docs/demo/services/reactnativeapp.md

@@ -0,0 +1,38 @@
+---
+title: React Native App
+cSpell:ignore: typeof
+---
+
+The React Native app provides a mobile UI for users on Android and iOS devices
+to interact with the demo's services. It is built with Expo and uses Expo's
+file-based routing to layout the screens for the app.
+
+[React Native app source](https://github.com/open-telemetry/opentelemetry-demo/blob/main/src/reactnativeapp/)
+
+## Instrumentation
+
+The application uses the OpenTelemetry packages to instrument the application at
+the JS layer
+
+> **NOTE:** The JS OTel packages are supported for node and web environments.
+> While they work for React Native as well they are not currently explicitly
+> supported for that environment and may break compatibility with minor version
+> updates or require workarounds. Building more support for React Native is an
+> area of active development.
+
+The main entry point for the application is `app/_layout.tsx` where a hook is
+used to initialize the instrumentation and make sure it is loaded before
+displaying the UI:
+
+```typescript
+import { useTracer } from '@/hooks/useTracer';
+
+const { loaded: tracerLoaded } = useTracer();
+```
+
+`hooks/useTracer.ts` contains all the code for setting up instrumentation
+including initializing a TracerProvider, establishing an OTLP export,
+registering trace context propagators, and registering auto-instrumentation of
+network requests.
+
+[Instrumentation source](https://github.com/open-telemetry/opentelemetry-demo/blob/main/src/reactnativeapp/hooks/useTracer.ts)