Update expo-react-native implementation

examples/react-native-expo/.env.example

@@ -2,4 +2,4 @@ EXPO_PUBLIC_QUILTT_CLIENT_ID="GET_THIS_ID_FROM_YOUR_DASHBOARD"
 EXPO_PUBLIC_QUILTT_AUTH_TOKEN="GET_THIS_TOKEN_FROM_YOUR_SERVER"
 EXPO_PUBLIC_CONNECTOR_ID="GET_THIS_ID_FROM_YOUR_DASHBOARD"
 EXPO_PUBLIC_HTTPS_APP_LINK="YOUR_APP_LINK"
-EXPO_PUBLIC_INSTITUION_SEARCH_TERM="OPTIONAL_INSTITUTION_SEARCH_TERM"
+EXPO_PUBLIC_INSTITUTION_SEARCH_TERM="OPTIONAL_INSTITUTION_SEARCH_TERM"

examples/react-native-expo/.gitignore

@@ -1,26 +1,42 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
 node_modules/
+
+# Expo
 .expo/
 dist/
-npm-debug.*
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
 *.jks
 *.p8
 *.p12
 *.key
 *.mobileprovision
-*.orig.*
-web-build/
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
 
 # macOS
 .DS_Store
+*.pem
 
-.env*
-!.env.example
+# local env files
+.env
+.env*.local
 
-# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
-# The following patterns were generated by expo-cli
+# typescript
+*.tsbuildinfo
 
-expo-env.d.ts
-# @end expo-cli
+app-example
 
 # App builds
 android/

examples/react-native-expo/README.md

@@ -1,33 +1,19 @@
 # Welcome to Quiltt's example Expo app 👋
 
-This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.pnpmjs.com/package/create-expo-app).
 
-## Development
-
-### Prerequisites
-
-Make sure you have [Yarn](https://yarnpkg.com/) installed. If you don't have it installed, you can follow the instructions [here](https://yarnpkg.com/getting-started/install).
-
-### Get started
+## Get started
 
 1. Install dependencies
 
    ```bash
-   yarn install
-   ```
-
-2. Set up environment variables
-
-   Create a new `.env` file at the root of the project, then copy the contents of `.env.example` into it. Replace the placeholder values with the proper values you can get from the Quiltt Dashboard.
-
-   ```bash
-   cp .env.example .env
+   pnpm install
    ```
 
-3. Start the app
+2. Start the app
 
    ```bash
-    yarn start
+    npx expo start
    ```
 
 In the output, you'll find options to open the app in a

examples/react-native-expo/app.json

@@ -7,12 +7,7 @@
     "icon": "./assets/images/icon.png",
     "scheme": "myapp",
     "userInterfaceStyle": "automatic",
-    "splash": {
-      "image": "./assets/images/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "assetBundlePatterns": ["**/*"],
+    "newArchEnabled": true,
     "ios": {
       "bundleIdentifier": "com.example",
       "supportsTablet": true
@@ -29,7 +24,18 @@
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
-    "plugins": ["expo-router", "expo-font"],
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff"
+        }
+      ]
+    ],
     "experiments": {
       "typedRoutes": true
     }

examples/react-native-expo/app/(tabs)/_layout.tsx

@@ -1,7 +1,10 @@
+import { Platform } from 'react-native'
+
 import { Tabs } from 'expo-router'
-import React from 'react'
 
-import { TabBarIcon } from '@/components/navigation/TabBarIcon'
+import { HapticTab } from '@/components/HapticTab'
+import { IconSymbol } from '@/components/ui/IconSymbol'
+import TabBarBackground from '@/components/ui/TabBarBackground'
 import { Colors } from '@/constants/Colors'
 import { useColorScheme } from '@/hooks/useColorScheme'
 
@@ -11,38 +14,46 @@ export default function TabLayout() {
   return (
     <Tabs
       screenOptions={{
-        tabBarStyle: {
-          borderTopColor: Colors[colorScheme ?? 'light'].muted,
-          backgroundColor: Colors[colorScheme ?? 'light'].muted,
-        },
         tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
         headerShown: false,
+        tabBarButton: HapticTab,
+        tabBarBackground: TabBarBackground,
+        tabBarStyle: Platform.select({
+          ios: {
+            // Use a transparent background on iOS to show the blur effect
+            position: 'absolute',
+          },
+          default: {},
+        }),
       }}
     >
       <Tabs.Screen
         name="index"
         options={{
           title: 'Home',
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
-          ),
+          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
         }}
       />
+      {/* <Tabs.Screen
+        name="explore"
+        options={{
+          title: 'Explore',
+          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+        }}
+      /> */}
       <Tabs.Screen
         name="connector"
         options={{
           title: 'Connector',
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? 'link' : 'link-outline'} color={color} />
-          ),
+          tabBarIcon: ({ color }) => <IconSymbol size={28} name="link" color={color} />,
         }}
       />
       <Tabs.Screen
         name="data"
         options={{
           title: 'Data',
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? 'server' : 'server-outline'} color={color} />
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="list.bullet.rectangle.fill" color={color} />
           ),
         }}
       />

