### Example App Setup and Run
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md
Instructions to build, install dependencies, and start the example application for the Snack SDK.
```bash
yarn build
cd ./example
yarn
yarn start
```
--------------------------------
### Build and Run Example App
Source: https://github.com/expo/snack/blob/main/packages/snack-sdk/README.md
Commands to build the project, navigate to the example directory, and start the example application.
```sh
yarn build
cd ./example
yarn start
```
--------------------------------
### Install Dependencies and Start Runtime
Source: https://github.com/expo/snack/blob/main/runtime/README.md
Install project dependencies and start the runtime in development mode. This is the initial setup for both native and web player development.
```bash
cd runtime
yarn install
expo start
```
--------------------------------
### Run Snack SDK Example
Source: https://github.com/expo/snack/blob/main/packages/snack-sdk/example/README.md
Execute this command in the packages/snack-sdk/example directory to start the development server.
```bash
yarn dev
```
--------------------------------
### Start Snack Runtime Webplayer
Source: https://github.com/expo/snack/blob/main/docs/expo-sdk-upgrade.md
Command to start the runtime web-player locally for testing.
```bash
expo start:web
```
--------------------------------
### Start Native Runtime Development
Source: https://github.com/expo/snack/blob/main/runtime/README.md
Start the runtime for native development. This involves starting the Expo app and then using a QR code scanner on a device to load the runtime into Expo Go.
```bash
expo start
```
--------------------------------
### Install snack-runtime
Source: https://github.com/expo/snack/blob/main/packages/snack-runtime/README.md
Install the snack-runtime package using yarn.
```bash
yarn add snack-runtime
```
--------------------------------
### Start Expo Documentation Dev Server
Source: https://github.com/expo/snack/blob/main/docs/expo-sdk-upgrade.md
Instructions to start the Expo documentation dev server for testing Snack integration.
```bash
Start the Expo [documentation dev-server](https://github.com/expo/expo/tree/master/docs#running-locally)
```
--------------------------------
### Install snack-eslint-standalone
Source: https://github.com/expo/snack/blob/main/packages/snack-eslint-standalone/README.md
Install the package using yarn.
```bash
$ yarn add snack-eslint-standalone
```
--------------------------------
### Install Snack SDK
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md
Install the Snack SDK using Yarn.
```sh
yarn add snack-sdk
```
--------------------------------
### Start Snackager (package bundler)
Source: https://github.com/expo/snack/blob/main/website/README.md
Starts the 'snackager' server locally. The snack-proxies will automatically route traffic to this server when possible.
```sh
# expo/snack
cd snackager
yarn
yarn start
```
--------------------------------
### Start Web Player Development
Source: https://github.com/expo/snack/blob/main/runtime/README.md
Start the runtime specifically as a web-player for browser-based development. This command or option allows for testing the web version of the runtime.
```bash
expo start --web
```
--------------------------------
### Example Commit Messages
Source: https://github.com/expo/snack/blob/main/CONTRIBUTING.md
Examples of correctly formatted commit messages for different project components.
```git
[docs] Fix typo in xxx
[runtime] Add support for SDK 40
[sdk] Add test-case for custom transports
[snackager] Improve logging for git imports
[website] Update loading icon
```
--------------------------------
### Start Expo API Server (www)
Source: https://github.com/expo/snack/blob/main/website/README.md
Starts the 'www' server locally. Ensure you are in the correct directory within the Expo Universe repository.
```sh
# expo/universe
cd server/www
yarn
yarn start
```
--------------------------------
### Start Expo Website
Source: https://github.com/expo/snack/blob/main/website/README.md
Starts the Expo website locally. This is required for testing authenticated flows on snack.expo.test.
```sh
# expo/universe
cd server/website
yarn
yarn start
```
--------------------------------
### Start Snack web-player locally
Source: https://github.com/expo/snack/blob/main/website/README.md
Starts the web-player locally. This allows you to develop and test the web player without relying on the S3 and CDN version.
```sh
# expo/snack
cd runtime
expo start:web
```
--------------------------------
### Start Website with Custom API Server URL
Source: https://github.com/expo/snack/blob/main/website/README.md
Override the default API server URL when starting the website. This is useful for development and testing against different API environments.
```sh
API_SERVER_URL=https://api.expo.test yarn start
```
```sh
API_SERVER_URL=https://proxy-production-api.expo.test yarn start
```
--------------------------------
### Example Bundle Request
Source: https://github.com/expo/snack/blob/main/snackager/README.md
Example cURL command to request a bundle for `react-native-paper` version 4.1.0, including iOS, Android, and web platforms.
```sh
curl "http://localhost:3012/bundle/react-native-paper@4.1.0?platforms=ios,android,web"
```
--------------------------------
### Install snack-babel-standalone
Source: https://github.com/expo/snack/blob/main/packages/snack-babel-standalone/README.md
Add snack-babel-standalone to your project dependencies using yarn.
```bash
$ yarn add snack-babel-standalone
```
--------------------------------
### Request Bundle API
Source: https://github.com/expo/snack/blob/main/snackager/README.md
Make a GET request to this endpoint to obtain a bundle for a specified package and version. Platforms can be specified as a comma-separated list.
```sh
/bundle/[name]@[version]?platforms=ios,android
```
--------------------------------
### Get Package Bundle
Source: https://github.com/expo/snack/blob/main/snackager/README.md
Requests a bundled version of an NPM package for specified platforms. If the bundle is not yet generated, it will be created and returned as pending. If already bundled, it returns the bundle details and its location on S3.
```APIDOC
## GET /bundle/[name]@[version]?platforms=ios,android
### Description
Requests a bundled version of an NPM package for specified platforms. If the bundle is not yet generated, it will be created and returned as pending. If already bundled, it returns the bundle details and its location on S3.
### Method
GET
### Endpoint
/bundle/[name]@[version]
### Parameters
#### Query Parameters
- **platforms** (string) - Required - Comma-separated list of platforms (e.g., `ios,android,web`).
- **rebuild** (boolean) - Optional - If true, forces a rebuild of the package. Only effective when `DEBUG_LOCAL_FILES` is enabled.
### Response
#### Success Response (200)
- **pending** (boolean) - If true, the bundle is being generated.
- **version** (string) - The exact version of the bundled package.
- **hash** (string) - A hash of the bundled code.
- **dependencies** (array) - A list of dependencies included in the bundle.
### Response Example
```json
{
"pending": true
}
```
```json
{
"version": "4.1.0",
"hash": "a1b2c3d4e5f6",
"dependencies": [
"react-native-vector-icons"
]
}
```
```
--------------------------------
### Listen for State Changes
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Adds a listener to observe changes in the Snack's state. The listener receives the current state and the previous state. Returns a function to unsubscribe the listener. Example demonstrates logging a name change.
```typescript
const unsubscribe = Snack.addStateListener((state, prevState) => {
if (state.name !== prevState.name) {
console.log('name changed: ', state.name);
}
});
Snack.setName('unforgiven orange'); // // Make a change to the state
unsubscribe(); // Remove listener
```
--------------------------------
### Deploy Native Runtime and Webplayer
Source: https://github.com/expo/snack/blob/main/docs/expo-sdk-upgrade.md
Commands to deploy the native runtime and webplayer to staging and production environments.
```bash
yarn deploy:staging
yarn deploy:web:staging
yarn deploy:prod
yarn deploy:web:prod
```
--------------------------------
### Build Snack SDK
Source: https://github.com/expo/snack/blob/main/packages/snack-sdk/example/README.md
Run this command in the packages/snack-sdk directory to build the SDK.
```bash
yarn build
```
--------------------------------
### Lint, Build, Test, and Document Project
Source: https://github.com/expo/snack/blob/main/packages/snack-sdk/README.md
Commands to ensure code quality, build the project, run tests, and update documentation before committing changes.
```sh
yarn lint
yarn build
yarn test
yarn doc
```
--------------------------------
### Import and Usage Before Migration (snack-sdk v2)
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-migration.md
Illustrates the import statements and basic usage of SnackSession and ExpoSnackFiles with flow typings in snack-sdk v2.
```js
import { SnackSession } from 'snack-sdk'; // 2.x.x
import type { ExpoSnackFiles } from 'snack-sdk'; // 2.x.x
const files: ExpoSnackFiles = {
'App.js': {
type: 'CODE',
contents: `console.log('Hello Snack!');`,
},
};
const session = new SnackSession({
...
});
session.sendCodeAsync(files);
```
--------------------------------
### Get Current Snack State
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Returns the current state of the Snack, including its files, dependencies, and other metadata. This is a synchronous operation.
```typescript
const state = Snack.getState();
```
--------------------------------
### Basic Snack SDK Usage
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md
Create and configure a Snack instance, set it online, retrieve its state and URL, and then take it offline.
```ts
import { Snack } from 'snack-sdk';
// Create Snack
const snack = new Snack({
files: {
'App.js': {
type: 'CODE',
contents: `
import * as React from 'react';
import { View, Text } from 'react-native';
export default () => (
Hello Snack!
);
`
}
}
});
// Make the Snack available online
snack.setOnline(true);
const { url } = await snack.getStateAsync();
// You can now use the url and show it as a QR code
// to open the Snack in the Expo client.
// Stop Snack when done
snack.setOnline(false);
```
--------------------------------
### Save Snack and Get URL
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md
Save a Snack to Expo servers using `saveAsync`. This returns the unique Snack `id` and `url`.
```typescript
const snack = new Snack({
files: { ... },
dependencies: { ... }
});
const { id, url } = await snack.saveAsync();
console.log(url); // "exp://exp.host/@jsghakdshgs"
```
--------------------------------
### Run Lint, Build, and Test Commands
Source: https://github.com/expo/snack/blob/main/packages/snack-content/README.md
Execute these commands to ensure code quality and test coverage before committing.
```sh
yarn lint
yarn build
yarn test
```
--------------------------------
### Get Snack State
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md
Retrieve the current state of a Snack instance, including its name, description, and SDK version. The state is read-only and should not be modified directly.
```typescript
const snack = new Snack({
name: 'Wonderful orange',
description: `It's a wonderful world`,
sdkVersion: '37.0.0'
});
const { name, description, sdkVersion } = snack.getState();
console.log(name, description, sdkVersion);
```
--------------------------------
### Get Snack Download URL
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Retrieves the URL for downloading the Snack as a zip file. This method will automatically save any unsaved changes before generating the URL.
```typescript
const downloadUrl = await Snack.getDownloadURLAsync();
```
--------------------------------
### Get Snack State Asynchronously
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Waits for any pending operations, such as dependency resolution, to complete before returning the current state of the Snack. This is useful when ensuring the Snack is fully ready.
```typescript
const state = await Snack.getStateAsync();
```
--------------------------------
### Create Snack with Initial Dependencies
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md
Initialize a new Snack instance with specified dependencies and code files. This is useful for setting up a project with pre-defined libraries and application code.
```typescript
import { Snack } from 'snack-sdk';
// Create Snack
const snack = new Snack({
dependencies: {
'expo-linear-gradient': {
version: '8.2.1'
}
},
files: {
'App.js': {
type: 'CODE',
contents: `
import * as React from 'react';
import { LinearGradient } from 'expo-linear-gradient';
export default () => (
);
`
}
}
});
```
--------------------------------
### Serve Local Bundle Files
Source: https://github.com/expo/snack/blob/main/snackager/README.md
Use this cURL command to fetch bundled output files when `DEBUG_LOCAL_FILES` is enabled. This allows for debugging by serving files directly from disk.
```sh
curl http:/localhost:3012/serve/react-navigation@3.3.2-ios/bundle.js
```
--------------------------------
### Deploy Snack Web Player to Staging
Source: https://github.com/expo/snack/blob/main/runtime/__internal__/DEPLOYING.md
Deploy the Snack web player to the staging environment. This version is used by the Snack web preview.
```bash
yarn deploy:web:staging
```
--------------------------------
### Deploy Snack Web Player to Production
Source: https://github.com/expo/snack/blob/main/runtime/__internal__/DEPLOYING.md
Deploy the Snack web player to the production environment. This version is used by the Snack web preview.
```bash
yarn deploy:web:prod
```
--------------------------------
### Request Client Preview
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Requests a preview from all connected clients. The preview URLs are available in the `previewURL` field of each connected client object returned in the promise.
```typescript
const clients = await Snack.getPreviewAsync();
```
--------------------------------
### Login to Expo Production
Source: https://github.com/expo/snack/blob/main/runtime/__internal__/DEPLOYING.md
Log in to the Expo production environment before deploying.
```bash
expo login
```
--------------------------------
### Create Snack with Pre-resolved Dependencies
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md
Initialize a Snack instance using dependencies that have already been resolved and bundled. This can speed up the process when reusing previously processed dependencies.
```typescript
const snack = new Snack({
dependencies: {
'expo-font': { version: '8.2.1' }
}
});
// Wait for the dependencies to be resolved
const { dependencies } = await snack.getStateAsync();
console.log(`expo-font handle ${dependencies['expo-font'].handle}`); // string -> https://...
// Create a Snack with pre-resolved dependencies
const newSnack = new Snack({
dependencies
});
```
--------------------------------
### Login to Expo Staging
Source: https://github.com/expo/snack/blob/main/runtime/__internal__/DEPLOYING.md
Log in to the Expo staging environment before deploying.
```bash
EXPO_STAGING=1 expo login
```
--------------------------------
### Deploy Snack Runtime to Staging
Source: https://github.com/expo/snack/blob/main/runtime/__internal__/DEPLOYING.md
Deploy the Snack runtime to the staging environment. This version is used by the Expo client.
```bash
yarn deploy:staging
```
--------------------------------
### Publish Snack SDK to Next Channel
Source: https://github.com/expo/snack/blob/main/docs/expo-sdk-upgrade.md
Use the 'next' channel to allow partners to test the new Expo SDK. Update the version in package.json, build the project, and then publish with the --tag next flag.
```bash
yarn build
npm publish --tag next
```
--------------------------------
### Listen for Connected Clients
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md
Add a state listener to monitor `connectedClients`. This allows you to detect when new clients connect and log their platform information.
```typescript
snack.addStateListener((state, prevState) => {
if (state.connectedClients !== prevState.connectedClients) {
for (const key in state.connectedClients) {
if (!prevState.connectedClients[key]) {
console.log('A client has connected! ' + state.connectedClients[key].platform);
}
}
}
});
```
--------------------------------
### Upgrade Expo SDK and Dependencies
Source: https://github.com/expo/snack/blob/main/docs/expo-sdk-upgrade.md
Use these commands to upgrade the Expo SDK and fix project dependencies.
```bash
yarn add expo@^...
yarn expo install --fix
```
--------------------------------
### Snack Constructor
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Initializes a new instance of the Snack class.
```APIDOC
## constructor
\+ **new Snack**(`options`: [SnackOptions](../README.md#snackoptions)): [Snack](snack.md)
#### Parameters:
Name | Type |
------ | ------ |
`options` | [SnackOptions](../README.md#snackoptions) |
**Returns:** [Snack](snack.md)
```
--------------------------------
### Deploy Snack Runtime to Production
Source: https://github.com/expo/snack/blob/main/runtime/__internal__/DEPLOYING.md
Deploy the Snack runtime to the production environment. This version is used by the Expo client.
```bash
yarn deploy:prod
```
--------------------------------
### Serve Bundled Files
Source: https://github.com/expo/snack/blob/main/snackager/README.md
Serves the generated bundle files directly. This endpoint is typically used for debugging purposes when `DEBUG_LOCAL_FILES` is enabled.
```APIDOC
## GET /serve/[name]@[version]/bundle.js
### Description
Serves the generated bundle files directly. This endpoint is typically used for debugging purposes when `DEBUG_LOCAL_FILES` is enabled.
### Method
GET
### Endpoint
/serve/[name]@[version]/bundle.js
### Parameters
#### Path Parameters
- **name** (string) - Required - The name of the NPM package.
- **version** (string) - Required - The version of the NPM package.
### Response
#### Success Response (200)
- **bundle.js** (file) - The JavaScript bundle file.
```
--------------------------------
### getPreviewAsync
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Requests a preview from connected clients and returns information about the previews.
```APIDOC
## getPreviewAsync
▸ **getPreviewAsync**(): Promise<[SnackConnectedClients](../README.md#snackconnectedclients)>
Requests a preview from the connected clients.
The previews are returned in the `previewURL` field of each connectedClient.
**Returns:** Promise<[SnackConnectedClients](../README.md#snackconnectedclients)>
```
--------------------------------
### getPreloadedModules
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/README.md
Retrieves a list of modules that are preloaded in the current SDK environment.
```APIDOC
## getPreloadedModules
### Description
Retrieves a list of modules that are preloaded in the current SDK environment.
### Signature
getPreloadedModules(): string[]
```
--------------------------------
### Web Preview Integration with Snack SDK
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md
Integrates Snack SDK for web previewing by creating an iframe and passing its contentWindow ref. The webPreviewURL is updated and used as the iframe's source. Supported from SDK 40 onwards.
```jsx
import * as React from 'react';
import { Snack } from 'snack-sdk';
export default () => {
const webPreviewRef = React.useRef(null);
const [snack] = React.useState(() =>
new Snack({
...
webPreviewRef,
})
);
const { webPreviewURL } = snack.getState();
return (
...
);
};
```
--------------------------------
### Test Package Bundling
Source: https://github.com/expo/snack/blob/main/snackager/README.md
Use this command to test bundling a specific NPM package. It bypasses caches and does not write bundles to S3.
```sh
yarn bundle react-native-elements | ./node_modules/.bin/bunyan
```
--------------------------------
### Run Tests
Source: https://github.com/expo/snack/blob/main/snackager/README.md
Execute all tests with `yarn test`. Use a suffix to run specific tests, such as `bundler`.
```sh
yarn test bundler
```
--------------------------------
### downloadAsync vs getDownloadURLAsync
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-migration.md
The `downloadAsync` method was renamed to `getDownloadURLAsync`. It now also allows options for `saveAsync` to be passed to it.
```APIDOC
## Method Rename and Enhancement
### Old Method
`downloadAsync`
### New Method
`getDownloadURLAsync`
### Description
The `downloadAsync` method was renamed to `getDownloadURLAsync`. This new method allows options for `saveAsync` to be passed to it, providing more flexibility.
```
--------------------------------
### Request Snack Preview
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md
Use `getPreviewAsync` to request a visual preview of the Snack app from connected clients. It returns information about the preview, including platform and URL.
```typescript
const connectedClients = await snack.getPreviewAsync();
Object.values(connectedClients).forEach(client => {
console.log(
`Preview ${client.platform}, url: ${client.previewURL}, time: ${client.previewTimestamp}`
);
});
```
--------------------------------
### getSupportedSDKVersions
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/README.md
Fetches a list of all SDK versions that are currently supported by the Snack environment.
```APIDOC
## getSupportedSDKVersions
### Description
Returns the list of supported SDK versions.
### Returns
- SDKVersion[] - An array of supported SDK versions.
```
--------------------------------
### getState
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Returns the current state of the snack, including files, dependencies, and other metadata.
```APIDOC
## getState
▸ **getState**(): [SnackState](../README.md#snackstate)
Returns the current state of the Snack. This includes files, dependencies
and other meta-data about the Snack.
**Returns:** [SnackState](../README.md#snackstate)
```
--------------------------------
### getSupportedSDKVersions
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/README.md
Fetches a list of all SDK versions that are currently supported by the Snack environment.
```APIDOC
## getSupportedSDKVersions
### Description
Fetches a list of all SDK versions that are currently supported by the Snack environment.
### Signature
getSupportedSDKVersions(): SDKVersion[]
```
--------------------------------
### getPreloadedModules
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/README.md
Retrieves a list of modules that are pre-loaded for a specified SDK version. Optionally, it can filter to include only core modules.
```APIDOC
## getPreloadedModules
### Description
Returns the list of pre-loaded modules for the given SDK version.
### Parameters
#### Path Parameters
- **sdkVersion** (SDKVersion) - Required - The SDK version to check.
- **coreModulesOnly?** (boolean) - Optional - If true, only returns core modules.
### Returns
- object - An object containing the list of pre-loaded modules.
```
--------------------------------
### setDescription
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-migration.md
The `setDescription` method has no changes.
```APIDOC
## Method Unchanged
### Method
`setDescription`
### Description
No changes to the `setDescription` method.
```
--------------------------------
### Import and Usage After Migration (snack-sdk v3)
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-migration.md
Shows the updated import statements and usage of Snack and SnackFiles with TypeScript in snack-sdk v3. Flow typings are removed.
```tsx
import { Snack, SnackFiles } from 'snack-sdk'; // 3.x.x
const files: SnackFiles = {
'App.js': {
type: 'CODE',
contents: `console.log('Hello Snack!');`,
},
};
const snack = new Snack({
files,
});
```
--------------------------------
### Publish Official Snack SDK Version
Source: https://github.com/expo/snack/blob/main/docs/expo-sdk-upgrade.md
Release an official version of snack-content and snack-sdk after testing. Perform a minor version bump in package.json, build the project, and publish.
```bash
yarn build
npm publish
```
--------------------------------
### uploadAssetAsync
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-migration.md
The `uploadAssetAsync` method has no changes.
```APIDOC
## Method Unchanged
### Method
`uploadAssetAsync`
### Description
No changes to the `uploadAssetAsync` method.
```
--------------------------------
### setSdkVersion vs setSDKVersion
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-migration.md
The `setSdkVersion` method has been renamed to `setSDKVersion`.
```APIDOC
## Method Rename
### Old Method
`setSdkVersion`
### New Method
`setSDKVersion`
### Description
The `setSdkVersion` method has been renamed to `setSDKVersion`.
```
--------------------------------
### Log Missing Dependencies
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md
Initialize a Snack with a dependency that has missing peer dependencies and then retrieve the state to log the `missingDependencies` field. This helps identify required peer packages.
```typescript
const snack = new Snack({
'@react-navigation/stack': { version: '*' }
});
const state = await snack.getStateSsync();
console.log(state.missingDependencies);
/* {
"@react-navigation/native": {
dependents: ["@react-navigation/stack"],
wantedVersion: 'x.x.x'
},
"react-native-screens": {
dependents: ["@react-navigation/stack"],
wantedVersion: 'x.x.x'
},
...
} */
```
--------------------------------
### updateDependencies
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Updates dependencies. Use this method to add/remove/update dependencies. To remove a dependency specify `null` as the value of the key/value pair.
```APIDOC
## updateDependencies
### Description
Updates dependencies. Use this method to add/remove/update dependencies. To remove a dependency specify `null` as the value of the key/value pair.
### Method
void
### Parameters
#### Path Parameters
- **dependencies** ({ [name:string]: [SnackDependency](../README.md#snackdependency) | null; }) - Required - An object where keys are dependency names and values are their versions or null to remove.
### Request Example
```ts
const Snack = new Snack({
dependencies: {
'react-native-paper': '~2.0.0'
}
});
// Add dependency
Snack.updateDependencies({
'expo-font': '9.0.0'
});
// Remove dependency
Snack.updateDependencies({
'expo-font': null
});
```
### Returns
void
```
--------------------------------
### saveAsync
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-migration.md
The `saveAsync` method has no changes.
```APIDOC
## Method Unchanged
### Method
`saveAsync`
### Description
No changes to the `saveAsync` method.
```
--------------------------------
### setUser
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-migration.md
The `setUser` method has no changes.
```APIDOC
## Method Unchanged
### Method
`setUser`
### Description
No changes to the `setUser` method.
```
--------------------------------
### addLogListener
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Adds a callback for listening to client-generated log messages. Returns a subscription object to unsubscribe the listener.
```APIDOC
## addLogListener
▸ **addLogListener**(`listener`: [SnackLogListener](../README.md#snackloglistener)): [SnackListenerSubscription](../README.md#snacklistenersubscription)
Adds a callback for listening for any client generated log messages.
**`example`**
```
const unsubscribe = Snack.addLogListener((log) => {
console.log('log message received: ', log);
});
unsubscribe(); // Remove listener
```
#### Parameters:
Name | Type |
------ | ------ |
`listener` | [SnackLogListener](../README.md#snackloglistener) |
**Returns:** [SnackListenerSubscription](../README.md#snacklistenersubscription)
```
--------------------------------
### SnackOptions Type
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/README.md
Defines the configuration options available when initializing or interacting with the Snack SDK. This includes settings for API URLs, dependencies, file structures, and more.
```APIDOC
## SnackOptions
Ƭ **SnackOptions**: { [name:string]: string; }
Dictionary of dependencies and their version.
#### Type declaration:
Name | Type |
------ | ------ |
`accountSnackId?` | undefined \| string |
`apiURL?` | undefined \| string |
`channel?` | undefined \| string |
`codeChangesDelay?` | undefined \| number |
`createTransport?` | undefined \| (options: SnackTransportOptions) => SnackTransport |
`dependencies?` | [SnackDependencies](README.md#snackdependencies) |
`description?` | undefined \| string |
`deviceId?` | undefined \| string |
`disabled?` | undefined \| false \| true |
`files?` | [SnackFiles](README.md#snackfiles) |
`host?` | undefined \| string |
`id?` | undefined \| string |
`name?` | undefined \| string |
`online?` | undefined \| false \| true |
`previewTimeout?` | undefined \| number |
`reloadTimeout?` | undefined \| number |
`sdkVersion?` | [SDKVersion](README.md#sdkversion) |
`snackagerURL?` | undefined \| string |
`snackId?` | undefined \| string |
`transports?` | undefined \| { [id:string]: SnackTransport; } |
`user?` | [SnackUser](README.md#snackuser) |
`verbose?` | undefined \| false \| true |
`webPlayerURL?` | undefined \| string |
`webPreviewRef?` | [SnackWindowRef](README.md#snackwindowref) |
```
--------------------------------
### setFocus(true/false) vs setFocus()
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-migration.md
The `setFocus` method signature has changed, and the boolean argument has been removed. It now only indicates that the Snack has received focus.
```APIDOC
## Method Signature Change
### Old Method
`setFocus(true/false)`
### New Method
`setFocus()`
### Description
The `setFocus` method signature has changed, and the boolean argument was removed. It is now only possible to indicate that the Snack has received the focus.
```
--------------------------------
### setDescription
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Sets the description for the snack.
```APIDOC
## setDescription
▸ **setDescription**(): void
Sets the description for the snack.
**Returns:** void
```
--------------------------------
### standardizeDependencies
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/README.md
Normalizes and standardizes a given set of project dependencies.
```APIDOC
## standardizeDependencies
### Description
Normalizes and standardizes a given set of project dependencies.
### Parameters
#### Parameters
- **dependencies** (SnackDependencies) - Required - The dependencies to standardize.
### Signature
standardizeDependencies(dependencies: SnackDependencies): SnackDependencies
```
--------------------------------
### isModulePreloaded
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/README.md
Determines if a given module is preloaded in the current SDK environment.
```APIDOC
## isModulePreloaded
### Description
Determines if a given module is preloaded in the current SDK environment.
### Parameters
#### Parameters
- **moduleName** (string) - Required - The name of the module to check.
### Signature
isModulePreloaded(moduleName: string): boolean
```
--------------------------------
### setDescription
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Sets the description of the Snack.
```APIDOC
## setDescription
### Description
Sets the description of the Snack.
### Method
void
### Parameters
#### Path Parameters
- **description** (string) - Required - Description of the Snack
### Returns
void
```
--------------------------------
### Configure and Use SnackRuntimeProvider
Source: https://github.com/expo/snack/blob/main/packages/snack-runtime/README.md
Set up the SnackRuntimeProvider with custom modules and integrate SnackRuntime into your React Native app. Handles snack state changes and reload requests.
```typescript
import * as Updates from 'expo-updates';
import {
type SnackConfig,
type SnackState,
defaultSnackModules,
SnackRuntimeProvider,
SnackRuntime,
} from 'snack-runtime';
const config: SnackConfig = {
modules: {
// Inherit the default set of modules from Snack
...defaultSnackModules,
// Add modules that are available through imports within Snacks
'react-native-blurhash': require('react-native-blurhash'),
}
};
export function Snack() {
return (
);
}
// Requested through the Snack website
function onReloadRequested() {
return Updates.reloadAsync();
}
// When the lifecycle of a Snack changes
function onStateChange(state: SnackState) {
if (state === 'loading') console.log('Snack is initializing the code...');
if (state === 'finished') console.log('Snack is ready and rendered!');
if (state === 'error') console.error('Snack failed to initialize, check the logs for more info.');
if (state === 'not-found') console.error('Snack failed to initialize by snack identifier, Snack not found');
throw new Error(`Unexpected Snack state received "${state}"`);
}
```
--------------------------------
### Evaluate Bundled Code in Snack
Source: https://github.com/expo/snack/blob/main/snackager/README.md
JavaScript code to set up global functions for requiring modules and then evaluate the bundled code. This is useful for running Snackager-generated bundles within the Snack environment.
```js
global.__snack_exports = {};
global.__snack_require = name => {
switch (name) {
case 'react':
return require('react');
case 'react-native':
return require('react-native');
case 'expo':
return require('expo');
}
};
eval(`
(
function(require, exports) {
${code}
;
})(global.__snack_require, global.__snack_exports);
`);
```
--------------------------------
### updateDependencies
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Updates the dependencies for the snack.
```APIDOC
## updateDependencies
▸ **updateDependencies**(): void
Updates the dependencies for the snack.
**Returns:** void
```
--------------------------------
### isFeatureSupported
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/README.md
Checks if a specific SDK feature is supported in the current environment.
```APIDOC
## isFeatureSupported
### Description
Checks if a specific SDK feature is supported in the current environment.
### Parameters
#### Parameters
- **feature** (SDKFeature) - Required - The feature to check for support.
### Signature
isFeatureSupported(feature: SDKFeature): boolean
```
--------------------------------
### setDeviceId
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-migration.md
The `setDeviceId` method has no changes.
```APIDOC
## Method Unchanged
### Method
`setDeviceId`
### Description
No changes to the `setDeviceId` method.
```
--------------------------------
### Update Snack Website SDK Configuration
Source: https://github.com/expo/snack/blob/main/docs/expo-sdk-upgrade.md
Update the SDK configuration in the Snack website to include the new SDK version and Appetize instance.
```typescript
snack/website/src/client/configs/sdk.tsx
snack/website/src/client/configs/constants.tsx
```
--------------------------------
### updateFiles
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Updates the files for the snack.
```APIDOC
## updateFiles
▸ **updateFiles**(): void
Updates the files for the snack.
**Returns:** void
```
--------------------------------
### setOnline
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Sets the online status for the snack.
```APIDOC
## setOnline
▸ **setOnline**(): void
Sets the online status for the snack.
**Returns:** void
```
--------------------------------
### setAuthorizationToken (deprecated)
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-migration.md
The `setAuthorizationToken` method has been removed and is deprecated. Use `setUser` instead.
```APIDOC
## Method Removed (Deprecated)
### Method
`setAuthorizationToken`
### Description
The `setAuthorizationToken` method has been removed and is deprecated. Use `setUser` instead.
```
--------------------------------
### isModulePreloaded
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/README.md
Checks if a specific module or dependency is preloaded for a given SDK version. Can be filtered to core modules only.
```APIDOC
## isModulePreloaded
### Description
Checks whether a specific module/dependency is preloaded for the given SDK version.
### Parameters
#### Path Parameters
- **name** (string) - Required - The name of the module to check.
- **sdkVersion** (SDKVersion) - Required - The SDK version to check.
- **coreModulesOnly?** (boolean) - Optional - If true, checks only within core modules.
### Returns
- boolean - True if the module is preloaded, false otherwise.
```
--------------------------------
### isFeatureSupported
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/README.md
Determines if a specific feature is available and supported within a given SDK version.
```APIDOC
## isFeatureSupported
### Description
Checks whether a feature is supported by the given SDK version.
### Parameters
#### Path Parameters
- **feature** (SDKFeature) - Required - The feature to check for support.
- **sdkVersion** (string) - Required - The SDK version to check against.
### Returns
- boolean - True if the feature is supported, false otherwise.
```
--------------------------------
### updateFiles
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Updates code or asset files. Use this method to add/remove/update files and upload assets. To remove a file specify `null` as the value of the file.
```APIDOC
## updateFiles
### Description
Updates code or asset files. Use this method to add/remove/update files and upload assets. To remove a file specify `null` as the value of the file.
### Method
void
### Parameters
#### Path Parameters
- **files** ({ [path:string]: [SnackFile](../README.md#snackfile) | null; }) - Required - An object where keys are file paths and values are file contents or null to remove.
### Request Example
```ts
const Snack = new Snack({
files: {
'App.js': { type: 'CODE', contents: 'console.log("hello world!");' },
'data.json': { type: 'CODE', contents: '{}' },
}
});
// Add or update files
Snack.updateFiles({
'App.js': {
type: 'CODE',
contents: 'console.log("Hello Snack!");'
}
});
// Upload an asset
Snack.updateFiles({
'assets/logo.png': {
type: 'ASSET',
contents: file // File, Blob or FormData
}
});
// Add a pre-uploaded asset
Snack.updateFiles({
'assets/expo.jpg': {
type: 'ASSET',
contents: 'https://mysite/expo.jpg'
}
});
// Remove files
Snack.updateFiles({
'data.json': null,
'assets/expo.jpg': null
});
```
### Returns
void
```
--------------------------------
### getDownloadURLAsync
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Retrieves the URL for downloading the snack as a zip file. Automatically saves unsaved changes before generating the URL.
```APIDOC
## getDownloadURLAsync
▸ **getDownloadURLAsync**(`saveOptions?`: [SnackSaveOptions](../README.md#snacksaveoptions)): Promise
Gets the URL at which the Snack can be downloaded as a zip file. Will automatically
save the Snack if it contains unsaved changes.
#### Parameters:
Name | Type |
------ | ------ |
`saveOptions?` | [SnackSaveOptions](../README.md#snacksaveoptions) |
**Returns:** Promise
```
--------------------------------
### Initialize Snack with SDK Version
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md
Set a specific Expo SDK version for the Snack project during initialization. This ensures compatibility with the chosen SDK features and APIs.
```typescript
import { Snack } from 'snack-sdk';
const snack = new Snack({
sdkVersion: '36.0.0' // Optional SDK version to use
});
```
--------------------------------
### uploadAssetAsync
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Uploads an asset to the snack.
```APIDOC
## uploadAssetAsync
▸ **uploadAssetAsync**(): Promise
Uploads an asset to the snack.
**Returns:** Promise
```
--------------------------------
### setOnline
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Makes the Snack available online. When online, a snackpub channel is created to which clients can connect.
```APIDOC
## setOnline
### Description
Makes the Snack available online. When online, a snackpub channel is created to which clients can connect.
### Method
void
### Parameters
#### Path Parameters
- **enabled** (boolean) - Required - Whether to enable online availability.
### Returns
void
```
--------------------------------
### setName
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-migration.md
The `setName` method has no changes.
```APIDOC
## Method Unchanged
### Method
`setName`
### Description
No changes to the `setName` method.
```
--------------------------------
### Set Snack Description
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Sets the description for the Snack.
```typescript
setDescription(description: string): void;
```
--------------------------------
### setUser
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Sets the user for the snack.
```APIDOC
## setUser
▸ **setUser**(): void
Sets the user for the snack.
**Returns:** void
```
--------------------------------
### setFocus
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Sets the focus state for the snack.
```APIDOC
## setFocus
▸ **setFocus**(): void
Sets the focus state for the snack.
**Returns:** void
```
--------------------------------
### Add Asset to Snack
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk.md
Include assets like images or fonts in your Snack by providing a URL, Blob, or File object.
```ts
snack.updateFiles({
'assets/logo.png': {
type: 'ASSET',
contents: 'https://mysite/logo.png',
},
});
```
```ts
const blob = new Blob(...);
snack.updateFiles({
'assets/logo.png': {
type: 'ASSET',
contents: blob
}
});
// Wait for the upload to complete
const { files } = await snack.getStateAsync();
console.log(files['assets/logo.png'].contents); // string -> "https://..."
```
--------------------------------
### setSDKVersion
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-api/classes/snack.md
Sets the SDK version for the snack.
```APIDOC
## setSDKVersion
▸ **setSDKVersion**(): void
Sets the SDK version for the snack.
**Returns:** void
```
--------------------------------
### getState
Source: https://github.com/expo/snack/blob/main/docs/snack-sdk-migration.md
The `getState` method returns the new `SnackState` object.
```APIDOC
## Method
### Method
`getState`
### Description
Returns the new `SnackState` object.
```