one

library0.2.1jsnpmunverified

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.

web-framework

npm install one

package ↗homepage ↗

INSTALL

IMPORT

SIG · ONE

one

web-frameworkjavascriptv0.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

config

✓ import { defineConfig } from '@one/vite-plugin'; export default defineConfig({});

✗ const { defineConfig } = require('@one/vite-plugin');

Configuration is typically handled via a Vite plugin, which is ESM-only. The framework is designed around `defineConfig` for type-safety and best practices.

App

✓ import { App } from 'one'; function MyRootApp() { return <App initialRoute='/'>...</App>; }

✗ import App from 'one'; // One typically provides a named export for the root App component.

The primary application entry component is typically a named export, allowing for specific framework-level configurations or wrappers.

useLoader

✓ import { useLoader } from 'one/server'; function MyComponent() { const data = useLoader((ctx) => { // Server-side data fetching logic return { message: 'Hello from loader!' }; }); return <p>{data.message}</p>; }

✗ import { useLoader } from 'one'; // Incorrect subpath for server-side utilities.

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.

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.

import { App, Text, View } from 'one'; import React from 'react'; // Define a root layout component that can adapt to web and native function RootLayout({ children }: { children: React.ReactNode }) { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, backgroundColor: '#f0f0f0', }}> <Text style={{ fontSize: 24, fontWeight: 'bold', marginBottom: 20, color: '#333' }}> Welcome to One! </Text> {children} </View> ); } // Define a page component, e.g., for '/' function HomePage() { return ( <View> <Text style={{ fontSize: 18, color: '#555' }}> This is a hybrid web and native app. </Text> <Text style={{ fontSize: 16, marginTop: 10, color: '#777' }}> Edit src/app/index.tsx to get started. </Text> </View> ); } // One framework entry point export default function OneApp() { return ( <App initialRoute="/"> <RootLayout> {/* File-system based routing expects components in `src/app` */} {/* For demonstration, we'll render HomePage directly */} <HomePage /> </RootLayout> </App> ); }

Debug

Known issues

breakingOne 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.

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.

affects: >=1.0.0

gotchaThe `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.

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`).

affects: *

breakingReact 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.

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.

affects: >=1.0.0

gotchaAs a new framework, 'one' is likely to have a rapid release cycle, potentially introducing frequent minor breaking changes or API shifts as it matures.

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.

affects: <2.0.0

Errors

Common errors & fixes

Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.

This error indicates that React Native's native module linking for `react-native-screens` failed, often due to improper caching or incorrect native build.

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.

Something went wrong installing the "sharp" module. Cannot find module '../build/Release/sharp-linux-x64.node'

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.

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.

TypeError: (0, _reactNativeScreens.useScreens) is not a function

This error suggests a version mismatch or incorrect import/usage of `react-native-screens` or related navigation libraries, often after an update.

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.

Upgrade

Version history

0.2.1latest on npm

Audit

Dependencies

reactrequiredCore React library for UI development, required for all components.

react-domrequiredEntry point to the DOM and server renderers for React, used for web targets.

react-nativerequiredCore library for building native mobile applications with React.

sharprequiredHigh-performance image processing library, often used for build-time image optimization or server-side image manipulation. Known for complex installation due to native binaries.

react-native-screensrequiredProvides native primitives to represent screens instead of plain `View`s, improving performance for navigation.

react-native-workletsrequiredEnables running JavaScript code on a separate UI thread for smooth animations and gestures.

react-native-reanimatedrequiredPowerful animation library for React Native, leveraging worklets for performance.

@react-navigation/drawerrequiredProvides a customizable drawer navigation solution for React Native apps, part of the React Navigation suite.

@react-navigation/nativerequiredCore navigation library for React Native, integrating with platform navigation systems.

react-native-gesture-handlerrequiredNative-driven gesture management for React Native, enabling complex touch interactions.

react-native-safe-area-contextrequiredExposes device safe area insets to React Native for consistent UI across devices.

Agent activity

4 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/one ↗

homepagehttps://eon.dev ↗