Expo-first React Native UI framework

React Native UI primitives with glass, theme, and motion built in.

Reactnatively gives Expo teams typed components, adaptive glass surfaces, semantic theme tokens, and public subpath exports without hiding normal React Native patterns.

Read the docs GitHub

$pnpm add reactnatively

Expo SDK 50+

TypeScript-first

Subpath exports

App.tsx

1import { Bell, Moon, Shield } from '@expo/vector-icons';2import {3  ReactnativelyProvider,4  GlassView,5  Heading,6  Text,7  Switch,8  Button,9} from 'reactnatively';1011export function NotificationSettings() {12  return (13    <ReactnativelyProvider>14      <GlassView elevation={3} borderRadius={28}>15        <Heading level="h3">Notifications</Heading>16        <Text color="muted">Choose what deserves your attention.</Text>1718        <SettingRow icon={<Bell />} label="Product updates" enabled />19        <SettingRow icon={<Shield />} label="Security alerts" enabled />20        <SettingRow icon={<Moon />} label="Quiet hours" />2122        <Button color="primary" fullWidth>Save changes</Button>23      </GlassView>24    </ReactnativelyProvider>25  );26}

9:41

Notifications

Settings

3 active

Product updates

Releases, changelogs, and API notes

Security alerts

Important account activity

Quiet hours

Pause alerts from 10 PM

Weekly summary

Usage and project health

Save changes

Most used docsButton GlassView TextInput BottomSheet Tabs

What is included

A component system with clear runtime layers.

The framework is split around practical native-app concerns: component APIs, glass rendering, theme tokens, animation hooks, and smaller public imports when you do not need the full bundle.

Layer

What it handles

Evidence

Components

Buttons, inputs, cards, navigation, feedback, overlays, and layout primitives.

80+ documented surfaces

Glass engine

Elevation recipes, platform capability checks, tint variants, and blur fallback policy.

Native blur with fallback

Theme tokens

Semantic colors, spacing, radii, typography, and material recipes shared across packages.

createTheme + recipes

Motion

Press and entrance hooks built around reduced-motion policy and spring presets.

Reanimated-friendly APIs

Subpath exports

Import the whole framework or target the glass, theme, hooks, animation, and utility layers.

reactnatively/*

Operational defaults

TypeScript-first props, accessibility considerations, and documented rendering constraints.

Strict TS contracts

Best with Expo SDK 50+ and React Native 0.73+

Glass glow is iOS-only; Android silently falls back

Heavy blur surfaces should be budgeted on low-end devices

Framework architecture

A real package system for real React Native apps.

Reactnatively is organized around the way teams actually build native products: primitives, glass rendering, components, tokens, hooks, and motion APIs that can be adopted together or one layer at a time.

Install the bundle or import subpaths for smaller surfaces.

Wrap the app in ReactnativelyProvider and your app theme.

Compose real RN screens from typed components and StyleSheet.

Let glass capability and reduced-motion policies adapt per device.

Read the quick start

reactnatively

layer 1

Core components, providers, and public subpath exports.

import { Button, GlassView } from 'reactnatively';

reactnatively/glass

layer 2

Blur capability detection, elevation recipes, and material policy.

import { GlassView } from 'reactnatively/glass';

reactnatively/theme

layer 3

Semantic color, spacing, typography, motion, and glass tokens.

import { createTheme } from 'reactnatively/theme';

reactnatively/animations

layer 4

Press, entrance, reduced-motion, and spring preset hooks.

import { usePressAnimation } from 'reactnatively/animations';

Runtime flow

Theme tokens

Glass capability

Component recipe

Native view

Components

Components shown as product surfaces, not isolated decorations.

Explore real app compositions for actions, profile surfaces, forms, and sheets. Each preview is paired with React Native code.

Button Variants

Sizes

screens/HomeScreen.tsx

1import { View, StyleSheet } from 'react-native';2import { Ionicons } from '@expo/vector-icons';3import { Button, IconButton, FAB } from 'reactnatively';45export function ActionBar({ onNotify, onCreate }) {6  return (7    <View style={styles.row}>8      <Button variant="solid" color="primary" size="lg">9        Get Started10      </Button>1112      <Button variant="glass" size="lg">13        Learn More14      </Button>1516      <Button variant="outline" size="lg">17        Cancel18      </Button>1920      <IconButton21        icon={<Ionicons name="notifications-outline" size={20} color="#fff" />}22        variant="glass"23        onPress={onNotify}24        accessibilityLabel="Open notifications"25      />2627      <FAB28        icon={<Ionicons name="add" size={24} color="#fff" />}29        color="#6366f1"30        onPress={onCreate}31      />32    </View>33  );34}

Code

Developer workflow first. Visual system second.

Start with a provider and typed components, then compose screens using normal React Native primitives, StyleSheet, Reanimated, and Expo APIs. The framework adds consistency without hiding the platform.

80+ production-ready React Native components

Expo SDK 50+ compatible, zero native config

Elevation system (0–5) with automatic blur & shadow

Spring-physics press & entrance animations built in

Full TypeScript inference — IntelliSense on every prop

terminal

1# 1. Install the framework2pnpm add reactnatively react-native-reanimated expo-blur34# 2. Add Reanimated plugin to babel.config.js (must be last)5#    plugins: ['react-native-reanimated/plugin']67# 3. Wrap your root layout8#    <ReactnativelyProvider>9#      <Stack />10#    </ReactnativelyProvider>

Performance

Premium visuals need a rendering budget. This one has one.

Glass surfaces resolve through capability checks, elevation recipes, and reduced-motion policy so the UI can stay expressive without surprising lower-end devices.

< 2ms

Glass resolve time

per surface render

80+

Components

glass-native from the ground up

Elevation levels

with automatic rendering recipes

Runtime CSS

pure StyleSheet-based rendering