rnblocks

Getting started

Download a screen template and drop it into your Expo project.

1

Create an Expo project

If you don't have one, create a new Expo project with TypeScript.

npx create-expo-app my-app --template blank-typescript
2

Install dependencies

Most screens require one or more of these standard Expo SDK packages. They come pre-installed in managed Expo projects — zero native setup needed.

npx expo install react-native-reanimated expo-haptics expo-linear-gradient react-native-safe-area-context @expo/vector-icons

Each screen's detail page lists exactly which packages it uses.

3

Download a screen

Browse the screen library, find a template you like, and download the source. Each screen is a single .tsx file. Drop it anywhere in your project and import the default export.

For example:

import PaywallScreen from './screens/PaywallScreen';
4

Preview before downloading

Every screen has a live Expo Snack preview — the exact same file you'd download. Open it in your browser, or scan the QR code with Expo Go on your device.

What you see in the preview is exactly what you get in the download. No surprises.

5

Generate a custom screen

On a Pro plan, you can generate a custom variation of any screen using AI. Describe your requirements — color scheme, content structure, interactions — and get back a complete, production-ready React Native screen.

AI generations are stored in your history permanently and can be downloaded at any time.