Getting Started
Install plocks, wire up the provider, and render your first component.
Prerequisites
Node.js
npm
Install with npm
Add @plocks/ui to your React Native or Expo project:
npm install @plocks/uiDate pickers, charts, code blocks, media players, the carousel, Spotlight, brand logos, QR codes and emoji picking are separate packages — @plocks/dates, @plocks/charts, @plocks/code, @plocks/media, @plocks/carousel, @plocks/spotlight, @plocks/brands, @plocks/qrcode and @plocks/emoji-picker. Install the ones you use.
Install the peer dependencies
plocks builds on a handful of packages your app provides. On Expo, install them with expo install so the versions match your SDK:
npx expo install \
react-native-reanimated \
react-native-safe-area-context \
react-native-svgSet up the provider
Wrap your root component with PlocksProvider to enable theming:
import { PlocksProvider } from '@plocks/ui';
import { YourApp } from './YourApp';
export function Demo() {
return (
<PlocksProvider>
<YourApp />
</PlocksProvider>
);
}Verify the install
Render a component to confirm everything is wired up:
import { Text, Button, Block } from '@plocks/ui';
export function Demo() {
return (
<Button
title='It works!'
variant='filled'
onPress={() => console.log('Success!')}
/>
)
}Templates
Start from a preconfigured project instead of wiring the provider yourself.
Start a project from a template with the command below — it asks where to put the project and which template to use (pass
--template expo-min after -- to skip the question). Or open a template on GitHub and click "Use this template". Every template ships with plocks, its peer dependencies, and the provider already set up.npm create plocks@latestexpo-template
Expo
iOS
Android
Web
npm create plocks@latest -- --template expoexpo-min-template
Expo
Minimal
npm create plocks@latest -- --template expo-minuniversal-template
Expo
iOS
Android
Web
Static web
npm create plocks@latest -- --template universalnative-template
Expo
iOS
Android
npm create plocks@latest -- --template nativeweb-template
Web
React Native Web
npm create plocks@latest -- --template webBuilt a starter with your own stack? Share it with the community and we will list it here.
React Native design for iOS, Android, and Web.
Quick Links
Resources