expo / examples Goto Github PK

Example projects that demonstrate how to use Expo APIs and integrate Expo with other popular tools

JavaScript 57.70% HTML 2.14% TypeScript 26.91% Shell 2.13% Java 3.45% Objective-C 0.13% Ruby 1.37% Swift 0.04% Objective-C++ 1.16% MDX 4.33% CSS 0.64%

react-native react-native-web examples expo expo-web expo-examples react-native-example react-native-web-examples

examples's Introduction

Expo Examples

Create an Example | Suggest an Example 🚀

Easy example for using features, libraries, and other integrations with the Expo SDK!

Usage

Use this repo to create new React/React Native projects with create-expo-app or create-react-native-app.

npm create expo ./<path> --example <Example>
npx create-react-native-app --template <Example>

# Example - typescript

npm create expo ./typescript-app --example with-typescript
npx create-react-native-app -t with-typescript

Or new Expo projects using create-expo-app:

npx create-expo-app --example <Example>

# Example - typescript

npx create-expo-app -e with-typescript

Contributors ✨

If you'd like to contribute something, please check out our contributing guide!

Thanks goes to these wonderful people (emoji key):

_{Evan Bacon} 💻 📖	_{Brent Vatne} 💻	_{Cedric van Putten} 💻	_{Charlie Cruzan} 💻 📖	_{Caleb Nance} 💻 📖	_{Stanisław Chmiela} 💻	_{Tomasz Sapeta} 👀
_{Ivn Nv} 💻	_gasolin 💻	_Brooke 💻	_{Faraz Patankar} 💻	_{El Bouchaibi Yassine} 💻	_{Andrew Meyer} 💻	_{Tag Howard} 💻
_{Kim Brandwijk} 💻	_{Avi Avinav} 💻	_{Keith Kurak} 💻	_{Fernando Rojo} 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

examples's People

Contributors

Stargazers

Watchers

Forkers

christhoval06 lukawski itsomar mboldireff rajeshaps ts01543181 kaalm1 teerstudio wheatandcat riccardone dockarasu tquila robertaird sheerybeans outofcoffee ankushcb vladlazar bschwartz10 geekatlab sternj20 ryosugawara andreasmattsson homemade mitel satyadev23 sushantbs nick-bryan derdrdirk congnq toantran-ea toicodedoec calebnance shanemcgraw biotteck hongquandev thamaraiselva everrr1025 neilspurgeon sapan93 davydovpv bidah zufrizalyordan vaber-dv collinchristensen kristianspringfeed wanglonghong indiev quangvietntd c0debrain dovletamanov bitardev faikarghas nguyendung98 edwardchen h8art gabriel-guzman dmydry tshiamor-adft sanyaade-mobiledev mohaimenhasan taekyoungkim casprovy ekersauter farfou cobra0901 bowejg shadynoah jacobmcconomy asharafshahi jerukim kerusty frankwrk gokulanath cruzach brunokiafuka thalescrisostomo gdelazeri bycedric yputt yudistirasukma32 scofieldnguyen beissner wordin0 danleininger zxl634 oneboxok toma-guillet krasnoff yongmaseo funnylover1 javieralej9401 abayo-luc zhangguochun paithoa khoerling wolfyuk pawutj alexlecco matrec4 batru96

examples's Issues

Styled Components example

Universal styled components example https://www.styled-components.com/

Gifted Chat example

Example + Docs for usage with react-native-gifted-chat https://github.com/FaridSafi/react-native-gifted-chat

why https requires, can it use http for local tests

why https requires, is it mandatory, is there any way i can use http ?

i was testing socket.io on localhost, works on https, but http

        // works on https : const socket = client.connect('https://socket-io-chat.now.sh/');
        const socket = client.connect('http://localhost:8080');
        console.log('connecting...')
        console.log('...')
        console.log('...')
        socket.on('news', function (data) {
            console.log('connected');
            socket.emit('my other event', {
                my: 'data'
            });
        });
        socket.on('connect', function (socket) {
            console.log('Connected!');
        });

expo-app-auth github authentication example

docs https://docs.expo.io/versions/latest/sdk/app-auth/
github dev pages https://github.com/settings/developers

