Add React Native tracker example (#60)

* Add React Native tracker example

* Update dev version

* Update version and add webview tracking

* Update readme

* Remove unused imports

* Add link to example from main readme

Author: matus-tomlein

README.md

@@ -4,4 +4,5 @@
 
 - [Angular](angular/ngSnowplow)
 - [React](react)
+- [React Native](react-native-example)
 - [Next.js](nextjs)

react-native-example/.gitignore

@@ -0,0 +1,20 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

react-native-example/README.md

@@ -0,0 +1,24 @@
+# Snowplow React Native Tracker Example App
+
+This app shows how the Snowplow React Native Tracker v4 can be used in React Native apps.
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+    npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo

react-native-example/app.json

@@ -0,0 +1,36 @@
+{
+  "expo": {
+    "name": "rn-test",
+    "slug": "rn-test",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router"
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

react-native-example/app/_layout.tsx

@@ -0,0 +1,9 @@
+import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" />
+    </Stack>
+  );
+}

react-native-example/app/index.tsx

@@ -0,0 +1,67 @@
+import { Button, Text, View } from "react-native";
+import {
+  trackPageView,
+  trackScreenView,
+  trackScrollChanged,
+  trackStructEvent,
+  trackProductViewEvent,
+  trackTransactionEvent,
+} from "./tracking";
+import { useEffect } from "react";
+import { WebView } from "react-native-webview";
+import { getWebViewCallback } from "@snowplow/react-native-tracker";
+import { Dimensions } from "react-native";
+
+const webViewEndpoint = "";
+
+export default function Index() {
+  useEffect(() => {
+    trackScreenView("Home");
+  });
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Text style={{ fontWeight: "bold", fontSize: 20 }}>Basic Events</Text>
+      <Button
+        onPress={trackStructEvent}
+        title="Track a structured event"
+      ></Button>
+      <Button onPress={trackPageView} title="Track a page view event"></Button>
+      <Button
+        onPress={() => trackScreenView("Other")}
+        title="Track a screen view event"
+      ></Button>
+      <Button
+        onPress={() => trackScrollChanged()}
+        title="Track a scroll changed event"
+      ></Button>
+      <Text style={{ fontWeight: "bold", fontSize: 20 }}>
+        E-commerce Events
+      </Text>
+      <Button
+        onPress={() => trackProductViewEvent()}
+        title="Track a product view"
+      ></Button>
+      <Button
+        onPress={() => trackTransactionEvent()}
+        title="Track a transaction"
+      ></Button>
+
+      {webViewEndpoint ? (
+        <WebView
+          onMessage={getWebViewCallback()}
+          source={{ uri: webViewEndpoint }}
+          style={{
+            width: Dimensions.get("window").width,
+          }}
+        />
+      ) : null}
+    </View>
+  );
+}

react-native-example/app/tracking.ts

@@ -0,0 +1,83 @@
+import { newTracker, ReactNativeTracker } from "@snowplow/react-native-tracker";
+import { SnowplowEcommercePlugin, trackProductView, trackTransaction } from "@snowplow/browser-plugin-snowplow-ecommerce";
+
+let tracker: ReactNativeTracker | undefined;
+export async function getTracker() {
+  if (tracker) {
+    return tracker;
+  }
+  tracker = await newTracker({
+    namespace: "sp1",
+    appId: "my-app",
+    appVersion: "0.1.0",
+    endpoint: "http://0.0.0.0:9090",
+    installAutotracking: true,
+    plugins: [SnowplowEcommercePlugin()],
+  });
+  return tracker;
+}
+
+export async function trackScreenView(name: string) {
+  const tracker = await getTracker();
+  tracker.trackScreenViewEvent({ name });
+}
+
+export async function trackPageView() {
+  const tracker = await getTracker();
+  tracker.trackPageViewEvent({
+    pageUrl: "https://snowplow.io",
+    pageTitle: "My Page",
+  });
+}
+
+export async function trackStructEvent() {
+  const tracker = await getTracker();
+  tracker.trackStructuredEvent({
+    category: "cat",
+    action: "act",
+    label: "lbl",
+  });
+}
+
+export async function trackScrollChanged() {
+  const tracker = await getTracker();
+  tracker.trackScrollChangedEvent({
+    yOffset: 100,
+    xOffset: 200,
+  });
+}
+
+export function trackProductViewEvent() {
+    trackProductView({
+        id: "product-1",
+        price: 100,
+        currency: "USD",
+        name: "Product 1",
+        category: "Category 1",
+    })
+}
+
+export function trackTransactionEvent() {
+    trackTransaction({
+      currency: "USD",
+      transaction_id: "transaction-1",
+      revenue: 500,
+      payment_method: "Visa",
+      products: [
+        {
+          id: "product-1",
+          price: 100,
+          quantity: 1,
+          currency: "USD",
+          category: "Category 1",
+        },
+        {
+          id: "product-2",
+          price: 200,
+          quantity: 2,
+          currency: "USD",
+          category: "Category 2",
+        },
+      ],
+    });
+}