From 848380f794aa8f46de8035905d5eeb87c27e79f3 Mon Sep 17 00:00:00 2001 From: Scott Phillips Date: Mon, 17 Jun 2024 10:57:23 -0400 Subject: [PATCH 1/3] sample: `expo go` open URL --- .gitignore | 1 + .../Windows/UUS/State/_active.uusver | 1 + .../connect/connect-react-native/.gitignore | 20 + .../connect/connect-react-native/README.md | 50 + .../connect/connect-react-native/app.json | 36 + .../app/(tabs)/SECRET._ts | 4 + .../app/(tabs)/_layout.tsx | 37 + .../app/(tabs)/explore.tsx | 102 + .../connect-react-native/app/(tabs)/index.tsx | 77 + .../connect-react-native/app/+html.tsx | 39 + .../connect-react-native/app/+not-found.tsx | 32 + .../connect-react-native/app/_layout.tsx | 37 + .../assets/fonts/SpaceMono-Regular.ttf | Bin 0 -> 93252 bytes .../assets/images/adaptive-icon.png | Bin 0 -> 17547 bytes .../assets/images/favicon.png | Bin 0 -> 1466 bytes .../assets/images/icon.png | Bin 0 -> 22380 bytes .../assets/images/partial-react-logo.png | Bin 0 -> 5075 bytes .../assets/images/react-logo.png | Bin 0 -> 6341 bytes .../assets/images/react-logo@2x.png | Bin 0 -> 14225 bytes .../assets/images/react-logo@3x.png | Bin 0 -> 21252 bytes .../assets/images/splash.png | Bin 0 -> 47346 bytes .../connect-react-native/babel.config.js | 6 + .../components/Collapsible.tsx | 41 + .../components/ExternalLink.tsx | 24 + .../components/HelloWave.tsx | 37 + .../components/ParallaxScrollView.tsx | 76 + .../components/ThemedText.tsx | 60 + .../components/ThemedView.tsx | 14 + .../components/__tests__/ThemedText-test.tsx | 10 + .../__snapshots__/ThemedText-test.tsx.snap | 24 + .../components/navigation/TabBarIcon.tsx | 9 + .../connect-react-native/constants/Colors.ts | 26 + .../hooks/useColorScheme.ts | 1 + .../hooks/useColorScheme.web.ts | 8 + .../hooks/useThemeColor.ts | 22 + .../connect-react-native/package-lock.json | 18028 ++++++++++++++++ .../connect/connect-react-native/package.json | 50 + .../scripts/reset-project.js | 73 + .../connect-react-native/tsconfig.json | 17 + 39 files changed, 18962 insertions(+) create mode 100644 examples/connect/connect-react-native/%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver create mode 100644 examples/connect/connect-react-native/.gitignore create mode 100644 examples/connect/connect-react-native/README.md create mode 100644 examples/connect/connect-react-native/app.json create mode 100644 examples/connect/connect-react-native/app/(tabs)/SECRET._ts create mode 100644 examples/connect/connect-react-native/app/(tabs)/_layout.tsx create mode 100644 examples/connect/connect-react-native/app/(tabs)/explore.tsx create mode 100644 examples/connect/connect-react-native/app/(tabs)/index.tsx create mode 100644 examples/connect/connect-react-native/app/+html.tsx create mode 100644 examples/connect/connect-react-native/app/+not-found.tsx create mode 100644 examples/connect/connect-react-native/app/_layout.tsx create mode 100644 examples/connect/connect-react-native/assets/fonts/SpaceMono-Regular.ttf create mode 100644 examples/connect/connect-react-native/assets/images/adaptive-icon.png create mode 100644 examples/connect/connect-react-native/assets/images/favicon.png create mode 100644 examples/connect/connect-react-native/assets/images/icon.png create mode 100644 examples/connect/connect-react-native/assets/images/partial-react-logo.png create mode 100644 examples/connect/connect-react-native/assets/images/react-logo.png create mode 100644 examples/connect/connect-react-native/assets/images/react-logo@2x.png create mode 100644 examples/connect/connect-react-native/assets/images/react-logo@3x.png create mode 100644 examples/connect/connect-react-native/assets/images/splash.png create mode 100644 examples/connect/connect-react-native/babel.config.js create mode 100644 examples/connect/connect-react-native/components/Collapsible.tsx create mode 100644 examples/connect/connect-react-native/components/ExternalLink.tsx create mode 100644 examples/connect/connect-react-native/components/HelloWave.tsx create mode 100644 examples/connect/connect-react-native/components/ParallaxScrollView.tsx create mode 100644 examples/connect/connect-react-native/components/ThemedText.tsx create mode 100644 examples/connect/connect-react-native/components/ThemedView.tsx create mode 100644 examples/connect/connect-react-native/components/__tests__/ThemedText-test.tsx create mode 100644 examples/connect/connect-react-native/components/__tests__/__snapshots__/ThemedText-test.tsx.snap create mode 100644 examples/connect/connect-react-native/components/navigation/TabBarIcon.tsx create mode 100644 examples/connect/connect-react-native/constants/Colors.ts create mode 100644 examples/connect/connect-react-native/hooks/useColorScheme.ts create mode 100644 examples/connect/connect-react-native/hooks/useColorScheme.web.ts create mode 100644 examples/connect/connect-react-native/hooks/useThemeColor.ts create mode 100644 examples/connect/connect-react-native/package-lock.json create mode 100644 examples/connect/connect-react-native/package.json create mode 100644 examples/connect/connect-react-native/scripts/reset-project.js create mode 100644 examples/connect/connect-react-native/tsconfig.json diff --git a/.gitignore b/.gitignore index 43c1b2af7..0805051fa 100644 --- a/.gitignore +++ b/.gitignore @@ -411,3 +411,4 @@ samples/grpc-web/coverage/ web/dist/ connect/typescript/lib connect/typescript/dist +examples/connect/connect-react-native/app/(tabs)/SECRET.ts diff --git a/examples/connect/connect-react-native/%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver b/examples/connect/connect-react-native/%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver new file mode 100644 index 000000000..12c61b0dc --- /dev/null +++ b/examples/connect/connect-react-native/%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver @@ -0,0 +1 @@ +1305.2405.14022.0 \ No newline at end of file diff --git a/examples/connect/connect-react-native/.gitignore b/examples/connect/connect-react-native/.gitignore new file mode 100644 index 000000000..6623142a2 --- /dev/null +++ b/examples/connect/connect-react-native/.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 \ No newline at end of file diff --git a/examples/connect/connect-react-native/README.md b/examples/connect/connect-react-native/README.md new file mode 100644 index 000000000..cd4feb8a3 --- /dev/null +++ b/examples/connect/connect-react-native/README.md @@ -0,0 +1,50 @@ +# Welcome to your Expo app 👋 + +This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app). + +## 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 + +You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction). + +## Get a fresh project + +When you're ready, run: + +```bash +npm run reset-project +``` + +This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing. + +## Learn more + +To learn more about developing your project with Expo, look at the following resources: + +- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides). +- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web. + +## Join the community + +Join our community of developers creating universal apps. + +- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute. +- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions. diff --git a/examples/connect/connect-react-native/app.json b/examples/connect/connect-react-native/app.json new file mode 100644 index 000000000..3a9780a5e --- /dev/null +++ b/examples/connect/connect-react-native/app.json @@ -0,0 +1,36 @@ +{ + "expo": { + "name": "connect-react-native", + "slug": "connect-react-native", + "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 + } + } +} diff --git a/examples/connect/connect-react-native/app/(tabs)/SECRET._ts b/examples/connect/connect-react-native/app/(tabs)/SECRET._ts new file mode 100644 index 000000000..f836b4bf8 --- /dev/null +++ b/examples/connect/connect-react-native/app/(tabs)/SECRET._ts @@ -0,0 +1,4 @@ +// Your connect RP auth token should come from your backend, not be hard coded in your application! +// This is just here for simplicity. +// Rename this file to `SECRET.ts` +const CONNECT_RP_AUTH_TOKEN_DO_NOT_COMMIT = "CiVo..."; diff --git a/examples/connect/connect-react-native/app/(tabs)/_layout.tsx b/examples/connect/connect-react-native/app/(tabs)/_layout.tsx new file mode 100644 index 000000000..22a49b62c --- /dev/null +++ b/examples/connect/connect-react-native/app/(tabs)/_layout.tsx @@ -0,0 +1,37 @@ +import { Tabs } from 'expo-router'; +import React from 'react'; + +import { TabBarIcon } from '@/components/navigation/TabBarIcon'; +import { Colors } from '@/constants/Colors'; +import { useColorScheme } from '@/hooks/useColorScheme'; + +export default function TabLayout() { + const colorScheme = useColorScheme(); + + return ( + + ( + + ), + }} + /> + ( + + ), + }} + /> + + ); +} diff --git a/examples/connect/connect-react-native/app/(tabs)/explore.tsx b/examples/connect/connect-react-native/app/(tabs)/explore.tsx new file mode 100644 index 000000000..e480218ad --- /dev/null +++ b/examples/connect/connect-react-native/app/(tabs)/explore.tsx @@ -0,0 +1,102 @@ +import Ionicons from '@expo/vector-icons/Ionicons'; +import { StyleSheet, Image, Platform } from 'react-native'; + +import { Collapsible } from '@/components/Collapsible'; +import { ExternalLink } from '@/components/ExternalLink'; +import ParallaxScrollView from '@/components/ParallaxScrollView'; +import { ThemedText } from '@/components/ThemedText'; +import { ThemedView } from '@/components/ThemedView'; + +export default function TabTwoScreen() { + return ( + }> + + Explore + + This app includes example code to help you get started. + + + This app has two screens:{' '} + app/(tabs)/index.tsx and{' '} + app/(tabs)/explore.tsx + + + The layout file in app/(tabs)/_layout.tsx{' '} + sets up the tab navigator. + + + Learn more + + + + + You can open this project on Android, iOS, and the web. To open the web version, press{' '} + w in the terminal running this project. + + + + + For static images, you can use the @2x and{' '} + @3x suffixes to provide files for + different screen densities + + + + Learn more + + + + + Open app/_layout.tsx to see how to load{' '} + + custom fonts such as this one. + + + + Learn more + + + + + This template has light and dark mode support. The{' '} + useColorScheme() hook lets you inspect + what the user's current color scheme is, and so you can adjust UI colors accordingly. + + + Learn more + + + + + This template includes an example of an animated component. The{' '} + components/HelloWave.tsx component uses + the powerful react-native-reanimated library + to create a waving hand animation. + + {Platform.select({ + ios: ( + + The components/ParallaxScrollView.tsx{' '} + component provides a parallax effect for the header image. + + ), + })} + + + ); +} + +const styles = StyleSheet.create({ + headerImage: { + color: '#808080', + bottom: -90, + left: -35, + position: 'absolute', + }, + titleContainer: { + flexDirection: 'row', + gap: 8, + }, +}); diff --git a/examples/connect/connect-react-native/app/(tabs)/index.tsx b/examples/connect/connect-react-native/app/(tabs)/index.tsx new file mode 100644 index 000000000..f0e951125 --- /dev/null +++ b/examples/connect/connect-react-native/app/(tabs)/index.tsx @@ -0,0 +1,77 @@ +import {Image, StyleSheet, Platform, Button, Linking} from 'react-native'; + +import { HelloWave } from '@/components/HelloWave'; +import ParallaxScrollView from '@/components/ParallaxScrollView'; +import { ThemedText } from '@/components/ThemedText'; +import { ThemedView } from '@/components/ThemedView'; +import {CONNECT_RP_AUTH_TOKEN_DO_NOT_COMMIT} from "@/app/(tabs)/SECRET"; +// import {AuthConfiguration, authorize} from "react-native-app-auth"; + + +// TODO - Do we want hard-coded dev? +// var redirectUri = "https://mewmba.ngrok.dev/connect/mobilecomplete"; +const redirectUriScheme = "dev.ngrok.mewmba"; +const redirectUri = `${redirectUriScheme}://mobilecomplete`; +const url = + `https://mewmba.ngrok.dev/connect/launch-test?idvProviderSelection=trinsicfake&authToken=${encodeURIComponent(CONNECT_RP_AUTH_TOKEN_DO_NOT_COMMIT)}&redirect_uri=${encodeURIComponent(redirectUri)}`; + +// const config: AuthConfiguration = { +// clientId: 'N/A', // Not used +// clientSecret: 'N/A', // Not used +// redirectUrl: redirectUri, +// serviceConfiguration: { +// authorizationEndpoint: url, +// tokenEndpoint: 'N/A', +// }, +// scopes: [] // Not used +// } + +async function openTrinsicConnect(): Promise { + console.log('Opening Trinsic Connect'); + try { + // const authState = await authorize(config); + const authState = await Linking.openURL(url); + console.log('Auth State:', authState); + } catch (e) { + console.error(e); + } + +} + +export default function HomeScreen() { + return ( + + }> + + Open Trinsic Connect + + +