Cypress example

Example and guide for using https://www.cypress.io/ with expo web

expo-three-ar example

docs https://github.com/expo/expo-three-ar

Redirect Not working when handled from within a script handler

Hi,

This backend code for automatic redirection works well when this is the only html page used. However if I have redirected to this page from another page then the automatic redirection doesnt work. However manually clicking on the a href links back to the app still works. Have observed this on Android.

Need some urgent help with this. Any thoughts?

Facebook example not updated

Would be nice if you could publish an update to this app so I don't need to clone it :)
https://expo.io/@community/with-facebook-auth

Audio Recording example

Move from https://github.com/expo/audio-recording-example

RenderHours

Please can i render Hours in the agenda ?

expo-apple-authentication example

docs https://docs.expo.io/versions/v36.0.0/sdk/apple-authentication/

Web browser example out of date.

We cannot unregister linking event listener immediately after resolving of openBrowserAsync promise. On Android, this promise resolves immediately, leaving no one to listen for issues.

Moreover, WebBrowser does not support dismissBrowser on Android.
Please refer to discussion in this issue.

react-native-init example failed to compile

Seems that Camera from the expo-camera module is not correctly imported. This project works if I remove this dependency from the App.js

C:/Users/charl/Downloads/web-examples-master/react-native-init/node_modules/expo-camera/build/Camera.js 169:16
Module parse failed: Unexpected token (169:16)
You may need an appropriate loader to handle this file type.
|         const onBarCodeScanned = this._onObjectDetected(this.props.onBarCodeScanned);
|         const onFacesDetected = this._onObjectDetected(this.props.onFacesDetected);
>         return (<ExponentCamera {...nativeProps} ref={this._setReference} onCameraReady={this._onCameraReady} onMountError={this._onMountError} onBarCodeScanned={onBarCodeScanned} onFacesDetected={onFacesDetected} onPictureSaved={_onPictureSaved}/>);
|     }
| }

Error loading withAuthenticator with aws-amplify-react-native

Using the aws amplify auth for mobile mode works well but for the web mode shows this error: Can’t find AmplifyTheme variable

This is the code (comes from the official website)

import { withAuthenticator } from 'aws-amplify-react-native';
import Amplify from 'aws-amplify';
// Get the aws resources configuration parameters
import awsconfig from './aws-exports'; // if you are using Amplify CLI

Amplify.configure(awsconfig);

// ...

export default withAuthenticator(App);

Thanks in advance!

SQLite example

Move from https://github.com/expo/sqlite-example

react-native-shared-element-transition example

docs https://github.com/IjzerenHein/react-native-shared-element

Delete socket-io repo in favor of example

Delete this repo https://github.com/expo/socket-io-example

expo-app-auth Amplify Cognito example

Font Awesome example

migrate and delete https://github.com/expo/font-awesome-example

codesandbox examples fails

Hi folks, great to things working on a codesandbox, vurrent version seems to be failing with this error,

node_modules/react-native-gesture-handler/DrawerLayout.js: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (30:8):

28 | const SETTLING = 'Settling';
29 |

30 | export type PropType = {
| ^
31 | children: any,
32 | drawerBackgroundColor?: string,
33 | drawerPosition: 'left' | 'right',

Add @babel/plugin-proposal-export-default-from (https://git.io/vb4yH) to the 'plugins' section of your Babel config to enable transformation.

28 | const SETTLING = 'Settling';
29 |

30 | export type PropType = {
| ^
31 | children: any,
32 | drawerBackgroundColor?: string,
33 | drawerPosition: 'left' | 'right',

Add event

Hello,

Does this library allow me to add an event in the agenda, or I should write the code myself?

Thank you

react-native-gesture-handler example

https://docs.expo.io/versions/latest/sdk/gesture-handler/

Migrate and delete gl-tests repo

migrate and delete https://github.com/expo/gl-test

Why does `with-redux` have an (out of date) Yarn lockfile?

https://github.com/expo/examples/tree/master/with-redux shows package*.json updated 9 days ago, but yarn.lock updated 9 months ago.

I'm no expert, so I would love to know that I'm wrong in thinking that it should be deleted, 'cause that means I get to learn something.

[electron] Can't start the with-electron example.

Hi,

I'm trying to setup expo with electron.

I've followed this : https://docs.expo.io/versions/latest/guides/using-electron/.

But it won't start due to :

┏ Renderer -------------------

  Error: Cannot find entry file index.ts (or main.ts, or app.ts, or index.js, or main.js, or app.js)
      at computeEntryFile (/home/x/Clones/test/node_modules/electron-webpack/src/main.ts:389:11)
      at WebpackConfigurator.configure (/home/x/Clones/test/node_modules/electron-webpack/src/main.ts:222:29)
      at configure (/home/x/Clones/test/node_modules/electron-webpack/src/main.ts:376:10)

┗ ----------------------------

I've tried to start your example, without success.

Even tho I've fresh clone, yarn install and followed this README.md.

I know I could workaround it by adding a index.js but from the documentation it's suppose to find the App.js by its own.

Any idea?

ERR_UNKNOWN_URL_SCHEME

I got the above error while trying this example: https://github.com/expo/examples/tree/master/with-webbrowser-redirect
It occured when trying to redirect from the browser to the app.

I used Android emulator (Nexus 6).

Is this an error or am I missing something?

With Apple Pay example

migrate and delete https://github.com/expo/apple-pay-example
docs https://docs.expo.io/versions/latest/sdk/payments/

Correct Redirect url

Hey Brent!

I am having issues with the redirect url.
I am using google cloud functions to make a redirect url.

After success login, I am redirected to the enpoint where I am getting "Error: Not-Found".

I am curious if the is becouse of my redirect url to expo host?
I am not sure if it is the right format.

I am colling the url like that 'const RedirectURI = 'https://us-central1-coffee-cloud-mobile-app.cloudfunctions.net/facebookRedirect/facebook';'

my cloud function:

const app = require('express')();
const cors = require("cors")

app.use(cors({ origin: true }))

app.get('/redirect', (req, res) => {
  let qs = req._parsedUrl.query;
  res.redirect('exp://exp.host/@ryszardrzpa/coffeecloud/+redirect/?' + qs);
});

app.get('/facebook', (req, res) => {
  res.sendFile('facebook.html', { root: __dirname });
});

module.exports = app;

Also if the app is build as stand alone app and push to the app store, will exp://exp.host/@ryszardrzpa/coffeecloud
be valid redirect url?

Thanks,
Ryszard

Same example but with VictoryLine not working

https://github.com/expo/examples/blob/master/with-victory-native/App.js

Imports VictoryLine then ->

// Line 42: VictoryLine instead of VictoryBar
 <VictoryLine data={data} x="quarter" y="earnings" />

Canvas example

https://blog.expo.io/introducing-the-canvas-2d-context-api-for-expo-8ba6106ed8e5

expo-app-auth Identity Server 4 example

Nativebase example

Create an example of using https://nativebase.io/ with expo

expo-processing Processing example

docs https://github.com/expo/expo-processing/blob/master/README.md

jest-expo-puppeteer example

docs https://github.com/expo/expo/tree/master/packages/jest-expo-puppeteer

Migrate and delete shoutem-ui example

https://github.com/expo/shoutem-example
should support web if possible

Firebase JS SDK example

docs https://docs.expo.io/versions/latest/guides/using-firebase/
migrate/delete https://github.com/expo/firebase-example

[with-sqlite] Snack example does not work

I cannot execute the example. See screenshot.

KDE Neon (Ubuntu 18.04)
Chromium Version 76.0.3809.100

Migrate with Expo Detox tests

migrate and delete https://github.com/expo/with-detox-tests

expo-google-sign-in example

https://docs.expo.io/versions/latest/sdk/google-sign-in/

yarn gatsby build => does not build

As already mentioned in the original Gatsby/Expo support, the production build fails (slorber/gatsby-plugin-react-native-web#14)

I've tried to run yarn gatsby build on the with-gatsby example and it also fails.
Trying to understand what might be the problem currently but it looks like the final webpack configuration does not transpile correctly node_modules libs, only when in production mode.

migrate and delete https://github.com/expo/elements-example-crna