examples/react-native-expo/app/(tabs)/connector.tsx

@@ -1,32 +1,47 @@
+import { StyleSheet } from 'react-native'
+
+import { router } from 'expo-router'
+
 import { QuilttConnector } from '@quiltt/react-native'
 import type { ConnectorSDKCallbackMetadata } from '@quiltt/react-native'
-import { router } from 'expo-router'
+
+import { ThemedView } from '@/components/ThemedView'
 
 const CONNECTOR_ID = process.env.EXPO_PUBLIC_CONNECTOR_ID
 const HTTPS_APP_LINK = process.env.EXPO_PUBLIC_HTTPS_APP_LINK
-const INSTITUION_SEARCH_TERM = process.env.EXPO_PUBLIC_INSTITUION_SEARCH_TERM
+const INSTITUTION_SEARCH_TERM = process.env.EXPO_PUBLIC_INSTITUTION_SEARCH_TERM
 
 export default function ExplorerScreen() {
   const navigateBack = () => {
-    router.canGoBack() ? router.back() : router.push('(tabs)')
+    router.canGoBack() ? router.back() : router.push('/(tabs)')
   }
 
   return (
-    <QuilttConnector
-      connectorId={CONNECTOR_ID!}
-      oauthRedirectUrl={HTTPS_APP_LINK!}
-      institution={INSTITUION_SEARCH_TERM}
-      onExitSuccess={(metadata: ConnectorSDKCallbackMetadata) => {
-        console.log(metadata.connectionId)
-        navigateBack()
-      }}
-      onExitAbort={() => {
-        navigateBack()
-      }}
-      onExitError={(metadata: ConnectorSDKCallbackMetadata) => {
-        console.log(metadata.connectorId)
-        navigateBack()
-      }}
-    />
+    <ThemedView style={styles.container}>
+      <QuilttConnector
+        connectorId={CONNECTOR_ID!}
+        oauthRedirectUrl={HTTPS_APP_LINK!}
+        institution={INSTITUTION_SEARCH_TERM}
+        onExitSuccess={(metadata: ConnectorSDKCallbackMetadata) => {
+          console.log(metadata.connectionId)
+          navigateBack()
+        }}
+        onExitAbort={() => {
+          navigateBack()
+        }}
+        onExitError={(metadata: ConnectorSDKCallbackMetadata) => {
+          console.log(metadata.connectorId)
+          navigateBack()
+        }}
+      />
+    </ThemedView>
   )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: '100%',
+    paddingBottom: 80,
+  },
+})

examples/react-native-expo/app/(tabs)/data.tsx

@@ -1,10 +1,10 @@
+import { useEffect } from 'react'
 import { StyleSheet } from 'react-native'
 
-import { PageView } from '@/components/PageView'
+import { gql, useQuery } from '@quiltt/react-native'
+
 import { ThemedText } from '@/components/ThemedText'
 import { ThemedView } from '@/components/ThemedView'
-import { useQuery, gql } from '@quiltt/react-native'
-import { useEffect } from 'react'
 import { Colors } from '@/constants/Colors'
 
 const SAMPLE_QUERY = gql`
@@ -24,11 +24,11 @@ const SAMPLE_QUERY = gql`
   }
 `
 
-export default function HomeScreen() {
+export default function DataScreen() {
   const { data, error, loading } = useQuery<{
     profile: { id: string; name: string; email: string }
     connections: { id: string; institution: { id: string; name: string } }[]
-  }>(SAMPLE_QUERY as any) // TODO: Fix type error
+  }>(SAMPLE_QUERY)
 
   useEffect(() => {
     if (error) {
@@ -37,7 +37,7 @@ export default function HomeScreen() {
   }, [error])
 
   return (
-    <PageView title={<ThemedText type="title">Your Data</ThemedText>}>
+    <ThemedView style={styles.container}>
       {loading ? (
         <ThemedText>Loading...</ThemedText>
       ) : (
@@ -66,7 +66,7 @@ export default function HomeScreen() {
           ) : null}
         </ThemedView>
       )}
-    </PageView>
+    </ThemedView>
   )
 }
 
@@ -82,13 +82,13 @@ const styles = StyleSheet.create({
   },
   listItem: {
     gap: 2,
-    borderBottomColor: Colors.light.muted,
+    borderBottomColor: Colors.light.tint,
     borderBottomWidth: 1,
     paddingVertical: 8,
   },
   listItemLast: {
     gap: 2,
-    borderBottomColor: Colors.light.muted,
+    borderBottomColor: Colors.light.tint,
     borderBottomWidth: 0,
     paddingVertical: 8,
   },