Features

One is a complete solution to cross-platform development with React and React Native. We're experimenting with a features document to offer a high-level overview of One.

See the Status document for the status of features.

Vite

The One Vite Plugin automates away much of the setup & boilerplate required for cross-platform React Native & web development.

Out of the box, the One Vite plugin does the following:

• Sets up a file system router in the ./app folder
• Generates types for routes and updates them when routes change
• Enables loaders and tree shakes them out on client using babel-dead-code-elimination
• Supports loader HMR with watchFile for instant content updates during development
• Enables the deps option that allows for easy node_module patching
• Uses React 19 for both native and web
• Adds vite-tsconfig-paths plugin, unless it detects you’ve added it already
• Loads .env file into process.env before running anything using dotenv
• Adds a well-configured tsconfig.json if it doesn’t exist
• Enables ?imagedata imports for automatic image dimensions and blur placeholders
• Configures native to resolve “react-native” export field in package.json
• Configures platform-specific extensions web|native|ios|android for extensions ts|tsx|js|mjs, eg .ios.ts
• Adds a ssr-css plugin that enables perfect dev-mode CSS on first load, matching production
• Configures a wide variety of optimizeDeps presets for React Native library compatibility
• Patches a large number of known-bad node_modules to work with Vite
• Ensures optimized deps across all routes are found before first load, avoiding hard reloads and slow loads in development mode

Universal

• Uses React Navigation routing and truly native layouts
• Adds loaders that work on native and web
• Adds layout loaders - layouts can export loader() just like pages
• Adds useMatches hook to access all matched route data
• Adds useMatch to find a specific route’s loader data by route ID
• Adds usePageMatch to get the current page’s match
• Adds a Link component for navigation
• Adds useSearchParams for URLSearchParams API
• Adds a wide variety of hooks for routing
• Exports SafeAreaView and useSafeAreaInsets with an optimized web implementation
• Adds <Protected /> component for declarative route guarding
• Adds useBlocker hook for blocking navigation with confirmation
• Adds route validation with validateParams and validateRoute

Native

• Implements a custom bundle output with React Native compatible commonjs
• Implements custom hot reloading that works with commonjs
• Implements a custom bridge to React Native for debug logging
• Implements logic to support importing assets, like images
• Tree-shakes server code from native bundles automatically
• Auto-detects and configures NativeWind support
• Auto-detects and configures Reanimated support
• Supports Metro mode for maximum compatibility

Web

• Adds serve command that sets up a Hono server for production
• Implements SPA, SSG, and SSR style routing on a per-page and global basis
• Server rendering - find JS and CSS for all nested routes and layouts and hoists it to header to avoid waterfalls and flickering
• Smart link prefetching that predicts navigation using mouse trajectory
  • Doesn’t require up-front route map so no scaling cost
• Automatically handles scroll restoration and allows configuration
• Adds scroll position groups for independent scroll areas
• Adds route masks for displaying different URLs
• Adds an easy redirects option
• Adds generateStaticParams export for SSG and SSR routes
• Implements API routes
• Adds a page loading progress bar
• Swaps query-string and url-parse libraries to save ~20Kb
• Adds a Redirect component
• Supports middleware for request interception and shared context
• Deploy to Vercel or Cloudflare workers with a single config option
• Automatic sitemap generation with per-route overrides

Devtools

• Dev Tools Panel - Press Alt+Space to open the spotlight menu with SEO Preview, Route Info, Loader Timing, and Errors panels
• Source Inspector - Hold Shift+Cmd (Mac) or Shift+Ctrl (Windows/Linux) and click any element to open in your editor

Extras

• Exports a variety of helpful utility functions
• Analyze your web client-side bundle with VXRN_ANALYZE_BUNDLE=1
• Guide for MDX support
• Guide for light and dark mode
• Guide for optimized images with ?imagedata imports

Edit this page on GitHub.