Adding new modules to expo snack

Expo Development Tools
1

Is there any process to add new modules? I was hoping to play around with tcomb-form-native but it isn’t available in expo snack.

2

We’re working on a way to do this for any module! Hopefully it will be done soon but I’m not sure how long it will take.

3

when it will finish?

4

Arbitrary npm packages have been supported in Snack for a couple of months now. This means that you can require packages like lodash or redux, for example.

Many packages are supported but there are some limitations:

  • Packages either need to work in any JavaScript environment or need to support React Native specifically. Packages that are written only for Node.js or the browser will not work. Just as how you can’t access the browser’s DOM in Node.js and can’t access Node’s http module in browsers, React Native isn’t Node.js and it isn’t the browser.
  • Some packages that rely on a specific directory hierarchy in node_modules may not work, since Snack bundles modules differently than npm and Yarn do.
  • Packages that rely on native code won’t work because Snack (and standard Expo projects) are JS-only.

In general, Snack is a great way to show examples, learn, and quickly write some code. If you need a more comprehensive development environment with more control over node_modules, you can export your Snack to an Expo project and develop on your computer.

5

Most of the npm packages require to link that package to native code by running

react-native link some_package
or by doing it manually in .gradle and .m files.
Is it possible to use these packages and link them in such manner that are not yet supported by Expo ?

6

For packages that need to be linked, you’ll need to create an Expo project on your computer, detach and use ExpoKit, and then install and link the package. However, there are many generic packages on npm such as React, Lodash, Redux, etc that don’t have native code and work in any JS environment including React Native’s, and you can use these with Snack.

7

Hello @ide! Thank you guys for the amazing work on snack.

I’m working on a react-native UI components library for Elasticsearch. All the dependencies (some internal) are react-native compatible, yet I’m unable to import the package (@appbaseio/reactivebase-native) in snack. For reference: Snack snippet.

Any idea why this is happening? :sweat_smile:

Thanks

8

Got it working. The issue was with fetch polyfill (fetch-everywhere) that one of our package was using! Switched it to fetch-ponyfill.

9

Hi, Snacks are awesome, very promising. However, it looks like decorators aren’t supported. For instance, I get an “unexpected token” when parsing “@observable” in this MobX example:

class TestStore {
@observable loading = true;

@action loadingCompleted() {
this.loading = false;
}

@action toggleLoading() {
this.loading = this.loading ? false : true;
}
}

Am I doing something wrong? It would be great if decorators (e.g. @observable) were supported with MobX. Is there any chance there’s an easy fix for this? Thanks!

Christian