expo / snack Goto Github PK

when i try to use Import git repository in snack to edit my react native project this error is displayed :
An error occurred during import. This could be because the data provided was invalid, or because the repository referenced is not a properly formatted Expo project.

Summary

Adding react-firebase-hooks to a new Snack returns this error and making it unusable:

Failed to resolve dependency 'react-firebase-hooks@*' (Can't resolve '' in '/tmp/snackager/snackager/buildStatus/1/[email protected],android,web/package')

What platform(s) does this occur on?

Android, iOS, Web

SDK Version

40/41

Reproducible demo or steps to reproduce from a blank project

Add import "react-firebase-hooks" to a new Snack. No import necessary

https://snack.expo.io/@peterpme/20b3d4

I created an issue on the react-native git:
facebook/react-native#30716
and referenced a snack.

The people there request that I run react-native info.

Is there I way I can see the result of that command for the example that's running on the web?

Thanks.

Renaming snack not in dialog permits for invalid characters (video clip)

Hi. I love snack but this irks me. I was trying to showcase a RN warning to a react developer who doesn't use RN. He asked me for a minimal implementation.

So I've made a Snack... and found out the warning is not shown in your console.

I accept that you removed YellowBox from your fork, but please show the same warnings in your console. Snack is the only RN playground at the moment, so I think it's pretty important.
Thanks.

Dependencies with subpaths do not resolve to the "wanted" version when using *

Eg, this should resolve to the version of @expo/vector-icons that is compatible with the selected SDK version, but it doesn't.

dependencies: {
  "@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/FontAwesome.ttf": "*"
}

While using the navigation in Snack it works at the first instance and after few days when we open the project it shows the error "Cannot read property 'urlToPathAndParams' of undefined Evaluating App.js Loading App.js" in line App.js(0,1)
And if we use it on our local machines it works.

And this is not in only 1 but in all projects.

I originally created this issue on the expo repository and a Samaritan who goes by wodin said it would be better moving it to this repository.

The issue I have been experiencing is not seeing a yellow warning box on snack when I pass an incorrect Proptype.

Below is the link to the snack that demonstrates the problem:
https://snack.expo.io/@alishehzad/no-warning-for-incorrect-proptype

Here count is validated in 'Count.js' and exported to 'App.js'.

This works fine locally. Just not in a snack.

I originally created this issue on the expo repository and a Samaritan who goes by wodin said it would be better moving it to this repository.

The issue I have been experiencing is not seeing a yellow warning box on snack when I pass an incorrect Proptype.

Below is the link to the snack that demonstrates the problem:
https://snack.expo.io/@alishehzad/no-warning-for-incorrect-proptype

Here count is validated in 'Count.js' and exported to 'App.js'.

This works fine locally. Just not in a snack.

Following is the link to the original question: https://forums.expo.io/t/proptype-validation-on-snack/30580

when i try to use Import git repository in snack this error is displayed : An error occurred during import. This could be because the data provided was invalid, or because the repository referenced is not a properly formatted Expo project.

my public github link is : https://github.com/saeedjafary/SarvShop

I am seeing this error recently. there was no problem before

Summary

app.bundle.js:109 [Util] handleError:: ResizeObserver loop limit exceeded
13:01:23.435 app.bundle.js:109 [Util] handleError:: ResizeObserver loop limit exceeded
13:01:26.985 app.bundle.js:109 [Util] handleError:: ResizeObserver loop limit exceeded

Background info here: maslianok/react-resize-detector#45

What platform(s) does this occur on?

Android, iOS, Web

SDK Version

42

Reproducible demo or steps to reproduce from a blank project

To reproduce:

The error does not show up in development by default, but is detected by segment/rudderstack.
To visualizer the error:

• Add window?.addEventListener('error', function (e) { console.error(e); }); somewhere to the website code
• yarn start (in root)
• Resize the browser

Happened on this Snack, but could have been any I think:
https://snack.expo.dev/@hein_expo/shared-element-2?verbose=true

Preview pane open: MyDevice
Browser: Chrome (mac)

I have React.js project which I want to show expo app as preview via iframe on it. Everything works well in localhost but remote. When I enabled verbose getting Access to origin "https://dev.admin.woo2app.com is forbidden on browser console.. I enabled CORS bu by adding header add to .htaccess and I checked it by https://www.test-cors.org/ it looks like working. I also tried firefox extension but same.

What platform(s) does this occur on?
Web

SDK Version
40

Summary

Even creating a blank project where I just import Animated from 'react-native-reanimated'; causes an error on Android ("Uncaught Error: Animated node with ID 2 already exists").
This only happen on Android, and only on Snack, if I build the same project on my local machine, I don't seem to have any problem.

What platform(s) does this occur on?

Android

SDK Version

v41.0.0

Reproducible demo or steps to reproduce from a blank project

Here's the Snack: https://snack.expo.io/@ricvail/reanimated-error
Sometimes it seems that it works on the first try (or first couple of tries).
I tried on my Android phone (where expo was already installed, and it gave immediately the error), on my sister's android phone (freshly installed Expo, worked on the first try, I killed expo, reopened it, and it started crashing), and on my own phone again after clearing Expo's cache (again worked on first try).
On my iPad I have no such problem.

Also, most of the times the Expo app actually just crashes without giving any error. But when it does display the error, it's the one mentioned above.

Summary

I am trying to run an app on my device through snack.expo.io.

But i get the following error: File 'file:/var/mobile/Containers/Data/Application/3C96BE0D-57E3-4328-80BC-41C0174C543D/Library/Caches/ExponentExperienceData/%252540git%25252Fgithub.com%25252Fdvijeniii05%25252Fcouples/snack-bundle-2-@react-navigation~stack@%5E5.5.1-ios.js -- file:///' isn't readable.

this is repository of my app: https://github.com/dvijeniii05/couples

Any ideas anyone? Would appreciate any help.

What platform(s) does this occur on?

iOS

SDK Version

v40

Reproducible demo or steps to reproduce from a blank project

Just trying to run the app on my device

Summary

Importing react-hooks-firebase causes snackager to return error:

curl "https://snackager.expo.io/bundle/react-firebase-hooks?version_snackager=true&platforms=ios,android,web"
Can't resolve '' in '/tmp/snackager/snackager/buildStatus/1/[email protected],android,web/package'

react-firebase-hooks does have a main entry in its package.json but that refers to a non existent file. The error message returned by Snackager is very vague

What platform(s) does this occur on?

Android, iOS, Web

SDK Version

40

Reproducible demo or steps to reproduce from a blank project

curl "https://snackager.expo.io/bundle/react-firebase-hooks?version_snackager=true&platforms=ios,android,web"

If you comment a line of JSX using // or a block using /* ... */ it renders as a comment (greyed out) in the editor, but it is not treated as a comment by the framework. Moreover, if you use a keyboard shortcut (ex: Command+/ on macOS) to comment out a selection or current line, the editor will insert // which again does not make a valid comment.

See screenshot where a line 16 appears commented out but isn't actually.

Expected: Apparently comments in JSX need to be delineated with {/* ... */} and anything else should not be rendered greyed out.

Summary

Expected behaviour: Snack should recognize this pattern beforehand of updating state inside useEffect and prevent user doing that

Current behaviour: When we update state inside useEffect browser freezes

I want to work on this problem can I?

What platform(s) does this occur on?

Android

SDK Version

No response

Reproducible demo or steps to reproduce from a blank project

1. Make a state in snack react native
2. update that in useEffect hook
3. You will see website freezing in few seconds/minutes

When saving a new snack (out of habit), it disrupts your flow and changes keyboard focus.
Any chances this can bee improved from a UX perspective?

when i try to use Import git repository in snack to edit my react native project this error is displayed : An error occurred during import. This could be because the data provided was invalid, or because the repository referenced is not a properly formatted Expo project.

my github link is : https://github.com/saeedjafary/SarvShop

I am seeing this error recently. there was no problem before

Summary

When installing a package that uses module namespacing (export * as {moduleName} from './{moduleName}), Expo's default configuration throws an error when compiling for web and iOS. This is an important tool for structuring TypeScript code, so I'd expect it to work out of the box.

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

bare

What platform(s) does this occur on?

iOS, Web

SDK Version (managed workflow only)

4.5.2

Environment

MacOS, Node v14.15.5.

Reproducible demo or steps to reproduce from a blank project

https://snack.expo.io/kSlfJiSnR

Steps to reproduce:

• npm install @dfinity/agent
• Somewhere in the code - import { HttpAgent } from "@dfinity/agent";

🐛 Bug Report

Summary of Issue

App Just Turn off with a flashy screen after loading the splashscreen

Environment

Expected Behavior vs Actual Behavior

It Just Turn off With a Flashy Screen

Will need a native eval(source, sourceURL) API like global.nativeInjectHMRUpdate(...) in React Native compiled with the DEBUG macro truthy in C++.

Summary

From today I can not resolve several of my libraries that I used to create expo snacks. One example is when I want to use this library https://github.com/react-native-picker/picker, the expo website writes me: "Failed to resolve dependency '@react-native-picker/[email protected]' (Network request failed) RETRY".

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

iOS, Web

SDK Version (managed workflow only)

42

Environment

Unable to resolve module '@react-native-picker/picker.js'
Evaluating @react-native-picker/picker.js
Evaluating Select.js
Evaluating App.js
Loading App.js
Error: Unable to resolve module '@react-native-picker/picker.js'
at Object.eval (@react-native-picker/picker.js:1:1

at eval (@react-native-picker/picker.js

at eval (@react-native-picker/picker.js

at eval (<anonymous>)
at [snack internals]
at Object.a ([snack internals]
at e.evaluate ([snack internals]
at Ze ([snack internals]
at [snack internals]
at https://snack-web-player.s3.us-west-1.amazonaws.com/v2/42/static/js/app.056cc19a.chunk.js:1:14427

Reproducible demo or steps to reproduce from a blank project

The link of the snack: https://snack.expo.dev/@tozare/14d474

Are there any plans to support real-time collaboration with expo snack on the web? Possibilities are endless with real-time collaboration support.

cc @SRandazzo

Summary

It looks like the save button is higher in the Z-hierarchy than the update available notification. (chrome on MacOS big sur)

What platform(s) does this occur on?

Web

SDK Version

40

Reproducible demo or steps to reproduce from a blank project

When an update is available, resize your window so the notification should fall over the save button.

First and foremost, my apologies if this is not the appropriate place for such suggestion. It doesn't feel right but I cannot find where to.

To the topic. How about having a way to explore/browser/categorize snacks? Alla Codepen ¹ ².
I'm pretty sure many of us we'll have it useful to being able to search for updated and verified examples, etc.

Hi guys,

I just wanted to point out the message while you wait for your loading Android or iOS App in the expo snack.

It says this:

Device preview is at capacity
Queue position: 23
Don't want to wait?
Use a free Appetize.io account

But when I create an Appetize account it says that I have to pay.

So either it's not free anymore or I got something wrong?

This kind of stuff :)

Do you understand that any Expo CLI issues opened in the core Expo repository will be closed?

Yes

Thanks for open sourcing.

🐛 Bug Report

https://github.com/expo/snack/blob/main/packages/snack-sdk/README.md

API Reference link is dead.

Seriously, why isn't it called Snackspo? Or Snaxpo? It keeps me up at night because I'm so full of anger. Think about it.

Snaxpo.io. It rhymes, it's short, cute. But no. Snack.expo.io somehow sounded better.

I'm sad now.

In an Expo snack, I found this behaviour of not throwing an error when a style property name is misspelled inside the StyleSheet.create() object.

For example:

const styles = StyleSheet.create({
    backgroundClor: 'tomato',
})

As per the expected behaviour in React Native and Expo apps, an error is thrown in this scenario. I am not sure if this behaviour is known or not (in terms of Expo Snack).

Here is an example in the snack: https://snack.expo.io/@amanhimself/cad717.

Summary

Running the Snack example from https://docs.expo.io/versions/latest/sdk/clipboard/ does not work on web. This is because the Clipboard API requests permissions to use the clipboard from inside the iFrame.

What platform(s) does this occur on?

Web

SDK Version

40

Reproducible demo or steps to reproduce from a blank project

https://snack.expo.io/@hein_expo/clipboard

Summary

AsyncStorage.setItem is not a function

What platform(s) does this occur on?

Android, iOS, Web

SDK Version

41

Reproducible demo or steps to reproduce from a blank project

import * as AsyncStorage from '@react-native-async-storage/async-storage';
AsyncStorage.setItem('hi', 'hello');

https://snack.expo.io/@peterpme/humiliated-cake

Summary

Calling Asset.fromModule on Snack web throws the following exception:

resolveAssetSource.web.ts:18 Uncaught (in promise) ReferenceError: nativeExtensions is not defined
    at u (resolveAssetSource.web.ts:18)
    at resolveAssetSource.web.ts:28
    at p (resolveAssetSource.web.ts:84)
    at Function.value (Asset.ts:90)
    at _callee$ ((index):13)
    at l ((index):3)
    at Generator.eval [as _invoke] ((index):3)
    at Generator.eval [as next] ((index):3)
    at l ((index):3)
    at n ((index):3)

This causes all examples using Asset.fromModule to fail on Snack web. E.g. the ImageManipulator example and prevents creation of expo-print examples for Snack web.

What platform(s) does this occur on?

Web

SDK Version

42

Reproducible demo or steps to reproduce from a blank project

Example repo (taken from the https://docs.expo.dev/versions/latest/sdk/imagemanipulator/ example)
https://snack.expo.dev/@hein_expo/basic-imagemanipulator-usage

Steps to reproduce

• Open above Snack
• Open web preview in a separate popup
• Open the Inspector

Summary

package.json (9:5)
Invalid dependency 'react-native-gifted-chat' (version 'https://github.com/myckhel/react-native-gifted-chat.git#react-native-gifted-chat-v0.16.7-gitpkg' is not a valid semver)
Retry

What platform(s) does this occur on?

Android, iOS, Web

SDK Version

41

Reproducible demo or steps to reproduce from a blank project

Add:
"react-native-gifted-chat": "https://github.com/myckhel/react-native-gifted-chat.git#react-native-gifted-chat-v0.16.7-gitpkg",
to package.json

As per request via @brentvatne from the react-native website team, updating to docsaurus 2

heya! some folks are working on rewriting the react native website on top of docusaurus 2 and part of that involves supporting light/dark mode. they're wanting a way to sync the theme on snack embeds with the site theme. i looked into this a bit and it seems like right now we only offer a way to set the theme once when initialized, via data-snack-theme.
i looked into using postMessage, eg: document.querySelector('iframe').contentWindow.postMessage(['expoDataEvent', { iframeId: '5kaybrx1d4', theme: 'dark' }], '*') - but it doesn't update the theme (maybe i'm doing this wrong? i extracted the iframe id from the target iframe src).
any suggestions on how they should proceed with this task of keeping snack embed theme in sync with the docusaurus theme?

Summary

Under the Contributing header, you have a single "insta" word on a line

Link to the related docs page

https://www.npmjs.com/package/snack-sdk/v/3.3.3

Is that short for "Installation"? Is there a missing section? 🕵️

When importing a repository from github, I have two issues that have been troubling:

DevDependencies are not imported

When the package.json file is imported, it's clearing everything except for the dependencies entry. This causes problems when importing a project that uses dev dependencies. My particular case is usually for a project that includes tests and requires react-test-renderer as a devDependency. When imported the project complains that this dependency is missing. I don't want this to be installed as a regular dependency.

Importing nested files causes dependency error

When importing from somewhere other than the root of a package, snack complains that the dependency is missing and prompts to install a dependency that includes the nested folder structure. If you do this, snack works, but the project fails locally because that package does not exist in npm (405 error).

For example:
Add react-native-vector-icons/MaterialIcons to package.json?
Add @react-native-community/async-storage/jest/async-storage-mock to package.json?

I think it's common for people to want to open an example from, for example, the react-navigation or Expo docs, then make a few changes, hit save, and share that link.

If you go to https://reactnavigation.org/docs/header-buttons#customizing-the-back-button and press "Try the "header interaction" example on Snack" then hit save, when you copy the URL you will see something like this:

https://snack.expo.io/@notbrent/header-interaction?platform=android&name=header%20interaction&dependencies=%40react-native-community%2Fmasked-view%40%5E0.1.7%2C%40react-navigation%2Fbottom-tabs%40%5E5.7.0%2C%40react-navigation%2Fdrawer%40%5E5.8.5%2C%40react-navigation%2Fmaterial-bottom-tabs%40%5E5.2.13%2C%40react-navigation%2Fmaterial-top-tabs%40%5E5.2.13%2C%40react-navigation%2Fnative%40%5E5.7.0%2C%40react-navigation%2Fstack%40%5E5.7.0%2Creact-native-paper%40%5E3.10.1%2Creact-native-reanimated%40%5E1.7.0%2Creact-native-safe-area-context%40%5E3.0.2%2Creact-native-screens%40%5E2.9.0%2Creact-native-tab-view%40%5E2.14.0&sourceUrl=https%3A%2F%2Freactnavigation.org%2Fexamples%2F5.x%2Fheader-interaction.js

We can probably remove all of those query params on save.

Summary

In follow up to expo/expo#11980

Wasn't used anyway

Summary

Submodules are not resolved by the Snack bundler. For example '@jsamr/counter-style/presets/thai' will raise the following error:

while it will work with metro or Webpack bundlers.

What platform(s) does this occur on?

Android, iOS, Web

SDK Version

Production (SDK 41)

Reproducible demo or steps to reproduce from a blank project

https://snack.expo.io/@jsamr/submodules-expo-bug

Also note that dependencies that in turn depend on the same submodules don't raise the above error.

It would be nice to be able to open exp:// links in simulator/emulator when Expo Dev Tools are installed to open experiences (from experience pages or Snack) effortlessly from your browser.

Summary

Snack is not able to load/save the dependencies

What platform(s) does this occur on?

Web

SDK Version

37,38,39,40

Reproducible demo or steps to reproduce from a blank project

Snack editor is not loading /saving the any dependencies.

Summary

Expo Snack features that use deep linking like AuthSessions cause Snack to throw the following error when previewing on Android and iOS:

Can't make a deep link into a standalone app with no custom scheme defined

This issue also occurs when opening the example on a device through the Expo Go app's project section, but not when running the same code in a newly created expo app on a computer.

What platform(s) does this occur on?

Android, iOS

SDK Version

40

Reproducible demo or steps to reproduce from a blank project

https://snack.expo.io/@dylmye/reddit-auth-code - the result of clicking on the snack button from here

https://snack.expo.io/@dylmye/authsession-case-issue - one I made myself with a app.json with a schema defined

https://snack.expo.io/S1dlGkiMG

Running on iOS Appetize. Expected behavior works with 3 items fetched from the API, change line 16 to false to see what happens with a larger response body. @brentvatne pointed out that if you skip parsing the JSON and just print the length of the response body, it succeeds, so it seems like it's hanging on await resp.json().

Summary

app.bundle.js:109  INFO  Saving... Object
12:48:04.041 app.bundle.js:109  COMM  Requesting preview...
12:48:04.041 app.bundle.js:109  ERROR  TypeError: Cannot read property 'postMessage' of undefined
    at app.bundle.js:18
    at Set.forEach (<anonymous>)
    at b.getPreviewAsync (app.bundle.js:18)
    at b.saveAsync (app.bundle.js:18)
    at async yt._saveAsync (app.bundle.js:109)
12:48:04.051 app.bundle.js:18 Uncaught (in promise) TypeError: Cannot read property 'postMessage' of undefined
    at app.bundle.js:18
    at Set.forEach (<anonymous>)
    at b.getPreviewAsync (app.bundle.js:18)
    at b.saveAsync (app.bundle.js:18)
    at async yt._saveAsync (app.bundle.js:109)
12:48:40.949 app.bundle.js:109  INFO  Saving... Object
12:48:40.955 app.bundle.js:109  COMM  Requesting preview...
12:48:40.955 app.bundle.js:109  ERROR  TypeError: Cannot read property 'postMessage' of undefined
    at app.bundle.js:18
    at Set.forEach (<anonymous>)
    at b.getPreviewAsync (app.bundle.js:18)
    at b.saveAsync (app.bundle.js:18)
    at async yt._saveAsync (app.bundle.js:109)
12:48:40.965 app.bundle.js:18 Uncaught (in promise) TypeError: Cannot read property 'postMessage' of undefined
    at app.bundle.js:18
    at Set.forEach (<anonymous>)
    at b.getPreviewAsync (app.bundle.js:18)
    at b.saveAsync (app.bundle.js:18)
    at async yt._saveAsync (app.bundle.js:109)
12:49:00.434 app.bundle.js:109  INFO  Saving... Object
12:49:00.440 app.bundle.js:109  COMM  Requesting preview...
12:49:00.440 app.bundle.js:109  ERROR  TypeError: Cannot read property 'postMessage' of undefined
    at app.bundle.js:18
    at Set.forEach (<anonymous>)
    at b.getPreviewAsync (app.bundle.js:18)
    at b.saveAsync (app.bundle.js:18)
    at async yt._saveAsync (app.bundle.js:109)

What platform(s) does this occur on?

iOS

SDK Version

42

Reproducible demo or steps to reproduce from a blank project

Happed on this Snack:
https://snack.expo.dev/@hein_expo/shared-element-2?verbose=true

After the Expo Go client (iOS) disconnected, Save resumed working

Reported by @cruzach

running this snack on my device, the scheduled notifications don’t come through, but if I run the same code through expo-cli (same version of expo-notifications installed) they come through fine
https://snack.expo.io/@charliecruzan/push-notifications

oh you know what, I think this has to do with how we’re scoping the notifications

but this was definitely working before :thinking_face: