@onlynative/inertia 0.0.1-alpha.0

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "@onlynative/inertia",
+  "version": "0.0.1-alpha.0",
+  "description": "Declarative animation primitives for React Native, built on react-native-reanimated.",
+  "license": "MIT",
+  "author": "OnlyNative",
+  "homepage": "https://github.com/onlynative/inertia",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/onlynative/inertia.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/onlynative/inertia/issues"
+  },
+  "keywords": [
+    "react-native",
+    "reanimated",
+    "animation",
+    "motion",
+    "expo",
+    "framer-motion",
+    "react-spring",
+    "declarative"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "react-native": "./src/index.ts",
+  "source": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "react-native": "./src/index.ts",
+      "source": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./view": {
+      "types": "./dist/motion/View.d.ts",
+      "react-native": "./src/motion/View.tsx",
+      "source": "./src/motion/View.tsx",
+      "import": "./dist/motion/View.mjs",
+      "require": "./dist/motion/View.js"
+    },
+    "./text": {
+      "types": "./dist/motion/Text.d.ts",
+      "react-native": "./src/motion/Text.tsx",
+      "source": "./src/motion/Text.tsx",
+      "import": "./dist/motion/Text.mjs",
+      "require": "./dist/motion/Text.js"
+    },
+    "./image": {
+      "types": "./dist/motion/Image.d.ts",
+      "react-native": "./src/motion/Image.tsx",
+      "source": "./src/motion/Image.tsx",
+      "import": "./dist/motion/Image.mjs",
+      "require": "./dist/motion/Image.js"
+    },
+    "./pressable": {
+      "types": "./dist/motion/Pressable.d.ts",
+      "react-native": "./src/motion/Pressable.tsx",
+      "source": "./src/motion/Pressable.tsx",
+      "import": "./dist/motion/Pressable.mjs",
+      "require": "./dist/motion/Pressable.js"
+    },
+    "./scroll-view": {
+      "types": "./dist/motion/ScrollView.d.ts",
+      "react-native": "./src/motion/ScrollView.tsx",
+      "source": "./src/motion/ScrollView.tsx",
+      "import": "./dist/motion/ScrollView.mjs",
+      "require": "./dist/motion/ScrollView.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "llms.txt",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "!**/__tests__",
+    "!**/*.test.*"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "size": "size-limit",
+    "size:why": "size-limit --why",
+    "lint": "eslint src",
+    "clean": "rm -rf dist .turbo *.tsbuildinfo"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-native": ">=0.81.0",
+    "react-native-reanimated": ">=4.0.0"
+  },
+  "devDependencies": {
+    "@react-native/babel-preset": "^0.81.5",
+    "@size-limit/preset-small-lib": "^11.1.0",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.0",
+    "jest": "^29.7.0",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-reanimated": "~4.1.1",
+    "react-test-renderer": "19.1.0",
+    "size-limit": "^11.1.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/config/MotionConfig.tsx

@@ -0,0 +1,30 @@
+import { type ReactNode, useMemo } from 'react'
+import {
+  MotionConfigContext,
+  type MotionConfigValue,
+  type ReducedMotion,
+} from './MotionConfigContext'
+
+/**
+ * Provider that controls how descendant Motion primitives respond to
+ * reduced-motion preferences. Wrap the root of your app once with the
+ * default (`reducedMotion="user"`) to respect the OS accessibility setting,
+ * or scope a subtree with `'always'` / `'never'` for specific use cases.
+ */
+export function MotionConfig({
+  reducedMotion = 'user',
+  children,
+}: {
+  reducedMotion?: ReducedMotion
+  children: ReactNode
+}) {
+  const value = useMemo<MotionConfigValue>(
+    () => ({ reducedMotion }),
+    [reducedMotion],
+  )
+  return (
+    <MotionConfigContext.Provider value={value}>
+      {children}
+    </MotionConfigContext.Provider>
+  )
+}

package/src/config/MotionConfigContext.ts

@@ -0,0 +1,53 @@
+import { createContext, useContext } from 'react'
+import { useReducedMotion } from 'react-native-reanimated'
+
+/**
+ * How descendant Motion primitives should treat reduced-motion preferences.
+ *
+ * - `'user'` (default): defer to the OS accessibility setting via
+ *   Reanimated's `useReducedMotion()`. This is the only value that respects
+ *   user choice and is the right default for app-level wrappers.
+ * - `'never'`: animate regardless of OS setting. Use sparingly — e.g. for
+ *   onboarding transitions you've decided are essential.
+ * - `'always'`: never animate, regardless of OS setting. Useful for tests
+ *   and snapshots.
+ */
+export type ReducedMotion = 'user' | 'never' | 'always'
+
+export interface MotionConfigValue {
+  reducedMotion: ReducedMotion
+}
+
+/**
+ * Default config used when a Motion primitive is rendered without a
+ * `<MotionConfig>` ancestor. `'user'` means respect the OS setting.
+ */
+export const DEFAULT_MOTION_CONFIG: MotionConfigValue = {
+  reducedMotion: 'user',
+}
+
+export const MotionConfigContext = createContext<MotionConfigValue>(
+  DEFAULT_MOTION_CONFIG,
+)
+
+/**
+ * Read the active `<MotionConfig>` from a descendant. Returns the default
+ * (`'user'`) when no provider is present.
+ */
+export function useMotionConfig(): MotionConfigValue {
+  return useContext(MotionConfigContext)
+}
+
+/**
+ * Resolve the active reduced-motion mode to a boolean. `'user'` consults
+ * Reanimated's OS-backed hook; `'always'` / `'never'` shortcut. Motion
+ * primitives call this to decide whether to swap transitions for
+ * `no-animation`.
+ */
+export function useShouldReduceMotion(): boolean {
+  const { reducedMotion } = useMotionConfig()
+  const osReduced = useReducedMotion()
+  if (reducedMotion === 'never') return false
+  if (reducedMotion === 'always') return true
+  return osReduced
+}

package/src/config/index.ts

@@ -0,0 +1,9 @@
+export { MotionConfig } from './MotionConfig'
+export {
+  MotionConfigContext,
+  DEFAULT_MOTION_CONFIG,
+  useMotionConfig,
+  useShouldReduceMotion,
+  type MotionConfigValue,
+  type ReducedMotion,
+} from './MotionConfigContext'

package/src/index.ts

@@ -0,0 +1,49 @@
+/**
+ * `@onlynative/inertia` — declarative animation primitives for React Native.
+ *
+ * v0.1 surface: `Motion.View` / `Motion.Text` / `Motion.Image` /
+ * `Motion.Pressable` / `Motion.ScrollView`, with `initial` / `animate` /
+ * `exit` / `transition` / `variants` / `gesture` / `controller` /
+ * `onAnimationEnd` props. Sequences, repeats (single-value and
+ * sequence-level), spring / timing / decay / no-animation transitions,
+ * and `<Presence>` for mount / unmount transitions all in scope.
+ * `<MotionConfig reducedMotion>` gates motion against the OS setting.
+ */
+export {
+  Motion,
+  MotionView,
+  MotionText,
+  MotionImage,
+  MotionPressable,
+  MotionScrollView,
+  createMotionComponent,
+} from './motion'
+export { MotionConfig, useMotionConfig, useShouldReduceMotion } from './config'
+export type { MotionConfigValue, ReducedMotion } from './config'
+export { Presence, usePresence } from './presence'
+export type { PresenceContextValue } from './presence'
+export {
+  resolveTransition,
+  resolveAnimatableValue,
+  ensureWorkletEasing,
+} from './transitions'
+export { useVariants } from './values'
+export type {
+  AnimatableValue,
+  AnimateStyle,
+  AnimationCallbackInfo,
+  DecayTransition,
+  GestureSubStates,
+  MotionComponent,
+  MotionProps,
+  NoAnimationTransition,
+  PerPropertyTransition,
+  RepeatConfig,
+  SequenceStep,
+  SpringTransition,
+  TimingTransition,
+  Transition,
+  TransitionConfig,
+  VariantController,
+  VariantsMap,
+} from './types'

package/src/motion/Image.tsx

@@ -0,0 +1,9 @@
+import { Image } from 'react-native'
+import { createMotionComponent } from './createMotionComponent'
+
+/**
+ * Animatable `Image`. Inherits `Image`'s prop surface, with `animate` /
+ * `initial` / `exit` / `transition` typed against `ImageStyle` (so
+ * `tintColor` is accepted on `animate` here, but rejected on `Motion.View`).
+ */
+export const MotionImage = createMotionComponent(Image)

package/src/motion/Pressable.tsx

@@ -0,0 +1,12 @@
+import { Pressable } from 'react-native'
+import { createMotionComponent } from './createMotionComponent'
+
+/**
+ * Animatable `Pressable`. The `gesture` prop's `pressed` sub-state hooks into
+ * Pressable's native `onPressIn` / `onPressOut` via the factory's handler
+ * composition, picking up touch slop and accessibility semantics for free.
+ *
+ * Note: the function-style `style={(state) => ...}` Pressable form is not
+ * supported. Drive press-state styling through `gesture.pressed` instead.
+ */
+export const MotionPressable = createMotionComponent(Pressable)

package/src/motion/ScrollView.tsx

@@ -0,0 +1,9 @@
+import { ScrollView } from 'react-native'
+import { createMotionComponent } from './createMotionComponent'
+
+/**
+ * Animatable `ScrollView`. Animations apply to the scroll container itself —
+ * useful for entrance transforms or fades on the whole list. Scroll-position
+ * driven animation (`useScroll`) lands in the values layer.
+ */
+export const MotionScrollView = createMotionComponent(ScrollView)

package/src/motion/Text.tsx

@@ -0,0 +1,8 @@
+import { Text } from 'react-native'
+import { createMotionComponent } from './createMotionComponent'
+
+/**
+ * Animatable `Text`. Inherits `Text`'s prop surface, with `animate` /
+ * `initial` / `exit` / `transition` typed against `TextStyle`.
+ */
+export const MotionText = createMotionComponent(Text)

package/src/motion/View.tsx

@@ -0,0 +1,8 @@
+import { View } from 'react-native'
+import { createMotionComponent } from './createMotionComponent'
+
+/**
+ * Animatable `View`. Inherits `View`'s prop surface, with `animate` /
+ * `initial` / `exit` / `transition` typed against `ViewStyle`.
+ */
+export const MotionView = createMotionComponent(View)