{"id":17854,"library":"one","title":"One React Framework","description":"One is an innovative React framework designed to unify web and native application development from a single codebase, leveraging Vite as its core bundler for both environments. Currently at version 1.15.10, it integrates with React 19.2.0 and React Native 0.83.2. This framework aims to simplify full-stack development by providing features like typed file-system routing, per-page render modes (SPA, SSR, SSG), and loaders, abstracting away complex platform-specific configurations and build processes. Its key differentiator is a focus on a cohesive, performant developer experience for hybrid apps, aiming to replace traditional setups involving Metro for native and separate web frameworks. One originated from the experience of building cross-platform apps with Tamagui Takeout and at Uniswap, highlighting its practical, production-oriented approach.","status":"active","version":"1.15.10","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install one","lang":"bash","label":"npm"},{"cmd":"yarn add one","lang":"bash","label":"yarn"},{"cmd":"pnpm add one","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library for UI development, required for all components.","package":"react","optional":false},{"reason":"Entry point to the DOM and server renderers for React, used for web targets.","package":"react-dom","optional":false},{"reason":"Core library for building native mobile applications with React.","package":"react-native","optional":false},{"reason":"High-performance image processing library, often used for build-time image optimization or server-side image manipulation. Known for complex installation due to native binaries.","package":"sharp","optional":false},{"reason":"Provides native primitives to represent screens instead of plain `View`s, improving performance for navigation.","package":"react-native-screens","optional":false},{"reason":"Enables running JavaScript code on a separate UI thread for smooth animations and gestures.","package":"react-native-worklets","optional":false},{"reason":"Powerful animation library for React Native, leveraging worklets for performance.","package":"react-native-reanimated","optional":false},{"reason":"Provides a customizable drawer navigation solution for React Native apps, part of the React Navigation suite.","package":"@react-navigation/drawer","optional":false},{"reason":"Core navigation library for React Native, integrating with platform navigation systems.","package":"@react-navigation/native","optional":false},{"reason":"Native-driven gesture management for React Native, enabling complex touch interactions.","package":"react-native-gesture-handler","optional":false},{"reason":"Exposes device safe area insets to React Native for consistent UI across devices.","package":"react-native-safe-area-context","optional":false}],"imports":[{"note":"Configuration is typically handled via a Vite plugin, which is ESM-only. The framework is designed around `defineConfig` for type-safety and best practices.","wrong":"const { defineConfig } = require('@one/vite-plugin');","symbol":"config","correct":"import { defineConfig } from '@one/vite-plugin';\n\nexport default defineConfig({});"},{"note":"The primary application entry component is typically a named export, allowing for specific framework-level configurations or wrappers.","wrong":"import App from 'one'; // One typically provides a named export for the root App component.","symbol":"App","correct":"import { App } from 'one';\n\nfunction MyRootApp() {\n  return <App initialRoute='/'>...</App>;\n}"},{"note":"Loaders, inspired by Remix, are a key feature for data fetching and are exposed from a dedicated `one/server` subpath, indicating their server-side or universal nature. Ensure explicit subpath imports for framework-specific utilities.","wrong":"import { useLoader } from 'one'; // Incorrect subpath for server-side utilities.","symbol":"useLoader","correct":"import { useLoader } from 'one/server';\n\nfunction MyComponent() {\n  const data = useLoader((ctx) => {\n    // Server-side data fetching logic\n    return { message: 'Hello from loader!' };\n  });\n  return <p>{data.message}</p>;\n}"}],"quickstart":{"code":"import { App, Text, View } from 'one';\nimport React from 'react';\n\n// Define a root layout component that can adapt to web and native\nfunction RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <View style={{\n      flex: 1,\n      justifyContent: 'center',\n      alignItems: 'center',\n      padding: 20,\n      backgroundColor: '#f0f0f0',\n    }}>\n      <Text style={{\n        fontSize: 24,\n        fontWeight: 'bold',\n        marginBottom: 20,\n        color: '#333'\n      }}>\n        Welcome to One!\n      </Text>\n      {children}\n    </View>\n  );\n}\n\n// Define a page component, e.g., for '/'\nfunction HomePage() {\n  return (\n    <View>\n      <Text style={{ fontSize: 18, color: '#555' }}>\n        This is a hybrid web and native app.\n      </Text>\n      <Text style={{ fontSize: 16, marginTop: 10, color: '#777' }}>\n        Edit src/app/index.tsx to get started.\n      </Text>\n    </View>\n  );\n}\n\n// One framework entry point\nexport default function OneApp() {\n  return (\n    <App initialRoute=\"/\">\n      <RootLayout>\n        {/* File-system based routing expects components in `src/app` */}\n        {/* For demonstration, we'll render HomePage directly */}\n        <HomePage />\n      </RootLayout>\n    </App>\n  );\n}\n","lang":"typescript","description":"This quickstart demonstrates a basic 'One' application structure, including a root layout and a simple page component, configured for both web and native environments. It highlights the use of `App`, `View`, and `Text` components within the 'One' framework."},"warnings":[{"fix":"Review the official React 19 upgrade guide and One's migration documentation. For `PropTypes`, migrate to TypeScript. For `forwardRef`, adapt to the new ref-as-prop pattern. Address `useEffect` double-invocations by ensuring proper cleanup functions.","message":"One is built on React 19, which introduces significant breaking changes including changes to `forwardRef`, removal of `PropTypes`, and stricter `useEffect` behavior in Strict Mode. Migrating existing React 18 codebases or integrating non-React 19 compatible libraries will require careful attention.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure `sharp` is installed in an environment matching the target deployment (e.g., Docker container for AWS Lambda). Use `--platform` and `--arch` flags during `npm install sharp` if cross-compiling. For strict package managers like pnpm, explicitly add `sharp` as a direct dependency (`pnpm add sharp`).","message":"The `sharp` peer dependency can lead to installation issues due to its native binaries. Errors like 'Cannot find module 'sharp-linux-x64.node'' are common, especially in CI/CD environments or when deploying to different operating systems.","severity":"gotcha","affected_versions":"*"},{"fix":"Always check the `peerDependencies` in `one`'s `package.json` for exact version ranges. Use a lockfile (`yarn.lock` or `package-lock.json`) and resolve peer dependency conflicts promptly. Running `npx expo doctor` or similar tools for bare React Native projects can help diagnose issues.","message":"React Native versions and their ecosystem dependencies (like `react-native-screens`, `react-native-reanimated`, `react-navigation`) are tightly coupled. Upgrading 'one' might necessitate specific versions of these peer dependencies, potentially causing conflicts with other parts of your React Native project if not managed carefully.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Monitor 'one' GitHub releases and Discord channels for announcements. Pin minor versions (`~1.x.x`) rather than major versions (`^1.x.x`) if stability is paramount, or prepare for more frequent updates.","message":"As a new framework, 'one' is likely to have a rapid release cycle, potentially introducing frequent minor breaking changes or API shifts as it matures.","severity":"gotcha","affected_versions":"<2.0.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"For iOS, run `cd ios && pod install`. For Android, rebuild the project: `cd android && ./gradlew clean` then `npx react-native run-android`. Sometimes clearing Metro cache (`npx react-native start --reset-cache`) and reinstalling `node_modules` helps.","cause":"This error indicates that React Native's native module linking for `react-native-screens` failed, often due to improper caching or incorrect native build.","error":"Invariant Violation: requireNativeComponent: \"RNSScreen\" was not found in the UIManager."},{"fix":"Ensure `sharp` is installed in the target environment (e.g., inside a Docker container matching your Lambda runtime for serverless deployments). On local development, try `npm rebuild sharp` or `npm install sharp --verbose`. Delete `node_modules` and `package-lock.json` (or `yarn.lock`), then reinstall.","cause":"The `sharp` library requires native binaries specific to the operating system and architecture. This error typically occurs when `sharp` was installed on a different environment than where it's being run or deployed.","error":"Something went wrong installing the \"sharp\" module. Cannot find module '../build/Release/sharp-linux-x64.node'"},{"fix":"Verify that `react-native-screens` and `@react-navigation/native` (and other `@react-navigation` packages) are compatible versions. Ensure you are importing `enableScreens()` or similar setup functions if required by your specific `react-native-screens` version, typically at the app's entry point.","cause":"This error suggests a version mismatch or incorrect import/usage of `react-native-screens` or related navigation libraries, often after an update.","error":"TypeError: (0, _reactNativeScreens.useScreens) is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}