Install mobile components

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:

• 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). 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: 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:

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:

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:

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).