10 |
11 | ## 🚀 How to use
12 |
13 | > `npx create-react-native-app my-app -t with-reanimated`
14 |
15 | - Run `yarn` or `npm install`
16 | - Run `yarn start` or `npm run start` to try it out.
17 |
18 | ## 📝 Notes
19 |
20 | - [`react-native-reanimated` docs](https://docs.swmansion.com/react-native-reanimated/)
21 |
--------------------------------------------------------------------------------
/with-storybook/stories/Gradient.stories.js:
--------------------------------------------------------------------------------
1 | import { Gradient } from "./Gradient";
2 |
3 | // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
4 | export default {
5 | title: "Example/Gradient",
6 | component: Gradient,
7 | parameters: {
8 | // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
9 | layout: "centered",
10 | },
11 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
12 | tags: ["autodocs"],
13 | };
14 |
15 | // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
16 | export const Primary = {
17 | args: {},
18 | };
19 |
--------------------------------------------------------------------------------
/with-router-menus/src/components/icons.tsx:
--------------------------------------------------------------------------------
1 | import UpstreamIonicons from "@expo/vector-icons/Ionicons";
2 | import UpstreamMaterialIcons from "@expo/vector-icons/MaterialCommunityIcons";
3 | import React from "react";
4 | import { useColorScheme } from "react-native";
5 |
6 | export function MaterialIcons(
7 | props: React.ComponentProps
8 | ) {
9 | const theme = useColorScheme();
10 | return (
11 |
15 | );
16 | }
17 |
18 | export function Ionicons(props: React.ComponentProps) {
19 | const theme = useColorScheme();
20 | return (
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/with-dev-client/android/app/src/release/java/com/helloworld/ReactNativeFlipper.java:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | *
This source code is licensed under the MIT license found in the LICENSE file in the root
5 | * directory of this source tree.
6 | */
7 | package com.helloworld;
8 |
9 | import android.content.Context;
10 | import com.facebook.react.ReactInstanceManager;
11 |
12 | /**
13 | * Class responsible of loading Flipper inside your React Native application. This is the release
14 | * flavor of it so it's empty as we don't want to load Flipper.
15 | */
16 | public class ReactNativeFlipper {
17 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
18 | // Do nothing as we don't want to initialize Flipper on Release.
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/with-magic/README.md:
--------------------------------------------------------------------------------
1 | # Magic Example
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | ## 🚀 How to use
11 |
12 | - Install with `yarn` or `npm install`.
13 | - Create your own app on [Magic.link](https://magic.link).
14 | - Open `App.js` and replace `MAGIC_KEY` with your publishable key.
15 | - Run `yarn start` or `npm run start` to try it out.
16 |
17 | ## 📝 Notes
18 |
19 | - [Magic React Native docs](https://docs.magic.link/client-sdk/react-native)
20 |
--------------------------------------------------------------------------------
/with-socket-io/backend/index.js:
--------------------------------------------------------------------------------
1 | const app = require('express')();
2 | const http = require('http').Server(app);
3 | const io = require('socket.io')(http);
4 |
5 | // Add messages when sockets open and close connections
6 | io.on('connection', socket => {
7 | console.log(`[${socket.id}] socket connected`);
8 | socket.on('disconnect', reason => {
9 | console.log(`[${socket.id}] socket disconnected - ${reason}`);
10 | });
11 | });
12 |
13 | // Broadcast the current server time as global message, every 1s
14 | setInterval(() => {
15 | io.sockets.emit('time-msg', { time: new Date().toISOString() });
16 | }, 1000);
17 |
18 | // Show the index.html by default
19 | app.get('/', (req, res) => res.sendFile('index.html'));
20 |
21 | // Start the express server
22 | http.listen(3000, function(){
23 | console.log('listening on *:3000');
24 | });
25 |
--------------------------------------------------------------------------------
/with-tfjs-camera/App.js:
--------------------------------------------------------------------------------
1 | import { Camera } from "expo-camera";
2 | import React from "react";
3 | import { Button } from 'react-native';
4 |
5 | import { LoadingView } from "./src/LoadingView";
6 | import { ModelView } from "./src/ModelView";
7 | import { useTensorFlowLoaded } from "./src/useTensorFlow";
8 |
9 | export default function App() {
10 | const isLoaded = useTensorFlowLoaded();
11 | const [permission, requestPermission] = Camera.useCameraPermissions();
12 |
13 | if (!permission?.granted) {
14 | return (
15 |
16 |
17 |
18 | );
19 | }
20 |
21 | if (!isLoaded) {
22 | return ;
23 | }
24 |
25 | return ;
26 | }
27 |
--------------------------------------------------------------------------------
/with-icons/App.js:
--------------------------------------------------------------------------------
1 | import FontAwesome from "@expo/vector-icons/FontAwesome";
2 | import MaterialIcons from "@expo/vector-icons/MaterialIcons";
3 | import { StyleSheet, View } from "react-native";
4 |
5 | export default function App() {
6 | return (
7 |
8 |
9 |
10 | {/* Create a button */}
11 | {}}
15 | >
16 | Login with Facebook
17 |
18 |
19 | );
20 | }
21 |
22 | const styles = StyleSheet.create({
23 | container: {
24 | flex: 1,
25 | backgroundColor: "#fff",
26 | alignItems: "center",
27 | justifyContent: "center",
28 | },
29 | });
30 |
--------------------------------------------------------------------------------
/with-tfjs-camera/src/PredictionList.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { StyleSheet, Text, View } from "react-native";
3 |
4 | export function PredictionList({ predictions = [] }) {
5 | return (
6 |
7 | {predictions.map((p, i) => (
8 |
9 | {p.className}
10 |
11 | ))}
12 |
13 | );
14 | }
15 |
16 | const margin = 24;
17 |
18 | const styles = StyleSheet.create({
19 | container: {
20 | zIndex: 100,
21 | position: "absolute",
22 | bottom: margin,
23 | left: margin,
24 | right: margin,
25 | backgroundColor: "rgba(255,255,255,0.8)",
26 | padding: 8,
27 | borderRadius: 20,
28 | alignItems: "center",
29 | },
30 | text: {
31 | paddingVertical: 2,
32 | fontSize: 20,
33 | },
34 | });
35 |
--------------------------------------------------------------------------------
/with-tv/metro.config.js:
--------------------------------------------------------------------------------
1 | // Learn more https://docs.expo.io/guides/customizing-metro
2 | const { getDefaultConfig } = require('expo/metro-config');
3 |
4 | const config = getDefaultConfig(__dirname);
5 |
6 | // When enabled, the optional code below will allow Metro to resolve
7 | // and bundle source files with TV-specific extensions
8 | // (e.g., *.ios.tv.tsx, *.android.tv.tsx, *.tv.tsx)
9 | //
10 | // Metro will still resolve source files with standard extensions
11 | // as usual if TV-specific files are not found for a module.
12 | //
13 | /*
14 | if (process.env?.EXPO_TV === '1') {
15 | const originalSourceExts = config.resolver.sourceExts;
16 | const tvSourceExts = [
17 | ...originalSourceExts.map((e) => `tv.${e}`),
18 | ...originalSourceExts,
19 | ];
20 | config.resolver.sourceExts = tvSourceExts;
21 | }
22 | */
23 |
24 | module.exports = config;
25 |
--------------------------------------------------------------------------------
/with-formdata-image-upload/backend/README.md:
--------------------------------------------------------------------------------
1 | ## Run this locally
2 |
3 | 1. Rename `.env.example` to `.env`
4 |
5 | 2. Fill in your AWS credentials in `.env`
6 |
7 | 3. `npm run start`
8 |
9 | 4. Update the `apiUrl` in `frontend` to point to the server.
10 |
11 | ## Deploy this with [now.sh](https://zeit.co/now/):
12 |
13 | 1. Add your AWS credentials to now
14 |
15 | ```
16 | now secret add aws-access-key-id your-access-key-id-here
17 | now secret add aws-secret-access-key your-secret-access-key
18 | now secret add aws-bucket your-bucket-name-here
19 | ```
20 |
21 | 2. Deploy
22 |
23 | ```
24 | now . \
25 | -e AWS_ACCESS_KEY_ID=@aws-access-key-id \
26 | -e AWS_SECRET_ACCESS_KEY=@aws-secret-access-key \
27 | -e AWS_BUCKET=@aws-bucket \
28 | -e NODE_ENV=production
29 | ```
30 |
31 | 3. Update the `apiUrl` in `frontend` to point to your deploy.
32 |
--------------------------------------------------------------------------------
/with-router-menus/src/components/root-layout.tsx:
--------------------------------------------------------------------------------
1 | import { Header } from "@/components/header";
2 | import { Slot } from "expo-router";
3 | // This is a general react-dom library and only requires the framework support server rendering.
4 | // Adding it will ensure the body tag has the class="dark" injected when dark mode is enabled,
5 | // this is required for tailwind css/shadcn to style correctly in dark mode.
6 | import { ThemeProvider } from "next-themes";
7 |
8 | export default function RootLayout() {
9 | return (
10 | <>
11 |
17 |
18 |
19 |
20 |
21 |
22 | >
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/with-preact/webpack.config.js:
--------------------------------------------------------------------------------
1 | const createExpoWebpackConfigAsync = require('@expo/webpack-config');
2 | const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
3 |
4 | module.exports = async function(env, argv) {
5 | const config = await createExpoWebpackConfigAsync(env, argv);
6 |
7 | // see: https://expo.fyi/webpack-report-property-is-deprecated
8 | if (env.mode === 'production') {
9 | config.plugins.push(
10 | new BundleAnalyzerPlugin({
11 | path: 'web-report',
12 | }),
13 | );
14 | }
15 |
16 | config.resolve.alias = {
17 | ...config.resolve.alias,
18 | // Use Preact aliases
19 | react$: 'preact/compat',
20 | 'react-dom$': 'preact/compat',
21 | // Fix the responder system which react-native-web depends on
22 | 'react-dom/unstable-native-dependencies$': 'preact-responder-event-plugin',
23 | };
24 | return config;
25 | };
26 |
--------------------------------------------------------------------------------
/with-formdata-image-upload/README.md:
--------------------------------------------------------------------------------
1 | # Image Upload Example
2 |
3 | ### Running the app
4 |
5 | - Run `yarn` or `npm install`
6 | - Run `yarn start` or `npm run start` to try it out.
7 |
8 | ### Running the server
9 |
10 | - By default, the app will use a server that is already deployed in order to upload the image to S3. If you want to deploy your own, follow the steps in the [backend directory](https://github.com/expo/examples/tree/master/with-formdata-image-upload/backend).
11 |
12 | ## The idea behind the example
13 |
14 | A common requirement for apps is to be able to upload an image to a server. This example shows how you can use `ImagePicker` to snap a photo or grab it from your camera roll, then use `FormData` with `fetch` to upload it to a server. The `/backend` demonstrates a simple Node app that uploads an image to S3. The `/` directory contains the Expo app that sends the image to that backend.
15 |
--------------------------------------------------------------------------------
/with-router-tailwind/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "with-router-tailwind",
3 | "version": "1.0.0",
4 | "main": "expo-router/entry",
5 | "scripts": {
6 | "start": "expo start"
7 | },
8 | "dependencies": {
9 | "expo": "^50.0.1",
10 | "expo-constants": "~15.4.2",
11 | "expo-linking": "~6.2.1",
12 | "expo-router": "~3.4.1",
13 | "expo-splash-screen": "~0.26.1",
14 | "expo-status-bar": "~1.11.1",
15 | "nativewind": "^4.0.1",
16 | "react": "18.2.0",
17 | "react-dom": "18.2.0",
18 | "react-native": "0.73.2",
19 | "react-native-reanimated": "~3.6.0",
20 | "react-native-safe-area-context": "4.8.2",
21 | "react-native-screens": "~3.29.0",
22 | "react-native-web": "~0.19.6",
23 | "tailwindcss": "^3.4.0"
24 | },
25 | "devDependencies": {
26 | "@babel/core": "^7.20.0",
27 | "@types/react": "~18.2.45",
28 | "typescript": "^5.3.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/with-styled-components/README.md:
--------------------------------------------------------------------------------
1 | # Styled Components Example
2 |
3 |
11 |
12 | ## 🚀 How to use
13 |
14 | - Install with `yarn` or `npm install`.
15 | - Run `yarn start` or `npm run start` to try it out **on a device** (this will not work on the iOS simulator).
16 |
17 | ## 📝 Notes
18 |
19 | - [Expo GL docs](https://docs.expo.dev/versions/latest/sdk/gl-view/)
20 | - [Three.js docs](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene)
21 |
--------------------------------------------------------------------------------
/with-gatsby/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'gatsby';
2 | import React from 'react';
3 | import { StyleSheet, Text, View } from 'react-native';
4 | import { useREM } from 'react-native-web-hooks';
5 |
6 | import Layout from '../components/Layout';
7 | import SEO from '../components/SEO';
8 |
9 | const IndexPage = () => {
10 | return (
11 |
12 |
13 | Hi people
14 | Welcome to your new Gatsby site.
15 | Now go build something great.
16 |
17 | Go to page 2
18 |
19 | )
20 | }
21 |
22 | const styles = StyleSheet.create({
23 | header: {
24 | fontWeight: 'bold',
25 | marginBottom: 24,
26 | },
27 | paragraph: {
28 | marginBottom: 24,
29 | fontSize: 16
30 | }
31 | })
32 |
33 | export default IndexPage
34 |
--------------------------------------------------------------------------------
/with-nativewind/README.md:
--------------------------------------------------------------------------------
1 | # NativeWind Example
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | ## 🚀 How to use
13 |
14 |
15 |
16 | - Install with `yarn` or `npm install`.
17 | - Run `yarn start` or `npm run start` to try it out.
18 |
19 | ## 📝 Notes
20 |
21 |
22 |
23 | - This example is using the [`nativewind`](https://www.nativewind.dev/) library which lets you use Tailwind CSS in react-native.
24 |
--------------------------------------------------------------------------------
/with-sqlite/README.md:
--------------------------------------------------------------------------------
1 | # SQLite Example
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Example demonstrating use of the `SQLite` API in Expo.
11 |
12 | The app allows adding todo items, marking them as done, and deleting done items.
13 | `SQLite` features used include creating and opening databases, creating tables,
14 | inserting items, querying and displaying results, using prepared statements.
15 |
16 | 
17 |
18 | ## 🚀 How to use
19 |
20 | - Run `yarn` or `npm install`
21 | - Run `yarn start` or `npm run start` to try it out.
22 |
23 | ## 📝 Notes
24 |
25 | - [Expo SQLite docs](https://docs.expo.dev/versions/latest/sdk/sqlite/)
26 |
--------------------------------------------------------------------------------
/with-apollo/README.md:
--------------------------------------------------------------------------------
1 | # Apollo GraphQL Example
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | ## 🚀 How to use
13 |
14 | - Install with `yarn` or `npm install`.
15 | - Run `yarn start` or `npm run start` to try it out.
16 |
17 | ## 📝 Notes
18 |
19 | - The Apollo configuration lies in the `apollo.js` file.
20 | - The file also contains an option (with commented code) to pass an authorization token to the API.
21 | - [Apollo Client Docs](https://www.apollographql.com/docs/react/v3.0-beta/)
22 |
--------------------------------------------------------------------------------
/with-google-vision/README.md:
--------------------------------------------------------------------------------
1 | # Google Vision Example
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | > 🚨 This Demo requires a Google API Key with billing enabled: [Get one here](https://support.google.com/cloud/answer/6158862?hl=en).
10 |
11 | The Google Cloud Vision API enables developers to understand the content of an image by encapsulating powerful machine learning models in an easy to use REST API.
12 |
13 | This demo shows you how to take pictures and upload them to the cloud, from there Google analyzes them and returns text based info about the image.
14 |
--------------------------------------------------------------------------------
/with-firebase-storage-upload/README.md:
--------------------------------------------------------------------------------
1 | # Firebase Storage Upload Example
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | This example demonstrates how you can upload images (and other files) to Firebase Storage. Read App.js for more info, in particular the `uploadImageAsync` function.
11 |
12 | ## 🚀 How to use
13 |
14 | - Run `yarn` or `npm install`
15 | - Run `yarn start` or `npm run start` to try it out.
16 | - Take a new picture or upload one from your library
17 | - See the image being rendered from Firebase
18 |
19 | ## 📝 Notes
20 |
21 | - [Firebase Storage API](https://firebase.google.com/docs/storage/web/upload-files)
22 | - [Expo Firebase guide](https://docs.expo.dev/versions/latest/guides/using-firebase/)
23 |
--------------------------------------------------------------------------------
/with-dev-client/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .expo/
3 | npm-debug.*
4 | *.jks
5 | *.p8
6 | *.p12
7 | *.key
8 | *.mobileprovision
9 | *.orig.*
10 | web-build/
11 |
12 | # macOS
13 | .DS_Store
14 |
15 | # @generated expo-cli sync-e7dcf75f4e856f7b6f3239b3f3a7dd614ee755a8
16 | # The following patterns were generated by expo-cli
17 |
18 | # OSX
19 | #
20 | .DS_Store
21 |
22 | # Xcode
23 | #
24 | build/
25 | *.pbxuser
26 | !default.pbxuser
27 | *.mode1v3
28 | !default.mode1v3
29 | *.mode2v3
30 | !default.mode2v3
31 | *.perspectivev3
32 | !default.perspectivev3
33 | xcuserdata
34 | *.xccheckout
35 | *.moved-aside
36 | DerivedData
37 | *.hmap
38 | *.ipa
39 | *.xcuserstate
40 | project.xcworkspace
41 |
42 | # Android/IntelliJ
43 | #
44 | build/
45 | .idea
46 | .gradle
47 | local.properties
48 | *.iml
49 | *.hprof
50 |
51 | # node.js
52 | #
53 | node_modules/
54 | npm-debug.log
55 | yarn-error.log
56 |
57 | # BUCK
58 | buck-out/
59 | \.buckd/
60 | *.keystore
61 | !debug.keystore
62 |
63 | # Bundle artifacts
64 | *.jsbundle
65 |
66 | # CocoaPods
67 | /ios/Pods/
68 |
69 | # Expo
70 | .expo/
71 | web-build/
72 | dist/
73 |
74 | # @end expo-cli
--------------------------------------------------------------------------------
/with-reanimated/App.js:
--------------------------------------------------------------------------------
1 | import Animated, {
2 | useSharedValue,
3 | withTiming,
4 | useAnimatedStyle,
5 | Easing,
6 | } from "react-native-reanimated";
7 | import { View, Button } from "react-native";
8 |
9 | export default function AnimatedStyleUpdateExample(props) {
10 | const randomWidth = useSharedValue(10);
11 |
12 | const config = {
13 | duration: 500,
14 | easing: Easing.bezier(0.5, 0.01, 0, 1),
15 | };
16 |
17 | const style = useAnimatedStyle(() => {
18 | return {
19 | width: withTiming(randomWidth.value, config),
20 | };
21 | });
22 |
23 | return (
24 |
32 |
38 | {
41 | randomWidth.value = Math.random() * 350;
42 | }}
43 | />
44 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/new-example-idea.yml:
--------------------------------------------------------------------------------
1 | name: "Expo Example Request"
2 | about: "Suggest an idea for a new Expo example"
3 | issue_body: true
4 | inputs:
5 | - type: description
6 | attributes:
7 | value: "Examples should reflect a single feature or library integration. If the example is too complex i.e. chat app, uber clone, than it's probably better suited for a personal boilerplate or template."
8 | - type: description
9 | attributes:
10 | value: Thanks for taking the time to open a request! Please fill out this form as completely as possible.
11 | - type: description
12 | attributes:
13 | value: If you leave out sections there is a high likelihood your issue will be closed.
14 | - type: textarea
15 | attributes:
16 | label: Summary
17 | required: true
18 | description: Describe the example in 1 or 2 sentences
19 | placeholder: Clearly describe what the example demonstrates and possibly how it differs from existing examples.
20 | - type: textarea
21 | attributes:
22 | label: Any existing examples?
23 | required: false
24 | placeholder: Does an example like this already exist?
25 |
--------------------------------------------------------------------------------
/with-drawer-navigation/README.md:
--------------------------------------------------------------------------------
1 | # Drawer navigation example
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | ## 🚀 How to use
13 |
14 | - Install with `yarn` or `npm install`.
15 | - Run `yarn start` or `npm run start` to try it out.
16 |
17 | ## 📝 Notes
18 |
19 | - This is a very basic example from the [react navigation](https://reactnavigation.org/) docs.
20 | - [Drawer navigation documentation](https://reactnavigation.org/docs/drawer-based-navigation).
21 | - [Reanimated Babel plugin may be required](https://github.com/software-mansion/react-native-reanimated/issues/3410)
22 |
--------------------------------------------------------------------------------
/with-formik/README.md:
--------------------------------------------------------------------------------
1 | # with-formik
2 |
3 |
11 |
12 | ## 🚀 How to use
13 |
14 | - Install with `yarn` or `npm install`.
15 | - Run `yarn start` or `npm run start` to try it out.
16 |
17 | ## 📝 Notes
18 |
19 | - This example using the [`tailwind-rn`](https://github.com/vadimdemedes/tailwind-rn) library to allow you to use [Tailwind CSS](https://tailwindcss.com/) in React Native.
20 | - You can even customize it to use your own styles or colors. Read more about that [here](https://github.com/vadimdemedes/tailwind-rn#customization).
21 | - [Tailwind CSS Documentation](https://tailwindcss.com/docs/utility-first).
22 |
--------------------------------------------------------------------------------
/with-svg/README.md:
--------------------------------------------------------------------------------
1 | # SVG Example
2 |
3 | Import SVG files directly as React components.
4 |
5 | ## How to use
6 |
7 | ### Running the app
8 |
9 | - Run `yarn` or `npm install`
10 | - Run `yarn start` or `npm run start` to try it out.
11 |
12 | ### Setup
13 |
14 | The component `Image` from `react-native` doesn't support loading SVG images like the `img` component from `react-dom` does. Because of this, the next easiest way to use SVGs is to automatically transform them into agnostic React components via the bundler.
15 |
16 | This example demonstrates how to configure both Metro and Webpack to support automatically transforming SVGs.
17 |
18 | - In `metro.config.js` we swap the svg extension from being an asset to being a source code file. Then we add a custom transformer.
19 | - In `webpack.config.js` we append a new loader rule which transforms the svg files.
20 | - Notice that our `babel.config.js` remains unchanged, using `babel-preset-expo` to transpile files.
21 |
22 | ## 📝 Notes
23 |
24 | - [react-native-svg](https://github.com/react-native-svg/react-native-svg)
25 | - [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack)
26 | - [react-native-svg-transformer](https://github.com/kristerkari/react-native-svg-transformer) (metro only)
27 |
--------------------------------------------------------------------------------
/with-formdata-image-upload/backend/index.js:
--------------------------------------------------------------------------------
1 | // Use local .env file for env vars when not deployed
2 | if (process.env.NODE_ENV !== 'production') {
3 | require('dotenv').config();
4 | }
5 |
6 | const aws = require('aws-sdk')
7 | const multer = require('multer')
8 | const multerS3 = require('multer-s3')
9 |
10 | const s3 = new aws.S3({
11 | accessKeyId: process.env.AWS_ACCESS_KEY_ID,
12 | secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
13 | region: "us-east-1",
14 | });
15 |
16 | // Initialize multers3 with our s3 config and other options
17 | const upload = multer({
18 | storage: multerS3({
19 | s3,
20 | bucket: process.env.AWS_BUCKET,
21 | acl: 'public-read',
22 | metadata(req, file, cb) {
23 | cb(null, {fieldName: file.fieldname});
24 | },
25 | key(req, file, cb) {
26 | cb(null, Date.now().toString() + '.png');
27 | }
28 | })
29 | })
30 |
31 | // Expose the /upload endpoint
32 | const app = require('express')();
33 | const http = require('http').Server(app);
34 |
35 | app.post('/upload', upload.single('photo'), (req, res, next) => {
36 | res.json(req.file)
37 | })
38 |
39 | let port = process.env.PORT || 3000;
40 | http.listen(port, () => {
41 | console.log(`Listening on port ${port}`);
42 | });
43 |
--------------------------------------------------------------------------------
/with-processing/App.js:
--------------------------------------------------------------------------------
1 | import { ProcessingView } from "expo-processing";
2 |
3 | const sketch = (p) => {
4 | p.setup = () => {
5 | p.strokeWeight(7);
6 | };
7 |
8 | const harom = (ax, ay, bx, by, level, ratio) => {
9 | if (level <= 0) {
10 | return;
11 | }
12 |
13 | const vx = bx - ax;
14 | const vy = by - ay;
15 | const nx = p.cos(p.PI / 3) * vx - p.sin(p.PI / 3) * vy;
16 | const ny = p.sin(p.PI / 3) * vx + p.cos(p.PI / 3) * vy;
17 | const cx = ax + nx;
18 | const cy = ay + ny;
19 | p.line(ax, ay, bx, by);
20 | p.line(ax, ay, cx, cy);
21 | p.line(cx, cy, bx, by);
22 |
23 | harom(
24 | ax * ratio + cx * (1 - ratio),
25 | ay * ratio + cy * (1 - ratio),
26 | ax * (1 - ratio) + bx * ratio,
27 | ay * (1 - ratio) + by * ratio,
28 | level - 1,
29 | ratio
30 | );
31 | };
32 |
33 | p.draw = () => {
34 | p.background(240);
35 | harom(
36 | p.width - 142,
37 | p.height - 142,
38 | 142,
39 | p.height - 142,
40 | 12,
41 | (p.sin((0.0005 * Date.now()) % (2 * p.PI)) + 1) / 2
42 | );
43 | };
44 | };
45 |
46 | export default function App() {
47 | return ;
48 | }
49 |
--------------------------------------------------------------------------------
/with-webbrowser-redirect/README.md:
--------------------------------------------------------------------------------
1 | # WebBrowser Redirect Example
2 |
3 | ### Running the app
4 |
5 | - Run `yarn` or `npm install`
6 | - Open `app` with `yarn start` or `npm run start` to try it out.
7 |
8 | ## The idea behind the example
9 |
10 | It's common to use the `WebBrowser` module, powered by `SFSafariViewController` and `SFAuthenticationSession` on iOS and Chrome Custom Tabs on Android to pass information back from a website to an app. A typical use case for this is authentication, because if you use a web browser authentication session it will share cookies with Safari and Chrome respectively, so any site that you are already logged into on your web browser will also be authenticated in the browser. Additionally, it is more secure than a `WebView` because the developer cannot inject code. Apple will also reject your app if you use a `WebView` for authentication - you need to use `SFSafariAuthenticationSession` (`WebBrowser.openAuthSessionAsync`). In order to get data back from the `WebBrowser`, the website needs to explicitly redirect back to your app and provide the data in the url. This demonstrates how to do that, and how to extract the data from the url in your app with both `WebBrowser.openAuthSessionAsync` and `WebBrowser.openBrowserAsync`.
11 |
--------------------------------------------------------------------------------
/with-dev-client/App.js:
--------------------------------------------------------------------------------
1 | import { StatusBar } from "expo-status-bar";
2 | import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
3 | import * as DevMenu from "expo-dev-menu";
4 |
5 | const Button = ({ label, onPress }) => (
6 |
7 | {label}
8 |
9 | );
10 |
11 | export default function App() {
12 | return (
13 |
14 | Open up App.js to start working on your app!
15 | {
18 | DevMenu.openMenu();
19 | }}
20 | />
21 |
22 |
23 | );
24 | }
25 |
26 | const styles = StyleSheet.create({
27 | container: {
28 | flex: 1,
29 | backgroundColor: "#fff",
30 | alignItems: "center",
31 | justifyContent: "center",
32 | },
33 | buttonContainer: {
34 | backgroundColor: "#4630eb",
35 | borderRadius: 4,
36 | padding: 12,
37 | marginVertical: 10,
38 | justifyContent: "center",
39 | alignItems: "center",
40 | },
41 | buttonText: {
42 | color: "#ffffff",
43 | fontSize: 16,
44 | },
45 | });
46 |
--------------------------------------------------------------------------------
/with-html/README.md:
--------------------------------------------------------------------------------
1 | # HTML Elements Example
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | ## 🚀 How to use
13 |
14 |
15 |
16 | - Install with `yarn` or `npm install`.
17 | - Run `yarn start` or `npm run start` to try it out.
18 |
19 | ## 📝 Notes
20 |
21 |
22 |
23 | This example combines the [`@expo/html-elements` Babel plugin](https://github.com/expo/expo/blob/d314efccb28d005d5df83df74883eb0365020ae2/packages/html-elements/babel.js#L3-L41) and [`nativewind`](https://www.nativewind.dev/) which enables CSS-like styling.
24 |
25 | You can write pure HTML elements which are converted to native views at build time.
26 |
--------------------------------------------------------------------------------
/with-custom-font/App.js:
--------------------------------------------------------------------------------
1 | import * as Font from "expo-font";
2 | import * as SplashScreen from "expo-splash-screen";
3 | import { Text, View } from "react-native";
4 | import { useCallback } from "react";
5 |
6 | // Keep the splash screen visible while we fetch resources
7 | SplashScreen.preventAutoHideAsync();
8 |
9 | export default function App() {
10 | const [fontsLoaded, fontError] = Font.useFonts({
11 | "Inter-Black": require("./assets/fonts/Inter-Black.otf"),
12 | "Inter-SemiBoldItalic":
13 | "https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12",
14 | });
15 |
16 | const onLayoutRootView = useCallback(async () => {
17 | if (fontsLoaded || fontError) {
18 | await SplashScreen.hideAsync();
19 | }
20 | }, [fontsLoaded, fontError]);
21 |
22 | if (!fontsLoaded && !fontError) {
23 | return null;
24 | }
25 |
26 | return (
27 |
31 | Platform Default
32 | Inter Black
33 |
34 | Inter SemiBoldItalic
35 |
36 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/with-react-native-elements/README.md:
--------------------------------------------------------------------------------
1 | # `react-native-elements` Example
2 |
3 |
17 |
18 | Example demonstrating use of the [`react-native-elements`][rne] library in Expo.
19 |
20 | ## 🚀 How to use
21 |
22 | - Run `yarn` or `npm install`
23 | - Run `yarn start` or `npm run start` to try it out.
24 |
25 | ## 📝 Notes
26 |
27 | - [React Native Elements docs][rne]
28 |
29 | [rne]: https://reactnativeelements.com/
30 |
--------------------------------------------------------------------------------
/with-postpublish-hooks/README.md:
--------------------------------------------------------------------------------
1 | # Post Publish Hooks Example
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | It's common to need to perform a set of tasks once you publish an update to your project. For example, you may want to notify people on Twitter or Slack, upload sourcemaps and cut a release on Sentry, etc. This example demonstrates how you can write your own simple hooks with `./hooks/echo.js`, and install and use hooks distributed through npm, such as `expo-prepublish-slack-notify`.
11 |
12 | ## 🚀 How to use
13 |
14 | #### Configure it
15 |
16 | - Create an incoming webhook for your Slack server and replace `https://hooks.slack.com/put-your-stuff-here` in `app.config.js` with your webhook url -- or remove the `expo-postpublish-slack-notify` hook entirely from `app.config.js`.
17 |
18 | #### Running the app
19 |
20 | - Run `yarn` or `npm install`
21 | - Run `yarn start` or `npm run start` to try it out.
22 |
--------------------------------------------------------------------------------
/with-webrtc/App.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import {
3 | Button,
4 | SafeAreaView,
5 | StatusBar,
6 | StyleSheet,
7 | View,
8 | } from "react-native";
9 | import { mediaDevices, RTCView } from "react-native-webrtc";
10 |
11 | function App() {
12 | const [stream, setStream] = useState(null);
13 |
14 | const start = async () => {
15 | console.log("start");
16 | if (!stream) {
17 | let s;
18 | try {
19 | s = await mediaDevices.getUserMedia({ video: true });
20 | setStream(s);
21 | } catch (e) {
22 | console.error(e);
23 | }
24 | }
25 | };
26 |
27 | const stop = () => {
28 | console.log("stop");
29 | if (stream) {
30 | stream.release();
31 | setStream(null);
32 | }
33 | };
34 |
35 | return (
36 |
37 |
38 |
39 | {stream && }
40 |
41 |
42 |
43 |
44 |
45 |
46 | );
47 | }
48 |
49 | export default App;
50 |
--------------------------------------------------------------------------------
/with-webrtc/README.md:
--------------------------------------------------------------------------------
1 | # WebRTC Example
2 |
3 | 
4 | 
5 |
6 | Use `react-native-webrtc` in a custom [Expo Dev Client](https://docs.expo.dev/clients/introduction/) (not available in Expo Go).
7 |
8 | ## 🚀 How to use
9 |
10 | ```sh
11 | npx create-react-native-app -t with-webrtc
12 | ```
13 |
14 | ## ☁️ Build in the cloud
15 |
16 | - [Building with EAS](https://docs.expo.dev/eas/)
17 |
18 | ## 🏃 How to build and run locally
19 |
20 | - [Setup development Environment](https://reactnative.dev/docs/environment-setup)
21 | - 🍎 Build/Run on iOS `yarn ios`.
22 | - WebRTC doesn't work in the iOS Simulator since there is no camera. Run `expo run:ios -d` to select a connected iOS device.
23 | - 🤖 Build/Run on Android `yarn android`.
24 |
25 | ## 📝 Notes
26 |
27 | - [React Native WebRTC](https://github.com/react-native-webrtc/)
28 | - [Expo Config Plugin: WebRTC](https://github.com/expo/config-plugins/tree/master/packages/react-native-webrtc)
29 | - [Expo Development Client docs](https://docs.expo.dev/clients/introduction/)
30 | - [Building with EAS](https://docs.expo.dev/eas/)
31 |
--------------------------------------------------------------------------------
/with-storybook/stories/Button.stories.js:
--------------------------------------------------------------------------------
1 | import { Button } from './Button';
2 |
3 | // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
4 | export default {
5 | title: 'Example/Button',
6 | component: Button,
7 | parameters: {
8 | // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
9 | layout: 'centered',
10 | },
11 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
12 | tags: ['autodocs'],
13 | // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
14 | argTypes: {
15 | backgroundColor: { control: 'color' },
16 | },
17 | };
18 |
19 | // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
20 | export const Primary = {
21 | args: {
22 | primary: true,
23 | label: 'Button',
24 | },
25 | };
26 |
27 | export const Secondary = {
28 | args: {
29 | label: 'Button',
30 | },
31 | };
32 |
33 | export const Large = {
34 | args: {
35 | size: 'large',
36 | label: 'Button',
37 | },
38 | };
39 |
40 | export const Small = {
41 | args: {
42 | size: 'small',
43 | label: 'Button',
44 | },
45 | };
46 |
--------------------------------------------------------------------------------
/with-tfjs-camera/README.md:
--------------------------------------------------------------------------------
1 | # TensorFlow Camera example
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Identify objects in real time using `@tensorflow/tfjs`, `expo-camera`, and `expo-gl` (for native acceleration).
11 |
12 | ## 🚀 How to use
13 |
14 | > `npx create-react-native-app my-app -t with-tfjs-camera`
15 |
16 | - Run `yarn start` or `npm run start`, open on a native device (simulator, emulator, and browser are not supported).
17 | - You can swap out `@tensorflow-models/mobilenet` for another [TensorFlow model](https://github.com/tensorflow/models/blob/master/research/slim/nets/mobilenet_v1.md) to achieve different results.
18 |
19 | ## 📝 Notes
20 |
21 | - [TFJS Expo API reference](https://js.tensorflow.org/api_react_native/latest/#Media-Camera)
22 | - [`@tensorflow/tfjs-react-native` package](https://www.npmjs.com/package/@tensorflow/tfjs-react-native)
23 | - [Expo Camera docs](https://docs.expo.dev/versions/latest/sdk/camera/)
24 |
--------------------------------------------------------------------------------
/with-html/App.js:
--------------------------------------------------------------------------------
1 | import { Image } from "react-native";
2 |
3 | export default function App() {
4 | return (
5 |
6 |
7 |
15 |
16 |
17 | With @expo/html-elements, you can write HTML syntax
18 | that renders to real native components. Combined with Tailwind CSS,
19 | you have an experience that makes web developers feel at home.”
20 |