refactor(example): Add WebView tests (#23)

- **refactor: migrate example to expo-router**
- **refactor: migrate example to app.config.ts**
- **docs: explain the example pins**
- **refactor: add webview tests**

Author: matthieugicquel

example/app.config.ts

@@ -0,0 +1,58 @@
+import type { ExpoConfig } from "expo/config";
+
+const config: ExpoConfig = {
+  name: "react-native-app-security-example",
+  slug: "react-native-app-security-example",
+  scheme: "rnas-example",
+  version: "1.0.0",
+  orientation: "portrait",
+  icon: "./assets/icon.png",
+  userInterfaceStyle: "light",
+  splash: {
+    image: "./assets/splash.png",
+    resizeMode: "contain",
+    backgroundColor: "#ffffff",
+  },
+  assetBundlePatterns: ["**/*"],
+  ios: {
+    supportsTablet: true,
+    bundleIdentifier: "tech.bam.rnas.example",
+  },
+  android: {
+    adaptiveIcon: {
+      foregroundImage: "./assets/adaptive-icon.png",
+      backgroundColor: "#ffffff",
+    },
+    package: "tech.bam.rnas.example",
+  },
+  plugins: [
+    [
+      "../app.plugin.js",
+      {
+        sslPinning: {
+          "*.yahoo.com": [
+            // Invalid pins to test failure
+            "TQEtdMbmwFgYUifM4LDF+xgEtd0z69mPGmkp014d6ZY=",
+            "rFjc3wG7lTZe43zeYTvPq8k4xdDEutCmIhI5dn4oCeE=",
+          ],
+          "google.com": [
+            // One valid pin to test success
+            "2MXZa6jBZjmb6FYPT3yf4oZFB67aQGmsX4DQgddQ7XA=",
+            "ylrexmVB/d9PHCARU9i0R9km/ahwuNpWaWXbpLyR7jQ=",
+          ],
+        },
+        preventRecentScreenshots: {
+          ios: {
+            enabled: true,
+          },
+          android: {
+            enabled: true,
+          },
+        },
+      },
+    ],
+    "expo-router",
+  ],
+};
+
+export default config;

example/app.json

@@ -0,0 +1,5 @@
+import { Stack } from "expo-router";
+
+export default function Layout() {
+  return <Stack />;
+}

example/app/_layout.tsx

@@ -1,9 +1,11 @@
 import { SafeKeyboardDetector } from "@bam.tech/react-native-app-security";
+import { useRouter } from "expo-router";
 import { useState } from "react";
 import { Button, Modal, Platform, StyleSheet, View } from "react-native";
 
 export default function App() {
   const [isModalVisible, setIsModalVisible] = useState(false);
+  const router = useRouter();
 
   return (
     <View style={styles.container}>
@@ -23,6 +25,14 @@ export default function App() {
         title="fetch - invalid certificates - subdomain"
         onPress={fetchInvalidSubdomain}
       />
+      <Button
+        title="WebView - valid pin (Google)"
+        onPress={() => router.push("/webview-pin-ok")}
+      />
+      <Button
+        title="WebView - invalid pin (Yahoo)"
+        onPress={() => router.push("/webview-pin-ko")}
+      />
       <Button title="Is current keyboard safe?" onPress={checkIsKeyboardSafe} />
       {Platform.OS === "android" ? (
         <Button
@@ -61,15 +71,17 @@ const fetchUnpinned = async () => {
   }
 };
 
-
 const fetchValid = async () => {
   try {
     const response = await fetch("https://google.com");
     console.warn("✅ valid certificate and fetch succeeded", {
       status: response.status,
     });
   } catch (error) {
-    console.warn("❌ valid certificate but fetch failed - public keys expire, make sure they are up to date", error);
+    console.warn(
+      "❌ valid certificate but fetch failed - public keys expire, make sure they are up to date",
+      error
+    );
   }
 };
 

example/App.tsx example/app/index.tsxexample/App.tsx renamed to example/app/index.tsx

@@ -0,0 +1,24 @@
+import { useRef } from "react";
+import { StyleSheet } from "react-native";
+import WebView from "react-native-webview";
+
+export default function WebViewPinOk() {
+  const webViewRef = useRef<WebView>(null);
+
+  return (
+    <WebView
+      ref={webViewRef}
+      source={{ uri: "https://yahoo.com" }}
+      style={styles.webview}
+      onError={({ nativeEvent }) => {
+        console.warn("✅ Invalid pin and load failed", nativeEvent.description);
+      }}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  webview: {
+    flex: 1,
+  },
+});

example/app/webview-pin-ko.tsx

@@ -0,0 +1,24 @@
+import { useRef } from "react";
+import { StyleSheet } from "react-native";
+import WebView from "react-native-webview";
+
+export default function WebViewPinOk() {
+  const webViewRef = useRef<WebView>(null);
+
+  return (
+    <WebView
+      ref={webViewRef}
+      source={{ uri: "https://google.com" }}
+      style={styles.webview}
+      onError={({ nativeEvent }) => {
+        console.warn("❌ Valid pin and load failed", nativeEvent.description);
+      }}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  webview: {
+    flex: 1,
+  },
+});

example/app/webview-pin-ok.tsx

@@ -1,18 +1,24 @@
 {
   "name": "react-native-app-security-example",
   "version": "1.0.0",
-  "main": "node_modules/expo/AppEntry.js",
+  "main": "expo-router/entry",
   "scripts": {
     "start": "expo start --dev-client",
     "android": "expo run:android",
     "ios": "expo run:ios"
   },
   "dependencies": {
     "expo": "^51.0.0",
+    "expo-constants": "~16.0.2",
+    "expo-linking": "~6.3.1",
+    "expo-router": "~3.5.24",
     "expo-splash-screen": "~0.27.7",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
-    "react-native": "0.74.5"
+    "react-native": "0.74.5",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.31.1",
+    "react-native-webview": "13.8.6"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",