Project Setup

A complete walkthrough for configuring a new or existing React Native / Expo project to work with Reactnatively — TypeScript, Reanimated, providers, and optional dependencies included.

Expo (recommended)

Start from the Expo Router template for the best out-of-the-box experience:

bash

npx create-expo-app my-app --template tabs
cd my-app
pnpm add reactnatively react-native-reanimated expo-blur

Bare React Native

For bare React Native projects, install the required dependencies and link natives:

bash

pnpm add reactnatively react-native-reanimated react-native-gesture-handler

# iOS — install native modules
cd ios && pod install && cd ..

Babel configuration

The Reanimated Babel plugin must be the last plugin in your Babel config:

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      // other plugins first ...
      'react-native-reanimated/plugin', // must be last
    ],
  };
};

⚠

If react-native-reanimated/plugin is not last, animated hooks will crash with worklet errors at runtime.

TypeScript configuration

Reactnatively ships full TypeScript types. No additional @types package is required. Ensure your tsconfig.json targets ES2020 or newer:

tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "target": "ES2020",
    "moduleResolution": "bundler"
  }
}

Root provider

Wrap the root of your app in ReactnativelyProvider. This single provider composes ThemeProvider, GlassPlatformProvider, and InteractionProvider:

app/_layout.tsx

1import { Stack } from 'expo-router';2import { ReactnativelyProvider } from 'reactnatively';34export default function RootLayout() {5  return (6    <ReactnativelyProvider7      colorScheme="system"8      glass={{ material: { quality: 'balanced' } }}9      interaction={{ intensity: 'standard', enableHaptics: true }}10      withToasts11    >12      <Stack />13    </ReactnativelyProvider>14  );15}

ℹ

colorScheme="system" makes the theme follow the device setting automatically. Pass "light" or "dark" to override.

Gesture handler (required for sheets and drawers)

Components like BottomSheet and Drawer require GestureHandlerRootView at the very root of your tree (above the provider):

app/_layout.tsx

1import { GestureHandlerRootView } from 'react-native-gesture-handler';2import { ReactnativelyProvider } from 'reactnatively';34export default function RootLayout() {5  return (6    <GestureHandlerRootView style={{ flex: 1 }}>7      <ReactnativelyProvider>8        <Stack />9      </ReactnativelyProvider>10    </GestureHandlerRootView>11  );12}

Expo Go vs development builds

Environment	Native blur	Gesture handler	Haptics
Expo Go	✓ (expo-blur included)	✓	✓
Dev build (iOS)	✓ Full quality	✓	✓
Dev build (Android 12+)	✓ Partial (65% intensity)	✓	✓
Dev build (Android <12)	✗ Solid fallback	✓	✓

Verify your setup

Add a quick smoke test to your home screen:

app/(tabs)/index.tsx

1import { Box, GlassView, Heading, Text } from 'reactnatively';23export default function HomeScreen() {4  return (5    <Box flex={1} alignItems="center" justifyContent="center" padding="lg">6      <GlassView elevation={2} style={{ padding: 24, borderRadius: 20 }}>7        <Heading level="h2" style={{ marginBottom: 8 }}>8          Reactnatively9        </Heading>10        <Text variant="body" color="secondary">11          Glass engine is working.12        </Text>13      </GlassView>14    </Box>15  );16}

Next step

Explore the Glass Engine

Glass Engine