repository·master·Indexed 25 days ago
https://github.com/expo/examplesA collection of Expo examples demonstrating how to use various features, libraries, and third-party integrations within the Expo ecosystem. Includes templates and guides for implementations such as Apollo GraphQL, Auth0, AWS Amplify, Better Auth, Clerk, Convex, App Integrity, and the StickerSmash app.
The with-router-menus example demonstrates how to use native context menus to manipulate state and data in your UI. It utilizes the following technologies:
className styling support.AuthSession API, which is a wrapper around the WebBrowser API. WebBrowser opens a SFSafariViewController (iOS) or Chrome Custom Tab (Android) in a modal window. This approach is more secure than a WebView because it prevents code injection and allows sharing cookies with the system browser, enabling seamless re-authentication.This example demonstrates how to integrate TinyBase with Expo. It features a todo application where users can add items, mark them as done, and delete all items using a TinyBase store.
Data persistence is handled via:
Firebase does not support SAML (or any popup/redirect) login directly in React Native or webview components.
The Pattern: This example uses a web server and a dummy page to provide the HTTPS protocol required by Firebase. The user authenticates in that web page, and the resulting auth token is passed back to the Expo app. The app then uses that token to log the user in.
Deployment Requirement:
Because the authentication request must originate from a webpage, you must host the files in the backend directory on a public webserver (e.g., Firebase Hosting). For local development, use the serve script.
Camera, Gestures, and Permissions) on the web. To extend this functionality to other React Native packages, refer to the Next adapter documentation.The PDF functionality in this example relies on react-native-pdf. Because this library uses native code, it is not available in Expo Go. You must use a custom Expo Dev Client to run this project.
To build your custom client, you can use EAS Build.
This example demonstrates how to verify that requests come from a genuine, untampered app on a real device using Expo App Integrity.
app/index.tsx.app/api/challenge+api.ts: Issues one-time challenges.app/api/verify+api.ts: Verifies attestations, assertions, and tokens.node-app-attest.@googleapis/playintegrity.This example demonstrates how to pass information from a website back to an app using the WebBrowser module. This is a standard pattern for authentication flows.
WebBrowser (powered by SFSafariViewController/SFAuthenticationSession on iOS and Chrome Custom Tabs on Android) is more secure than a WebView because developers cannot inject code. Apple requires SFSafariAuthenticationSession (via WebBrowser.openAuthSessionAsync) for authentication.WebBrowser.openAuthSessionAsync or WebBrowser.openBrowserAsync.The Satori example uses the following file structure to generate and display images:
app/api/icon/[icon]+api.ts: An Expo API Route that uses Satori to generate images from React components on the server.app/index.tsx: A client-side screen that fetches and displays the images generated by the API Route.yarn or npm, start the bundler, and open the project in a React Native runtime (Expo Go) on iOS or Android.When you modify your GraphQL server code (e.g., adding a new resolver in src/app/api/graphql+api.ts), you must refetch the schema to keep your local definitions in sync.
Note: The local development server must be running via npx expo start when executing this command so the introspection query can reach the endpoint.
npm run sync:schemaTo run the Magic Example locally, follow these steps:
yarn or npm install.App.js and replace the MAGIC_KEY placeholder with your actual publishable key.yarn start or npm run start.