@onlynative/inertia-gradients 0.0.1-alpha.3 → 0.0.1-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +96 -0
  3. package/package.json +16 -16
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 OnlyNative
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,96 @@
1
+ # @onlynative/inertia-gradients
2
+
3
+ [![npm](https://img.shields.io/npm/v/@onlynative/inertia-gradients.svg)](https://www.npmjs.com/package/@onlynative/inertia-gradients)
4
+ [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
5
+
6
+ Animatable linear gradient primitive for [`@onlynative/inertia`](../core), built on [`expo-linear-gradient`](https://docs.expo.dev/versions/latest/sdk/linear-gradient/).
7
+
8
+ `MotionLinearGradient` accepts the same `initial` / `animate` / `transition` shape as the core `Motion.*` primitives, with animatable keys for `colors`, `start`, `end`, and `locations`.
9
+
10
+ ## Install
11
+
12
+ ```sh
13
+ pnpm add @onlynative/inertia-gradients expo-linear-gradient
14
+ ```
15
+
16
+ `expo-linear-gradient` works in bare React Native projects as well as Expo — no `expo-modules-core` runtime is required.
17
+
18
+ **Peer dependencies:** `@onlynative/inertia` (workspace or installed), `react >=19.0.0`, `react-native >=0.81.0`, `react-native-reanimated >=4.0.0`, `expo-linear-gradient >=14.0.0`.
19
+
20
+ ## Usage
21
+
22
+ ```tsx
23
+ import { StyleSheet } from 'react-native'
24
+ import { MotionLinearGradient } from '@onlynative/inertia-gradients'
25
+
26
+ export function Hero() {
27
+ return (
28
+ <MotionLinearGradient
29
+ colors={['#0f172a', '#1e293b']}
30
+ animate={{ colors: ['#7c3aed', '#0ea5e9'] }}
31
+ transition={{ type: 'timing', duration: 600 }}
32
+ style={StyleSheet.absoluteFill}
33
+ />
34
+ )
35
+ }
36
+ ```
37
+
38
+ The static `colors` prop sets the visual on first render and **locks the slot count** for the component's lifetime. To resize the gradient (e.g. swap a 2-stop for a 3-stop), remount via `key={...}`. The component throws in dev if `colors.length` changes between renders.
39
+
40
+ ## Animatable props
41
+
42
+ | Key | Shape | Notes |
43
+ | ----------- | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
44
+ | `colors` | `readonly string[]` | Element-wise color interpolation via Reanimated's color setter. Length must match the static `colors` prop. |
45
+ | `start` | `{ x: number, y: number }` | Normalized `[0, 1]` coordinates. `x` and `y` animate independently. |
46
+ | `end` | `{ x: number, y: number }` | Same shape as `start`. |
47
+ | `locations` | `readonly number[]` | Optional stop positions. If supplied at mount, must remain supplied and same-length as `colors` for the component's lifetime. |
48
+
49
+ Per-property transitions work just like the core primitives:
50
+
51
+ ```tsx
52
+ <MotionLinearGradient
53
+ colors={['#000', '#000']}
54
+ animate={{
55
+ colors: ['#7c3aed', '#0ea5e9'],
56
+ start: { x: 0, y: 0 },
57
+ end: { x: 1, y: 1 },
58
+ }}
59
+ transition={{
60
+ colors: { type: 'timing', duration: 600 },
61
+ start: { type: 'spring', tension: 80, friction: 14 },
62
+ end: { type: 'spring', tension: 80, friction: 14 },
63
+ }}
64
+ />
65
+ ```
66
+
67
+ ## `initial`
68
+
69
+ Pass `initial` to override the mount-frame values (so the component starts somewhere other than the static props), or `initial={false}` to start at the `animate` target with no mount animation.
70
+
71
+ ```tsx
72
+ <MotionLinearGradient
73
+ colors={['#111', '#222']}
74
+ initial={{ colors: ['#000', '#000'] }} // fade up from black
75
+ animate={{ colors: ['#7c3aed', '#0ea5e9'] }}
76
+ />
77
+ ```
78
+
79
+ ## Reduced motion
80
+
81
+ `MotionLinearGradient` participates in `<MotionConfig reducedMotion>` the same way the core primitives do — when the OS reduce-motion setting is on, transitions resolve as direct assignment instead of `withSpring` / `withTiming`.
82
+
83
+ ## What this primitive doesn't do (v0.2)
84
+
85
+ - **Radial / conic gradients** — linear-only for v0.2.
86
+ - **Slot-count resize** — the colors array length is locked at mount.
87
+ - **Per-stop sequence keyframes** — `animate.colors` accepts a single target array, not nested arrays. For chained gradient transitions, drive the target through state.
88
+
89
+ ## Documentation
90
+
91
+ - Full docs: [https://onlynative.github.io/inertia/docs/gradients](https://onlynative.github.io/inertia/docs/gradients)
92
+ - Core library: [`@onlynative/inertia`](../core)
93
+
94
+ ## License
95
+
96
+ [MIT](./LICENSE) © OnlyNative
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onlynative/inertia-gradients",
3
- "version": "0.0.1-alpha.3",
3
+ "version": "0.0.1-alpha.4",
4
4
  "description": "Animated linear gradient primitive for @onlynative/inertia, built on expo-linear-gradient.",
5
5
  "license": "MIT",
6
6
  "author": "OnlyNative",
@@ -47,25 +47,14 @@
47
47
  "!**/__tests__",
48
48
  "!**/*.test.*"
49
49
  ],
50
- "scripts": {
51
- "build": "tsup",
52
- "dev": "tsup --watch",
53
- "typecheck": "tsc --noEmit",
54
- "test": "jest",
55
- "size": "size-limit",
56
- "size:why": "size-limit --why",
57
- "lint": "eslint src",
58
- "clean": "rm -rf dist .turbo *.tsbuildinfo"
59
- },
60
50
  "peerDependencies": {
61
- "@onlynative/inertia": "workspace:*",
62
51
  "expo-linear-gradient": ">=14.0.0",
63
52
  "react": ">=19.0.0",
64
53
  "react-native": ">=0.81.0",
65
- "react-native-reanimated": ">=4.0.0"
54
+ "react-native-reanimated": ">=4.0.0",
55
+ "@onlynative/inertia": "0.0.1-alpha.3"
66
56
  },
67
57
  "devDependencies": {
68
- "@onlynative/inertia": "workspace:*",
69
58
  "@react-native/babel-preset": "^0.81.5",
70
59
  "@size-limit/preset-small-lib": "^11.1.0",
71
60
  "@testing-library/react-native": "^13.3.3",
@@ -79,9 +68,20 @@
79
68
  "react-test-renderer": "19.1.0",
80
69
  "size-limit": "^11.1.0",
81
70
  "tsup": "^8.3.5",
82
- "typescript": "^5.7.3"
71
+ "typescript": "^5.7.3",
72
+ "@onlynative/inertia": "0.0.1-alpha.3"
83
73
  },
84
74
  "publishConfig": {
85
75
  "access": "public"
76
+ },
77
+ "scripts": {
78
+ "build": "tsup",
79
+ "dev": "tsup --watch",
80
+ "typecheck": "tsc --noEmit",
81
+ "test": "jest",
82
+ "size": "size-limit",
83
+ "size:why": "size-limit --why",
84
+ "lint": "eslint src",
85
+ "clean": "rm -rf dist .turbo *.tsbuildinfo"
86
86
  }
87
- }
87
+ }