nativ

A complete frontend stack for React Native apps that eliminates setup overhead and provides production-ready components out of the box.

What's Included

Nativ prescribes a comprehensive React Native stack with the following technologies:

Core Framework

• Expo (v54) - Platform and tooling for universal React Native apps
• React Native - Build native mobile apps using React
• TypeScript - Type-safe JavaScript development
• valtio - Proxy-state library for React with minimal boilerplate
• @tanstack/react-query - Powerful data synchronization for React with caching, background updates, and optimistic updates

Navigation & Routing

• expo-router (v6) - File-based routing for Expo apps.
  Builds upon these packages:
  • @react-navigation/native (v7) - Routing and navigation library
  • react-native-screens - Native navigation primitives
• react-native-safe-area-context - Safe area insets handling

UI & Styling

• @shopify/restyle - Type-enforced system for building UI components with theme-based styling (using @alloc/restyle fork)
• @shopify/flash-list (v2) - High-performance list component for React Native
• expo-linear-gradient - Linear gradient view component
• expo-status-bar - Status bar configuration
• expo-splash-screen - Splash screen management
• expo-system-ui - A library that allows interacting with system UI elements
• react-native-keyboard-controller - Comprehensive keyboard handling with KeyboardAvoidingView, KeyboardAwareScrollView, and more
• @react-native-masked-view/masked-view - Masked view component for creating visual effects and overlays

Animation

• moti - Universal animation library for React Native (using @alloc/moti fork).
  Builds upon these packages:
  • react-native-reanimated (v4) - High-performance animations and gestures
  • react-native-worklets - High-performance JavaScript worklets for React Native
• react-native-gesture-handler - Declarative API exposing platform native touch and gesture system

Database & ORM

• expo-sqlite - Local SQLite database access
• drizzle-orm (v1) - Lightweight TypeScript ORM with zero dependencies
• drizzle-plus - Utility extensions for Drizzle ORM including count(), nest(), caseWhen(), and JSON helpers

Utilities & Helpers

• radashi - Modern TypeScript utility toolkit (Lodash alternative)
• react-native-get-random-values - Polyfill for crypto.getRandomValues()
• react-native-hapticlabs - Advanced haptic feedback library for playing custom haptic patterns
• @react-native-async-storage/async-storage - Asynchronous, unencrypted, persistent, key-value storage system
• @react-native-community/netinfo - Network connectivity information and monitoring

Device & Platform APIs

• expo-constants - System and app constants
• expo-device - Device information and capabilities
• expo-font - Font loading and management
• expo-image - Cross-platform, performant image component with advanced features like caching and format support
• expo-linking - Deep linking and URL handling
• expo-localization - Locale and language information
• expo-notifications - Local and push notifications

Build & Development Tools

• react-compiler - Automatic memoization at compile time
• babel-preset-expo - Babel preset for Expo projects
• expo-build-properties - Configure native build properties
• expo-dev-client - Development client for custom native code

Runtime Support

• react (v19) - React library for building user interfaces
• react-dom - React DOM bindings (for web compatibility)
• @types/react - TypeScript definitions for React

Getting Started

1. Clone the template and create your project:

   git clone https://github.com/alloc/nativ-template my-project-name --depth 1
   cd my-project-name

2. Run the setup script:

   Note: Requires Node.js v23.6+ for TypeScript support

   node setup.mts

   This will:

   • Recreate the git repository
   • Install all dependencies
   • Install nativ peer dependencies
   • Clean up the setup script

   Note: After dependencies are installed, you may need to run pnpm approve-builds to approve certain dev dependencies like esbuild and puppeteer.

3. Customize your app metadata:

   Edit the following files to configure your app:

   • package.json: Update app name, description, and other metadata
   • app.json: Configure bundle identifier, native permissions, and Expo plugins
   • App Icon: Place your app icon in ./assets/images/ folder

   For app icon and splash screen guidance, see the Expo documentation.

4. Start the development server:

   pnpm start

5. Run on a platform:

   pnpm ios     # iOS
   pnpm android # Android
   pnpm web     # Web

Important

See the template readme to learn what else is available to you.

API Reference

UI Primitives

import {
  createView,
  createText,
  createImage,
  createPressable,
  createScrollView,
  createMotiView,
  createMotiPressable,
  createMotiText,
  createMotiImage,
  createMotiScrollView,
} from 'nativ/ui'
import type { Theme } from '~/theme'

const View = createView<Theme>()
const Text = createText<Theme>()
const Image = createImage<Theme>()
const Pressable = createPressable<Theme>()
const ScrollView = createScrollView<Theme>()
const MotiView = createMotiView<Theme>()
const MotiPressable = createMotiPressable<Theme>()
const MotiText = createMotiText<Theme>()
const MotiImage = createMotiImage<Theme>()
const MotiScrollView = createMotiScrollView<Theme>()

Factory functions exported by nativ/ui:

• createView -> View (Base layout component with Restyle props)
• createText -> Text (Typography with theme variants)
• createImage -> Image (Image with styling)
• createPressable -> Pressable (Touchable with styling)
• createScrollView -> ScrollView (Scrollable container with styling)
• createMotiView -> MotiView (Animated View with Moti integration)
• createMotiPressable -> MotiPressable (Animated Pressable with Moti interactions)
• createMotiText -> MotiText (Animated Text with Moti integration)
• createMotiImage -> MotiImage (Animated Image with Moti integration)
• createMotiScrollView -> MotiScrollView (Animated ScrollView with Moti integration)

Additional UI Components

import type { Theme } from '~/theme'
import {
  createLinearGradient,
  createFlashList,
  createKeyboardAvoidingView,
  createKeyboardAwareScrollView,
  createKeyboardBackgroundView,
  createKeyboardControllerView,
  createKeyboardStickyView,
} from 'nativ/ui'

const LinearGradient = createLinearGradient<Theme>()
const FlashList = createFlashList<Theme>()
const KeyboardAvoidingView = createKeyboardAvoidingView<Theme>()
const KeyboardAwareScrollView = createKeyboardAwareScrollView<Theme>()
const KeyboardBackgroundView = createKeyboardBackgroundView<Theme>()
const KeyboardControllerView = createKeyboardControllerView<Theme>()
const KeyboardStickyView = createKeyboardStickyView<Theme>()

You can find more details about each component in the links below:

• expo-linear-gradient
  • LinearGradient - Linear gradient view with from/to props (instead of start/end) for compatibility with Restyle
• @shopify/flash-list
  • FlashList - High-performance list component with Restyle props
• react-native-keyboard-controller
  • KeyboardAvoidingView - Automatically adjusts its height, position, or bottom padding based on the keyboard height to remain visible while the virtual keyboard is displayed
  • KeyboardAwareScrollView - Effortlessly handles keyboard appearance, automatically scrolls to focused TextInput and provides a native-like performance
  • KeyboardBackgroundView - Visual-only utility that replicates the background of the system keyboard
  • KeyboardControllerView - A plain react-native View with some additional methods and props
  • KeyboardStickyView - Seamlessly ensures that a designated view sticks to the keyboard's movements, maintaining visibility and interaction

License

MIT