# Install mobile components

> Put an UpFork mobile component into your Expo app: its folders, the npx expo install line, the App.tsx that shows it, Skia on the web, installing it from an AI assistant, and what UpFork checks before it goes on sale.

Mobile components are React Native code for Expo apps, written in TypeScript for Expo SDK 57. You try each
one live in a phone on its page, and it goes into your app as code: its folders, and the packages it uses, installed
with Expo. Before any revision goes on sale, UpFork installs it exactly the way this page describes into a fresh Expo
app, type-checks it and builds it for the web.

## Try it first

Every mobile component runs on its page, in a phone. On a computer you use it with the mouse; on a phone, with your
finger: **Tap to try it** opens it full screen. Its demos are tabs over the phone, and it follows the site's light or
dark theme.

On a computer, **Open on your phone** shows a QR code of its demo page: scan it and the same demo opens full screen on
your phone, where you feel its gestures for real. A component that's free for everyone opens straight away; for any
other, the demo page is for members, so a guest signs in there first.

## What you need

- An Expo app on SDK 57, in TypeScript. To start one:

  ```bash
  npx create-expo-app@latest my-app --template blank-typescript
  ```

- Nothing native to build. Mobile components use only Expo's own modules and plain-JavaScript packages, so they run in
  Expo Go and in any development build.
- To get a component's code: for a free one, an UpFork account (it's free); for a paid one, the account that bought
  it; for one that comes with a plan, an account on that plan or a later one ([Plans and limits](https://upfork.dev/docs/plans)).
  Free components in no plan also install from an AI assistant with no account at all.

## Get its code

Two ways, with the same files:

- **Download source** on its page gives a ZIP: the component's folders, a `package.json` naming its packages at the
  versions UpFork's install check installed, and a README with these steps for that component.
- **From an AI assistant** connected to UpFork's [MCP server](https://upfork.dev/docs/mcp): ask it to install the component. Its
  `install_product` tool hands over the files and where they go, the pictures and fonts to download, the packages and
  the `npx expo install` line, and the App.tsx below. Your assistant writes them into your app.

## Copy the folders into your app

Put its folders at your app's root, side by side as they are: `components/`, and `lib/`, `hooks/` or `assets/` when it
has them. Its files import each other by relative paths, and its code requires its pictures and fonts from `assets/`,
so the folders have to stay together.

`demos/` holds screens that show the component in use. You don't need them, but they're the quickest way to see it in
your app.

## Install its packages with Expo

Each component's page and README give its own line. For a component built with Reanimated and Gesture Handler, it
looks like this:

```bash
npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler
```

`npx expo install` picks each package's version for your Expo SDK, as UpFork's check does. The line has everything the
component needs: Reanimated 4 comes with `react-native-worklets`, which it needs beside it. When the demos use more
packages than the component, the page gives a second line for those.

## See it in your app

Each demo is a screen whose `scheme` prop is `"light"` or `"dark"`. To see one, make it your app's `App.tsx`. The page
and the README give it ready to copy, with Gesture Handler's root view when the component needs one:

```tsx
import { GestureHandlerRootView } from 'react-native-gesture-handler';

import Steps from './demos/steps';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Steps scheme="light" />
    </GestureHandlerRootView>
  );
}
```

Then run your app as usual: `npx expo start`, and open it in Expo Go or your development build.

## Skia on the web

Components that draw with Skia need nothing more on a phone. On the web, Skia's engine (CanvasKit, a WebAssembly
file) has to load before your app does:

1. Copy `node_modules/canvaskit-wasm/bin/full/canvaskit.wasm` into your app's `public/` folder. It has to be the
   `bin/full` build: Skia's web needs it.
2. Add this `index.web.ts` beside `index.ts`, and set `"main"` to `"index"` in your `package.json`, so the web starts
   from it:

```ts
import '@expo/metro-runtime';
import { LoadSkiaWeb } from '@shopify/react-native-skia/lib/module/web';
import { registerRootComponent } from 'expo';

// Skia's engine first (public/canvaskit.wasm), then the app: nothing that uses Skia may load before it.
LoadSkiaWeb({ locateFile: (file: string) => `/${file}` })
  .then(() => import('./App'))
  .then(({ default: App }) => registerRootComponent(App));
```

To run an Expo app on the web at all, it needs Expo's web packages:
`npx expo install react-dom react-native-web @expo/metro-runtime`.

## What UpFork checks

Every time its developer saves a mobile component, UpFork does what this page describes in a fresh Expo app (Expo's
blank TypeScript template, SDK 57):

- copies its folders in, and installs its packages with the versions `npx expo install` picks;
- type-checks the whole app with TypeScript in strict mode;
- builds it for the web, with the Skia setup above for a component that draws with Skia.

A revision that fails any of it doesn't go on sale, and its developer sees each problem at its file and line. Its
live preview is built from the same code you get.

## Good to know

- **Light and dark.** Components take a `scheme` prop and follow the phone's setting when you leave it out.
- **Mouse and touch.** UpFork's rules keep presses and drags on `Pressable` and Gesture Handler, so a component works
  with the mouse on the web as well as with a finger.
- **Pictures and fonts** come in the ZIP, under `assets/`. An assistant installing through MCP gets a link for each,
  to download it to its path.
- **Updates.** Once you have a component, its page's What's new says when a new version is out, and you hear about it
  on the site and by e-mail ([Reviews, bugs and updates](https://upfork.dev/docs/reviews)).

Page: https://upfork.dev/docs/mobile