Installation

Get Reactnatively up and running in your Expo or React Native project.

Quick install

Install the full framework with a single package:

bash

pnpm add reactnatively

Or with npm / yarn:

bash

npm install reactnatively
# or
yarn add reactnatively

Peer dependencies

Reactnatively requires the following peer dependencies:

bash

# Required
pnpm add react-native-reanimated

# Recommended (for native blur and gradient effects)
pnpm add expo-blur react-native-linear-gradient

ℹ

expo-blur enables native platform blur via BlurView. Without it, Reactnatively falls back to solid semi-transparent backgrounds. react-native-linear-gradient enables the glass highlight shimmer effect.

Babel / Metro config

Add react-native-reanimated/plugin to your babel.config.js (must be last):

babel.config.js

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

Provider setup

Wrap your app with the required providers at the root:

app/_layout.tsx

import { ReactnativelyProvider } from 'reactnatively';

export default function RootLayout() {
  return (
    <ReactnativelyProvider>
      <Stack />
    </ReactnativelyProvider>
  );
}

ReactnativelyProvider composes ThemeProvider, GlassPlatformProvider, and InteractionProvider into a single top-level provider.

Subpath imports

Install `reactnatively` once, then use focused subpaths when you want a narrower import surface:

typescript

import { Button, GlassView } from 'reactnatively';
import { resolveGlass } from 'reactnatively/glass';
import { createTheme } from 'reactnatively/theme';
import { useDisclosure } from 'reactnatively/hooks';
import { Fade } from 'reactnatively/animations';

Next step

Quick start guide

Quick start