@symbiote-native/linear-gradient 0.0.0 → 0.1.0
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.
- package/README.md +172 -18
- package/build/angular/linear-gradient/index.android.js +3 -1
- package/build-ngc/angular/linear-gradient/index.android.js +6 -2
- package/build-ngc/angular/linear-gradient/index.android.js.map +1 -1
- package/build-ngc/core/linear-gradient.js.map +1 -1
- package/package.json +15 -15
- package/src/angular/linear-gradient/index.android.ts +3 -1
- package/src/core/linear-gradient.ts +1 -2
package/README.md
CHANGED
|
@@ -4,40 +4,194 @@
|
|
|
4
4
|
[SymbioteNative](../../README.md) adapter: React, Vue, Svelte, Solid and Angular. A native view that
|
|
5
5
|
paints a multi-color gradient behind its children.
|
|
6
6
|
|
|
7
|
+
Built the same way as [`@symbiote-native/clipboard`](../clipboard)'s `ClipboardPasteButton`, an
|
|
8
|
+
`expo-modules-core` native view reached through `requireNativeViewManager` (see the
|
|
9
|
+
`symbiote-expo-native-module` project skill: why `expo-modules-core` is depended on directly and never
|
|
10
|
+
the `expo` meta-package, why the upstream JS is hand-ported into `core/`, and how autolinking finds the
|
|
11
|
+
native module). One render function in `core/` returns a descriptor and every adapter only turns it into
|
|
12
|
+
its own element.
|
|
13
|
+
|
|
7
14
|
## Install
|
|
8
15
|
|
|
16
|
+
**New app:**
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npx @symbiote-native/cli new my-app --linear-gradient
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
**Existing SymbioteNative app:**
|
|
23
|
+
|
|
9
24
|
```bash
|
|
10
|
-
npx @symbiote-native/cli
|
|
11
|
-
|
|
25
|
+
npx @symbiote-native/cli add --linear-gradient
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Either way: installs `@symbiote-native/linear-gradient` and wires the native autolinking automatically,
|
|
29
|
+
see [`@symbiote-native/cli`](../cli).
|
|
30
|
+
|
|
31
|
+
<details>
|
|
32
|
+
<summary>Manual install (no CLI - installing and wiring native autolinking by hand)</summary>
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm install @symbiote-native/linear-gradient
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Depends on `expo-linear-gradient` and `expo-modules-core` directly (regular dependencies, pinned to exact
|
|
39
|
+
versions, since this package's `core/` is hand-ported against one specific native API shape).
|
|
40
|
+
Never install `expo-linear-gradient` yourself, and never add the `expo` package to this project: it bundles
|
|
41
|
+
its own Metro/Babel pipeline that conflicts with this project's own.
|
|
42
|
+
|
|
43
|
+
### Required one-time step: native autolinking wiring
|
|
44
|
+
|
|
45
|
+
`expo-linear-gradient`'s native code is discovered by `expo-modules-autolinking`, not by RN's own
|
|
46
|
+
`react-native.config.cjs` mechanism. Wire it into the native host app **once**, it covers this package
|
|
47
|
+
and every other `expo-modules-core` package with zero further changes. The steps and the
|
|
48
|
+
mechanics behind them are in the `symbiote-expo-native-module` skill and in
|
|
49
|
+
[`@symbiote-native/network`](../network)'s README; the reference app is `examples/expo-react`.
|
|
50
|
+
|
|
51
|
+
</details>
|
|
52
|
+
|
|
53
|
+
## Shape
|
|
54
|
+
|
|
12
55
|
```
|
|
56
|
+
src/core/ linear-gradient.ts - props, point normalization, the locations check and
|
|
57
|
+
renderLinearGradient (iOS: the native view is the root, Android: a View that
|
|
58
|
+
carries style and children over an absolute-fill native leaf).
|
|
59
|
+
src/react/ @symbiote-native/linear-gradient/react - LinearGradient
|
|
60
|
+
src/vue/ @symbiote-native/linear-gradient/vue - LinearGradient
|
|
61
|
+
src/svelte/ @symbiote-native/linear-gradient/svelte - LinearGradient (.svelte)
|
|
62
|
+
src/solid/ @symbiote-native/linear-gradient/solid - LinearGradient
|
|
63
|
+
src/angular/linear-gradient/ @symbiote-native/linear-gradient/angular - LinearGradient
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Angular cannot spell a dynamic tag name or project into a descriptor-built node, so it keeps one
|
|
67
|
+
component per platform (`index.ios.ts` / `index.android.ts`) with the same inputs.
|
|
13
68
|
|
|
14
|
-
|
|
15
|
-
per app. Never install `expo-linear-gradient` or the `expo` meta-package yourself.
|
|
69
|
+
## Use it
|
|
16
70
|
|
|
17
|
-
|
|
71
|
+
### React
|
|
18
72
|
|
|
19
73
|
```tsx
|
|
20
74
|
import { LinearGradient } from '@symbiote-native/linear-gradient/react';
|
|
21
75
|
|
|
22
|
-
<LinearGradient colors={['#4c669f', '#192f6a']} start={{ x: 0, y: 0 }} end={
|
|
76
|
+
<LinearGradient colors={['#4c669f', '#192f6a']} start={{ x: 0, y: 0 }} end={[1, 1]}>
|
|
23
77
|
<Text>Over the gradient</Text>
|
|
24
78
|
</LinearGradient>;
|
|
25
79
|
```
|
|
26
80
|
|
|
27
|
-
|
|
28
|
-
(Android), `style` and the View accessibility surface. Children come through the framework's own
|
|
29
|
-
mechanism (`children`, default slot, snippet, `<ng-content>`).
|
|
81
|
+
### Vue
|
|
30
82
|
|
|
31
|
-
|
|
83
|
+
```vue
|
|
84
|
+
<script setup lang="ts">
|
|
85
|
+
import { LinearGradient } from '@symbiote-native/linear-gradient/vue';
|
|
86
|
+
</script>
|
|
32
87
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
88
|
+
<template>
|
|
89
|
+
<LinearGradient :colors="['#4c669f', '#192f6a']" :end="[1, 1]">
|
|
90
|
+
<text>Over the gradient</text>
|
|
91
|
+
</LinearGradient>
|
|
92
|
+
</template>
|
|
93
|
+
```
|
|
37
94
|
|
|
38
|
-
Angular
|
|
39
|
-
|
|
95
|
+
### Angular
|
|
96
|
+
|
|
97
|
+
```ts
|
|
98
|
+
import { LinearGradient } from '@symbiote-native/linear-gradient/angular';
|
|
99
|
+
|
|
100
|
+
@Component({
|
|
101
|
+
imports: [LinearGradient],
|
|
102
|
+
template: `<LinearGradient [colors]="colors" [end]="[1, 1]"><text>Over the gradient</text></LinearGradient>`,
|
|
103
|
+
})
|
|
104
|
+
export class Card {
|
|
105
|
+
readonly colors = ['#4c669f', '#192f6a'];
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Svelte
|
|
110
|
+
|
|
111
|
+
```svelte
|
|
112
|
+
<script lang="ts">
|
|
113
|
+
import { LinearGradient } from '@symbiote-native/linear-gradient/svelte';
|
|
114
|
+
</script>
|
|
115
|
+
|
|
116
|
+
<LinearGradient colors={['#4c669f', '#192f6a']} end={[1, 1]}>
|
|
117
|
+
<text>Over the gradient</text>
|
|
118
|
+
</LinearGradient>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
### Solid
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
import { LinearGradient } from '@symbiote-native/linear-gradient/solid';
|
|
125
|
+
|
|
126
|
+
<LinearGradient colors={['#4c669f', '#192f6a']} end={[1, 1]}>
|
|
127
|
+
<text>Over the gradient</text>
|
|
128
|
+
</LinearGradient>;
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
## API
|
|
132
|
+
|
|
133
|
+
```ts
|
|
134
|
+
<LinearGradient
|
|
135
|
+
colors={[ColorValue, ColorValue, ...ColorValue[]]} // two or more, one color is style.backgroundColor
|
|
136
|
+
locations?={number[]} // 0..1 ascending, same length as colors
|
|
137
|
+
start?={{ x, y } | [x, y]} // default { x: 0.5, y: 0 }
|
|
138
|
+
end?={{ x, y } | [x, y]} // default { x: 0.5, y: 1 }
|
|
139
|
+
dither?={boolean} // Android only, default true
|
|
140
|
+
style? testID? nativeID? onLayout? ...View accessibility and responder props
|
|
141
|
+
/>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
Plus `ILinearGradientProps` and `ILinearGradientPoint`, hand-ported from upstream's `LinearGradient.tsx`.
|
|
145
|
+
Children come through the framework's own mechanism (`children`, default slot, snippet,
|
|
146
|
+
`<ng-content>`).
|
|
147
|
+
|
|
148
|
+
## Notes
|
|
149
|
+
|
|
150
|
+
- **Children go inside the gradient.** It paints behind them. On iOS the native gradient is the root
|
|
151
|
+
view. On Android the root is a plain `View` that carries your `style`, with the native gradient
|
|
152
|
+
filling it as a child, so `children`, `onLayout` and touches behave as on any `View`.
|
|
153
|
+
- **Rounded corners go in `style`.** `borderRadius` and the four per-corner radii are read from
|
|
154
|
+
`style` and handed to the native gradient, because React Native does not clip a native view by a
|
|
155
|
+
radius on its own.
|
|
156
|
+
- **A bad value warns instead of throwing.** A `start` or `end` that is not `[x, y]` or `{ x, y }` is
|
|
157
|
+
ignored, and a `locations` array of the wrong length is cut to the number of `colors`. Both log a
|
|
158
|
+
warning and the gradient still draws.
|
|
159
|
+
- **`colors` takes anything `style` colors take.** Names, hex, `rgb()`/`rgba()` and `hsl()` all go
|
|
160
|
+
through the same color processing as every other view.
|
|
161
|
+
- **Where the native view is missing, you get a plain `View`.** The package logs
|
|
162
|
+
`LinearGradient is not available on this platform` and renders your children without a gradient.
|
|
163
|
+
- **Not ported.** The web variant (`LinearGradient.web.tsx`) and `NativeLinearGradient` re-export: native only.
|
|
164
|
+
|
|
165
|
+
## Common questions
|
|
166
|
+
|
|
167
|
+
- **`transparent` to a color looks gray on iOS.** Apple platforms fade `transparent` as transparent
|
|
168
|
+
black. Fade to the same color with alpha 0 instead: `['rgba(255, 255, 255, 0)', '#ffffff']`.
|
|
169
|
+
- **Different on iOS and Android.** Do not give `start` and `end` the same point, that case is
|
|
170
|
+
reported to render differently. Use distinct points, such as `[0, 0]` and `[1, 1]`.
|
|
171
|
+
- **Rounded corners.** Put `borderRadius` (or the four per-corner radii) in `style`. Android passes
|
|
172
|
+
the radii to the native gradient by hand.
|
|
173
|
+
- **Gradient text.** Needs `@react-native-masked-view/masked-view`, a third-party React component,
|
|
174
|
+
so React adapter only. No masked view ships for Vue, Svelte, Solid or Angular.
|
|
175
|
+
- **Animating colors.** `colors` is a plain prop, so drive it from state, a signal or a rune. For a
|
|
176
|
+
smooth fade, stack two gradients and animate the `opacity` of the top one.
|
|
177
|
+
- **Slow in a long list.** Draw one gradient behind the list instead of one per row, and try
|
|
178
|
+
`dither={false}` on Android.
|
|
179
|
+
- **One color.** `colors` needs two entries, use `style.backgroundColor` for one.
|
|
180
|
+
|
|
181
|
+
Sources: [Expo docs: LinearGradient](https://docs.expo.dev/versions/latest/sdk/linear-gradient/),
|
|
182
|
+
[expo/expo#7418](https://github.com/expo/expo/issues/7418),
|
|
183
|
+
[expo/expo#25595](https://github.com/expo/expo/issues/25595),
|
|
184
|
+
[expo/expo#32934](https://github.com/expo/expo/issues/32934),
|
|
185
|
+
[expo/expo#29408](https://github.com/expo/expo/issues/29408),
|
|
186
|
+
[expo/expo#23861](https://github.com/expo/expo/issues/23861).
|
|
40
187
|
|
|
41
|
-
##
|
|
188
|
+
## Test it
|
|
42
189
|
|
|
43
|
-
The
|
|
190
|
+
No device is needed for the logic. The core tests (`src/core/*.test.ts`) replace `expo-modules-core`
|
|
191
|
+
(`requireNativeViewManager`, `Platform`) and assert the descriptor a render function returns. The
|
|
192
|
+
adapter tests (`src/{react,vue,solid,angular}/**/*.test.*`, `vitest`) render the real component over the
|
|
193
|
+
recording Fabric with an injected view config and assert the committed payload, and Svelte's
|
|
194
|
+
`*.smoke.test.ts` compile the `.svelte` files and mount them. Painting itself is verified on a device in
|
|
195
|
+
the six `examples/expo-*` canary apps (`examples/expo-react`, `examples/expo-vue-sfc`,
|
|
196
|
+
`examples/expo-vue-tsx`, `examples/expo-svelte`, `examples/expo-solid`, `examples/expo-angular`), see the
|
|
197
|
+
parent [README](../../README.md).
|
|
@@ -43,7 +43,9 @@ let LinearGradient = (() => {
|
|
|
43
43
|
imports: [DescriptorHost],
|
|
44
44
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
45
45
|
template: `@if (descriptor; as node) {
|
|
46
|
-
<symbiote-descriptor-host [node]="node"
|
|
46
|
+
<symbiote-descriptor-host [node]="node"
|
|
47
|
+
><ng-content
|
|
48
|
+
/></symbiote-descriptor-host>
|
|
47
49
|
}`,
|
|
48
50
|
})];
|
|
49
51
|
let _classDescriptor;
|
|
@@ -6,7 +6,9 @@ import * as i0 from "@angular/core";
|
|
|
6
6
|
export class LinearGradient extends LinearGradientBase {
|
|
7
7
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LinearGradient, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
8
8
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: LinearGradient, isStandalone: true, selector: "LinearGradient", usesInheritance: true, ngImport: i0, template: `@if (descriptor; as node) {
|
|
9
|
-
<symbiote-descriptor-host [node]="node"
|
|
9
|
+
<symbiote-descriptor-host [node]="node"
|
|
10
|
+
><ng-content
|
|
11
|
+
/></symbiote-descriptor-host>
|
|
10
12
|
}`, isInline: true, dependencies: [{ kind: "component", type: DescriptorHost, selector: "symbiote-descriptor-host", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11
13
|
}
|
|
12
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LinearGradient, decorators: [{
|
|
@@ -17,7 +19,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
17
19
|
imports: [DescriptorHost],
|
|
18
20
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
19
21
|
template: `@if (descriptor; as node) {
|
|
20
|
-
<symbiote-descriptor-host [node]="node"
|
|
22
|
+
<symbiote-descriptor-host [node]="node"
|
|
23
|
+
><ng-content
|
|
24
|
+
/></symbiote-descriptor-host>
|
|
21
25
|
}`,
|
|
22
26
|
}]
|
|
23
27
|
}] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.android.js","sourceRoot":"","sources":["../../../src/angular/linear-gradient/index.android.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;;AAE9C,gGAAgG;
|
|
1
|
+
{"version":3,"file":"index.android.js","sourceRoot":"","sources":["../../../src/angular/linear-gradient/index.android.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;;AAE9C,gGAAgG;AAYhG,MAAM,OAAO,cAAe,SAAQ,kBAAkB;uGAAzC,cAAc;2FAAd,cAAc,iGANf;;;;IAIR,4DANQ,cAAc;;2FAQb,cAAc;kBAX1B,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,cAAc,CAAC;oBACzB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,QAAQ,EAAE;;;;IAIR;iBACH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"linear-gradient.js","sourceRoot":"","sources":["../../src/core/linear-gradient.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,OAAO,EAAE,QAAQ,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,6BAA6B,CAAC;AAOjD,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAQjC,MAAM,CAAC,MAAM,2BAA2B,GAAG,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"linear-gradient.js","sourceRoot":"","sources":["../../src/core/linear-gradient.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@symbiote-native/linear-gradient",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "expo-linear-gradient wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, Svelte, Solid, and Angular adapters. A native view that paints a multi-color linear gradient behind its children.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"dependencies": {
|
|
69
69
|
"expo-linear-gradient": "57.0.2",
|
|
70
70
|
"expo-modules-core": "57.0.20",
|
|
71
|
-
"@symbiote-native/components": "3.
|
|
71
|
+
"@symbiote-native/components": "3.2.0"
|
|
72
72
|
},
|
|
73
73
|
"peerDependencies": {
|
|
74
74
|
"@angular/core": ">=20",
|
|
@@ -78,12 +78,12 @@
|
|
|
78
78
|
"solid-js": ">=1.9.0",
|
|
79
79
|
"svelte": ">=5.56.0",
|
|
80
80
|
"vue": ">=3.5.0",
|
|
81
|
-
"@symbiote-native/angular": "^3.
|
|
82
|
-
"@symbiote-native/
|
|
83
|
-
"@symbiote-native/
|
|
84
|
-
"@symbiote-native/solid": "^3.
|
|
85
|
-
"@symbiote-native/
|
|
86
|
-
"@symbiote-native/
|
|
81
|
+
"@symbiote-native/angular": "^3.3.0",
|
|
82
|
+
"@symbiote-native/engine": "^1.6.0",
|
|
83
|
+
"@symbiote-native/react": "^3.3.0",
|
|
84
|
+
"@symbiote-native/solid": "^3.2.0",
|
|
85
|
+
"@symbiote-native/svelte": "^3.2.0",
|
|
86
|
+
"@symbiote-native/vue": "^3.3.0"
|
|
87
87
|
},
|
|
88
88
|
"peerDependenciesMeta": {
|
|
89
89
|
"@symbiote-native/angular": {
|
|
@@ -131,13 +131,13 @@
|
|
|
131
131
|
"solid-js": "^1.9.14",
|
|
132
132
|
"svelte": "^5.56.0",
|
|
133
133
|
"typescript": "~6.0.0",
|
|
134
|
-
"@symbiote-native/angular": "3.
|
|
135
|
-
"@symbiote-native/engine": "1.
|
|
136
|
-
"@symbiote-native/
|
|
137
|
-
"@symbiote-native/
|
|
138
|
-
"@symbiote-native/
|
|
139
|
-
"@symbiote-native/
|
|
140
|
-
"@symbiote-native/
|
|
134
|
+
"@symbiote-native/angular": "3.3.0",
|
|
135
|
+
"@symbiote-native/engine": "1.6.0",
|
|
136
|
+
"@symbiote-native/react": "3.3.0",
|
|
137
|
+
"@symbiote-native/solid": "3.2.0",
|
|
138
|
+
"@symbiote-native/svelte": "3.2.0",
|
|
139
|
+
"@symbiote-native/test-utils": "0.4.7",
|
|
140
|
+
"@symbiote-native/vue": "3.3.0"
|
|
141
141
|
},
|
|
142
142
|
"scripts": {
|
|
143
143
|
"typecheck": "tsc --build",
|
|
@@ -9,7 +9,9 @@ import { LinearGradientBase } from './shared';
|
|
|
9
9
|
imports: [DescriptorHost],
|
|
10
10
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
11
11
|
template: `@if (descriptor; as node) {
|
|
12
|
-
<symbiote-descriptor-host [node]="node"
|
|
12
|
+
<symbiote-descriptor-host [node]="node"
|
|
13
|
+
><ng-content
|
|
14
|
+
/></symbiote-descriptor-host>
|
|
13
15
|
}`,
|
|
14
16
|
})
|
|
15
17
|
export class LinearGradient extends LinearGradientBase {}
|
|
@@ -27,8 +27,7 @@ export type INativeLinearGradientPoint = [x: number, y: number];
|
|
|
27
27
|
|
|
28
28
|
/** Доли размера градиента от 0 до 1, объект `{ x, y }` или пара `[x, y]` */
|
|
29
29
|
export type ILinearGradientPoint =
|
|
30
|
-
|
|
31
|
-
| INativeLinearGradientPoint;
|
|
30
|
+
{ x: number; y: number } | INativeLinearGradientPoint;
|
|
32
31
|
|
|
33
32
|
export type ILinearGradientProps = IAccessibilityProps &
|
|
34
33
|
IAriaProps &
|