Add production section

pagopa · Apr 22, 2024 · 4cdbe6e · 4cdbe6e
1 parent 9be1528
commit 4cdbe6e
Show file tree

Hide file tree

Showing 4 changed files with 263 additions and 32 deletions.
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
diff --git a/example/package.json b/example/package.json
@@ -11,8 +11,14 @@
   "dependencies": {
     "@pagopa/io-react-native-crypto": "^0.2.3",
     "@pagopa/io-react-native-jwt": "^1.0.0",
+    "@react-native-community/masked-view": "^0.1.11",
+    "@react-navigation/bottom-tabs": "^6.5.20",
+    "@react-navigation/native": "^6.1.17",
+    "@react-navigation/native-stack": "^6.9.26",
     "react": "18.2.0",
-    "react-native": "0.72.4"
+    "react-native": "0.72.4",
+    "react-native-safe-area-context": "^4.9.0",
+    "react-native-screens": "^3.30.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -11,9 +11,13 @@ import scenarios, { type ScenarioRunner } from "./scenarios";
 import React, { useEffect } from "react";
 import "react-native-url-polyfill/auto";
 import { encodeBase64 } from "@pagopa/io-react-native-jwt";
+import { NavigationContainer } from "@react-navigation/native";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import type { NativeStackScreenProps } from "@react-navigation/native-stack";
 
 export default function App() {
   const [deeplink, setDeeplink] = React.useState<string | undefined>();
+  const Tab = createBottomTabNavigator<RootStackParamList>();
 
   useEffect(() => {
     Linking.getInitialURL()
@@ -38,38 +42,83 @@ export default function App() {
 
   return (
     <SafeAreaView style={styles.container}>
-      <ScrollView>
-        <TestScenario
-          title="Decode SD-JWT"
-          scenario={scenarios.decodeCredentialSdJwt}
-        />
-        <TestScenario
-          title="Verify SD-JWT"
-          scenario={scenarios.verifyCredentialSdJwt}
-        />
-        <TestScenario title="Decode PID" scenario={scenarios.decodePid} />
-        <TestScenario title="Verify PID" scenario={scenarios.verifyPid} />
-        <TestScenario title="Get WIA" scenario={scenarios.getAttestation} />
-        <TestScenario title="Get PID" scenario={scenarios.getPid} />
-        <TestScenario
-          title="Get Credential"
-          scenario={scenarios.getCredential}
-        />
-        <TestScenario
-          title="Get Multiple Credential"
-          scenario={scenarios.getMultipleCredential}
-        />
-        <TestScenario title="Decode QR from RP" scenario={scenarios.decodeQR} />
-        <TestScenario
-          title="Fetch Entity Statement"
-          scenario={scenarios.getEntityStatement}
-        />
-        <TestSameDeviceFlowScenarioWithDeepLink deeplink={deeplink} />
-      </ScrollView>
+      <NavigationContainer>
+        <Tab.Navigator
+          screenOptions={({ route }) => ({
+            // eslint-disable-next-line react/no-unstable-nested-components
+            tabBarIcon: () => {
+              let icon;
+              if (route.name === "PoC") {
+                icon = "🧪";
+              } else if (route.name === "Production") {
+                icon = "🚀";
+              }
+              return <Text>{icon}</Text>;
+            },
+            tabBarActiveTintColor: "blue",
+            tabBarInactiveTintColor: "gray",
+          })}
+        >
+          <Tab.Screen name="PoC" component={PoC} initialParams={{ deeplink }} />
+          <Tab.Screen
+            name="Production"
+            component={Production}
+            initialParams={{}}
+          />
+        </Tab.Navigator>
+      </NavigationContainer>
     </SafeAreaView>
   );
 }
 
+type RootStackParamList = {
+  PoC: { deeplink: string };
+  Production: {};
+};
+
+function Production({}: NativeStackScreenProps<
+  RootStackParamList,
+  "Production"
+>) {
+  return (
+    <ScrollView>
+      <Text>Coming soon!</Text>
+    </ScrollView>
+  );
+}
+
+function PoC({ route }: NativeStackScreenProps<RootStackParamList, "PoC">) {
+  const deeplink = route.params.deeplink;
+
+  return (
+    <ScrollView>
+      <TestScenario
+        title="Decode SD-JWT"
+        scenario={scenarios.decodeCredentialSdJwt}
+      />
+      <TestScenario
+        title="Verify SD-JWT"
+        scenario={scenarios.verifyCredentialSdJwt}
+      />
+      <TestScenario title="Decode PID" scenario={scenarios.decodePid} />
+      <TestScenario title="Verify PID" scenario={scenarios.verifyPid} />
+      <TestScenario title="Get WIA" scenario={scenarios.getAttestation} />
+      <TestScenario title="Get PID" scenario={scenarios.getPid} />
+      <TestScenario title="Get Credential" scenario={scenarios.getCredential} />
+      <TestScenario
+        title="Get Multiple Credential"
+        scenario={scenarios.getMultipleCredential}
+      />
+      <TestScenario title="Decode QR from RP" scenario={scenarios.decodeQR} />
+      <TestScenario
+        title="Fetch Entity Statement"
+        scenario={scenarios.getEntityStatement}
+      />
+      <TestSameDeviceFlowScenarioWithDeepLink deeplink={deeplink} />
+    </ScrollView>
+  );
+}
+
 function TestScenario({
   scenario,
   title = scenario.name,