expo-linear-gradient 12.0.1 → 12.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/CHANGELOG.md +6 -0
- package/README.md +1 -1
- package/android/build.gradle +4 -4
- package/android/src/main/java/expo/modules/lineargradient/LinearGradientModule.kt +1 -4
- package/build/LinearGradient.d.ts +2 -2
- package/build/LinearGradient.d.ts.map +1 -1
- package/build/NativeLinearGradient.types.d.ts +3 -3
- package/build/NativeLinearGradient.types.d.ts.map +1 -1
- package/build/NativeLinearGradient.web.js +14 -14
- package/build/NativeLinearGradient.web.js.map +1 -1
- package/ios/LinearGradientModule.swift +1 -5
- package/package.json +2 -2
- package/src/NativeLinearGradient.web.tsx +17 -18
package/CHANGELOG.md
CHANGED
|
@@ -10,6 +10,12 @@
|
|
|
10
10
|
|
|
11
11
|
### 💡 Others
|
|
12
12
|
|
|
13
|
+
## 12.1.0 — 2023-02-03
|
|
14
|
+
|
|
15
|
+
### 💡 Others
|
|
16
|
+
|
|
17
|
+
- On Android bump `compileSdkVersion` and `targetSdkVersion` to `33`. ([#20721](https://github.com/expo/expo/pull/20721) by [@lukmccall](https://github.com/lukmccall))
|
|
18
|
+
|
|
13
19
|
## 12.0.1 — 2022-11-02
|
|
14
20
|
|
|
15
21
|
_This version does not introduce any user-facing changes._
|
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ Provides a React component that renders a gradient view.
|
|
|
4
4
|
|
|
5
5
|
# API documentation
|
|
6
6
|
|
|
7
|
-
- [Documentation for the main branch](https://github.com/expo/expo/blob/main/docs/pages/versions/unversioned/sdk/linear-gradient.
|
|
7
|
+
- [Documentation for the main branch](https://github.com/expo/expo/blob/main/docs/pages/versions/unversioned/sdk/linear-gradient.mdx)
|
|
8
8
|
- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/linear-gradient/)
|
|
9
9
|
|
|
10
10
|
# Installation in managed Expo projects
|
package/android/build.gradle
CHANGED
|
@@ -3,7 +3,7 @@ apply plugin: 'kotlin-android'
|
|
|
3
3
|
apply plugin: 'maven-publish'
|
|
4
4
|
|
|
5
5
|
group = 'host.exp.exponent'
|
|
6
|
-
version = '12.0
|
|
6
|
+
version = '12.1.0'
|
|
7
7
|
|
|
8
8
|
buildscript {
|
|
9
9
|
def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
|
|
@@ -59,7 +59,7 @@ afterEvaluate {
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
android {
|
|
62
|
-
compileSdkVersion safeExtGet("compileSdkVersion",
|
|
62
|
+
compileSdkVersion safeExtGet("compileSdkVersion", 33)
|
|
63
63
|
|
|
64
64
|
compileOptions {
|
|
65
65
|
sourceCompatibility JavaVersion.VERSION_11
|
|
@@ -72,9 +72,9 @@ android {
|
|
|
72
72
|
|
|
73
73
|
defaultConfig {
|
|
74
74
|
minSdkVersion safeExtGet("minSdkVersion", 21)
|
|
75
|
-
targetSdkVersion safeExtGet("targetSdkVersion",
|
|
75
|
+
targetSdkVersion safeExtGet("targetSdkVersion", 33)
|
|
76
76
|
versionCode 17
|
|
77
|
-
versionName "12.0
|
|
77
|
+
versionName "12.1.0"
|
|
78
78
|
}
|
|
79
79
|
lintOptions {
|
|
80
80
|
abortOnError false
|
|
@@ -8,11 +8,8 @@ typealias ViewType = LinearGradientView
|
|
|
8
8
|
class LinearGradientModule : Module() {
|
|
9
9
|
override fun definition() = ModuleDefinition {
|
|
10
10
|
Name("ExpoLinearGradient")
|
|
11
|
-
ViewManager {
|
|
12
|
-
View { context ->
|
|
13
|
-
LinearGradientView(context)
|
|
14
|
-
}
|
|
15
11
|
|
|
12
|
+
View(LinearGradientView::class) {
|
|
16
13
|
Prop("colors") { view: ViewType, colors: IntArray ->
|
|
17
14
|
view.setColors(colors)
|
|
18
15
|
}
|
|
@@ -6,7 +6,7 @@ import { NativeLinearGradientPoint } from './NativeLinearGradient.types';
|
|
|
6
6
|
* at which the gradient starts or ends, as a fraction of the overall size of the gradient ranging
|
|
7
7
|
* from `0` to `1`, inclusive.
|
|
8
8
|
*/
|
|
9
|
-
export
|
|
9
|
+
export type LinearGradientPoint = {
|
|
10
10
|
/**
|
|
11
11
|
* A number ranging from `0` to `1`, representing the position of gradient transformation.
|
|
12
12
|
*/
|
|
@@ -16,7 +16,7 @@ export declare type LinearGradientPoint = {
|
|
|
16
16
|
*/
|
|
17
17
|
y: number;
|
|
18
18
|
} | NativeLinearGradientPoint;
|
|
19
|
-
export
|
|
19
|
+
export type LinearGradientProps = ViewProps & {
|
|
20
20
|
/**
|
|
21
21
|
* An array of colors that represent stops in the gradient. At least two colors are required
|
|
22
22
|
* (for a single-color background, use the `style.backgroundColor` prop on a `View` component).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinearGradient.d.ts","sourceRoot":"","sources":["../src/LinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAC;AAGjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAGzE;;;;GAIG;AACH,
|
|
1
|
+
{"version":3,"file":"LinearGradient.d.ts","sourceRoot":"","sources":["../src/LinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAC;AAGjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAGzE;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAC3B;IACE;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;CACX,GACD,yBAAyB,CAAC;AAG9B,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG;IAC5C;;;OAGG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACnC;;;;;OAKG;IACH,GAAG,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF;;GAEG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC;IACtE,MAAM;CAqBP"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
2
|
import { ViewProps } from 'react-native';
|
|
3
|
-
export
|
|
3
|
+
export type NativeLinearGradientProps = ViewProps & PropsWithChildren<{
|
|
4
4
|
colors: number[];
|
|
5
5
|
locations?: number[] | null;
|
|
6
6
|
startPoint?: NativeLinearGradientPoint | null;
|
|
7
7
|
endPoint?: NativeLinearGradientPoint | null;
|
|
8
8
|
}>;
|
|
9
|
-
export
|
|
10
|
-
export
|
|
9
|
+
export type getLinearGradientBackgroundImage = (colors: number[], width?: number, height?: number, locations?: number[] | null, startPoint?: NativeLinearGradientPoint | null, endPoint?: NativeLinearGradientPoint | null) => string;
|
|
10
|
+
export type NativeLinearGradientPoint = [number, number];
|
|
11
11
|
//# sourceMappingURL=NativeLinearGradient.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeLinearGradient.types.d.ts","sourceRoot":"","sources":["../src/NativeLinearGradient.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,
|
|
1
|
+
{"version":3,"file":"NativeLinearGradient.types.d.ts","sourceRoot":"","sources":["../src/NativeLinearGradient.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAC/C,iBAAiB,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;CAC7C,CAAC,CAAC;AAEL,MAAM,MAAM,gCAAgC,GAAG,CAC7C,MAAM,EAAE,MAAM,EAAE,EAChB,KAAK,CAAC,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,MAAM,EACf,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,EAC3B,UAAU,CAAC,EAAE,yBAAyB,GAAG,IAAI,EAC7C,QAAQ,CAAC,EAAE,yBAAyB,GAAG,IAAI,KACxC,MAAM,CAAC;AAEZ,MAAM,MAAM,yBAAyB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC"}
|
|
@@ -2,8 +2,10 @@ import * as React from 'react';
|
|
|
2
2
|
import { View } from 'react-native';
|
|
3
3
|
import { normalizeColor } from './normalizeColor';
|
|
4
4
|
export default function NativeLinearGradient({ colors, locations, startPoint, endPoint, ...props }) {
|
|
5
|
-
const [
|
|
6
|
-
|
|
5
|
+
const [{ height, width }, setLayout] = React.useState({
|
|
6
|
+
height: 1,
|
|
7
|
+
width: 1,
|
|
8
|
+
});
|
|
7
9
|
// TODO(Bacon): In the future we could consider adding `backgroundRepeat: "no-repeat"`. For more
|
|
8
10
|
// browser support.
|
|
9
11
|
const linearGradientBackgroundImage = React.useMemo(() => {
|
|
@@ -14,15 +16,14 @@ export default function NativeLinearGradient({ colors, locations, startPoint, en
|
|
|
14
16
|
// @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
|
|
15
17
|
{ backgroundImage: linearGradientBackgroundImage },
|
|
16
18
|
], onLayout: (event) => {
|
|
17
|
-
const {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
19
|
+
const { width, height } = event.nativeEvent.layout;
|
|
20
|
+
setLayout((oldLayout) => {
|
|
21
|
+
// don't set new layout state unless the layout has actually changed
|
|
22
|
+
if (width !== oldLayout.width || height !== oldLayout.height) {
|
|
23
|
+
return { height, width };
|
|
24
|
+
}
|
|
25
|
+
return oldLayout;
|
|
26
|
+
});
|
|
26
27
|
if (props.onLayout) {
|
|
27
28
|
props.onLayout(event);
|
|
28
29
|
}
|
|
@@ -65,13 +66,12 @@ function calculatePseudoAngle(width, height, startPoint, endPoint) {
|
|
|
65
66
|
}
|
|
66
67
|
function calculateGradientColors(colors, locations) {
|
|
67
68
|
return colors.map((color, index) => {
|
|
68
|
-
const
|
|
69
|
-
let output = hexColor;
|
|
69
|
+
const output = normalizeColor(color);
|
|
70
70
|
if (locations && locations[index]) {
|
|
71
71
|
const location = Math.max(0, Math.min(1, locations[index]));
|
|
72
72
|
// Convert 0...1 to 0...100
|
|
73
73
|
const percentage = location * 100;
|
|
74
|
-
output
|
|
74
|
+
return `${output} ${percentage}%`;
|
|
75
75
|
}
|
|
76
76
|
return output;
|
|
77
77
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeLinearGradient.web.js","sourceRoot":"","sources":["../src/NativeLinearGradient.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,
|
|
1
|
+
{"version":3,"file":"NativeLinearGradient.web.js","sourceRoot":"","sources":["../src/NativeLinearGradient.web.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { View } from 'react-native';\n\nimport { NativeLinearGradientPoint, NativeLinearGradientProps } from './NativeLinearGradient.types';\nimport { normalizeColor } from './normalizeColor';\n\nexport default function NativeLinearGradient({\n colors,\n locations,\n startPoint,\n endPoint,\n ...props\n}: NativeLinearGradientProps): React.ReactElement {\n const [{ height, width }, setLayout] = React.useState({\n height: 1,\n width: 1,\n });\n\n // TODO(Bacon): In the future we could consider adding `backgroundRepeat: \"no-repeat\"`. For more\n // browser support.\n const linearGradientBackgroundImage = React.useMemo(() => {\n return getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint, width, height);\n }, [colors, locations, startPoint, endPoint, width, height]);\n\n return (\n <View\n {...props}\n style={[\n props.style,\n // @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.\n { backgroundImage: linearGradientBackgroundImage },\n ]}\n onLayout={(event) => {\n const { width, height } = event.nativeEvent.layout;\n\n setLayout((oldLayout) => {\n // don't set new layout state unless the layout has actually changed\n if (width !== oldLayout.width || height !== oldLayout.height) {\n return { height, width };\n }\n\n return oldLayout;\n });\n\n if (props.onLayout) {\n props.onLayout(event);\n }\n }}\n />\n );\n}\n\n/**\n * Extracted to a separate function in order to be able to test logic independently.\n */\nexport function getLinearGradientBackgroundImage(\n colors: number[] | string[],\n locations?: number[] | null,\n startPoint?: NativeLinearGradientPoint | null,\n endPoint?: NativeLinearGradientPoint | null,\n width: number = 1,\n height: number = 1\n) {\n const gradientColors = calculateGradientColors(colors, locations);\n const angle = calculatePseudoAngle(width, height, startPoint, endPoint);\n return `linear-gradient(${angle}deg, ${gradientColors.join(', ')})`;\n}\n\nfunction calculatePseudoAngle(\n width: number,\n height: number,\n startPoint?: NativeLinearGradientPoint | null,\n endPoint?: NativeLinearGradientPoint | null\n) {\n const getControlPoints = (): NativeLinearGradientPoint[] => {\n let correctedStartPoint: NativeLinearGradientPoint = [0, 0];\n if (Array.isArray(startPoint)) {\n correctedStartPoint = [\n startPoint[0] != null ? startPoint[0] : 0.0,\n startPoint[1] != null ? startPoint[1] : 0.0,\n ];\n }\n let correctedEndPoint: NativeLinearGradientPoint = [0.0, 1.0];\n if (Array.isArray(endPoint)) {\n correctedEndPoint = [\n endPoint[0] != null ? endPoint[0] : 0.0,\n endPoint[1] != null ? endPoint[1] : 1.0,\n ];\n }\n return [correctedStartPoint, correctedEndPoint];\n };\n\n const [start, end] = getControlPoints();\n start[0] *= width;\n end[0] *= width;\n start[1] *= height;\n end[1] *= height;\n const py = end[1] - start[1];\n const px = end[0] - start[0];\n\n return 90 + (Math.atan2(py, px) * 180) / Math.PI;\n}\n\nfunction calculateGradientColors(colors: number[] | string[], locations?: number[] | null) {\n return colors.map((color: number | string, index: number): string | void => {\n const output = normalizeColor(color);\n if (locations && locations[index]) {\n const location = Math.max(0, Math.min(1, locations[index]));\n // Convert 0...1 to 0...100\n const percentage = location * 100;\n return `${output} ${percentage}%`;\n }\n return output;\n });\n}\n"]}
|
|
@@ -7,11 +7,7 @@ public class LinearGradientModule: Module {
|
|
|
7
7
|
public func definition() -> ModuleDefinition {
|
|
8
8
|
Name("ExpoLinearGradient")
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
View {
|
|
12
|
-
LinearGradientView()
|
|
13
|
-
}
|
|
14
|
-
|
|
10
|
+
View(LinearGradientView.self) {
|
|
15
11
|
Prop("colors") { (view: LinearGradientView, colors: [CGColor]) in
|
|
16
12
|
view.gradientLayer.setColors(colors)
|
|
17
13
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "expo-linear-gradient",
|
|
3
|
-
"version": "12.0
|
|
3
|
+
"version": "12.1.0",
|
|
4
4
|
"description": "Provides a React component that renders a gradient view.",
|
|
5
5
|
"main": "build/LinearGradient.js",
|
|
6
6
|
"types": "build/LinearGradient.d.ts",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"expo": "*"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "1815e2eaad8c753588c7b1eb74420174a28e01f4"
|
|
46
46
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { View } from 'react-native';
|
|
3
3
|
|
|
4
4
|
import { NativeLinearGradientPoint, NativeLinearGradientProps } from './NativeLinearGradient.types';
|
|
5
5
|
import { normalizeColor } from './normalizeColor';
|
|
@@ -11,9 +11,10 @@ export default function NativeLinearGradient({
|
|
|
11
11
|
endPoint,
|
|
12
12
|
...props
|
|
13
13
|
}: NativeLinearGradientProps): React.ReactElement {
|
|
14
|
-
const [
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
const [{ height, width }, setLayout] = React.useState({
|
|
15
|
+
height: 1,
|
|
16
|
+
width: 1,
|
|
17
|
+
});
|
|
17
18
|
|
|
18
19
|
// TODO(Bacon): In the future we could consider adding `backgroundRepeat: "no-repeat"`. For more
|
|
19
20
|
// browser support.
|
|
@@ -30,17 +31,16 @@ export default function NativeLinearGradient({
|
|
|
30
31
|
{ backgroundImage: linearGradientBackgroundImage },
|
|
31
32
|
]}
|
|
32
33
|
onLayout={(event) => {
|
|
33
|
-
const {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
34
|
+
const { width, height } = event.nativeEvent.layout;
|
|
35
|
+
|
|
36
|
+
setLayout((oldLayout) => {
|
|
37
|
+
// don't set new layout state unless the layout has actually changed
|
|
38
|
+
if (width !== oldLayout.width || height !== oldLayout.height) {
|
|
39
|
+
return { height, width };
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
return oldLayout;
|
|
43
|
+
});
|
|
44
44
|
|
|
45
45
|
if (props.onLayout) {
|
|
46
46
|
props.onLayout(event);
|
|
@@ -103,13 +103,12 @@ function calculatePseudoAngle(
|
|
|
103
103
|
|
|
104
104
|
function calculateGradientColors(colors: number[] | string[], locations?: number[] | null) {
|
|
105
105
|
return colors.map((color: number | string, index: number): string | void => {
|
|
106
|
-
const
|
|
107
|
-
let output = hexColor;
|
|
106
|
+
const output = normalizeColor(color);
|
|
108
107
|
if (locations && locations[index]) {
|
|
109
108
|
const location = Math.max(0, Math.min(1, locations[index]));
|
|
110
109
|
// Convert 0...1 to 0...100
|
|
111
110
|
const percentage = location * 100;
|
|
112
|
-
output
|
|
111
|
+
return `${output} ${percentage}%`;
|
|
113
112
|
}
|
|
114
113
|
return output;
|
|
115
114
|
});
|