expo-linear-gradient 9.1.0 → 10.0.1

package/CHANGELOG.md

@@ -8,6 +8,39 @@
 
 ### 🐛 Bug fixes
 
+### 💡 Others
+
+## 10.0.1 — 2021-10-01
+
+_This version does not introduce any user-facing changes._
+
+## 10.0.0 — 2021-09-28
+
+### 🛠 Breaking changes
+
+- Dropped support for iOS 11.0 ([#14383](https://github.com/expo/expo/pull/14383) by [@cruzach](https://github.com/cruzach))
+
+### 🐛 Bug fixes
+
+- Fix building errors from use_frameworks! in Podfile. ([#14523](https://github.com/expo/expo/pull/14523) by [@kudo](https://github.com/kudo))
+
+## 9.3.0-alpha.0 — 2021-08-17
+
+### 💡 Others
+
+- Migrated from `@unimodules/core` to `expo-modules-core`. (by [@tsapeta](https://github.com/tsapeta))
+- Experimental Swift implementation using Sweet API. (by [@tsapeta](https://github.com/tsapeta))
+
+## 9.2.0 — 2021-06-16
+
+### 🐛 Bug fixes
+
+- Enable kotlin in all modules. ([#12716](https://github.com/expo/expo/pull/12716) by [@wschurman](https://github.com/wschurman))
+
+### 💡 Others
+
+- Build Android code using Java 8 to fix Android instrumented test build error. ([#12939](https://github.com/expo/expo/pull/12939) by [@kudo](https://github.com/kudo))
+
 ## 9.1.0 — 2021-03-10
 
 ### 🎉 New features

package/android/build.gradle

@@ -1,12 +1,23 @@
 apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
 apply plugin: 'maven'
 
 group = 'host.exp.exponent'
-version = '9.1.0'
+version = '10.0.1'
 
-// Simple helper that allows the root project to override versions declared by this library.
-def safeExtGet(prop, fallback) {
-  rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+buildscript {
+  // Simple helper that allows the root project to override versions declared by this library.
+  ext.safeExtGet = { prop, fallback ->
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+  }
+
+  repositories {
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${safeExtGet('kotlinVersion', '1.4.21')}")
+  }
 }
 
 // Upload android library to maven with javadoc and android sources
@@ -37,25 +48,24 @@ uploadArchives {
 android {
   compileSdkVersion safeExtGet("compileSdkVersion", 30)
 
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
   defaultConfig {
     minSdkVersion safeExtGet("minSdkVersion", 21)
     targetSdkVersion safeExtGet("targetSdkVersion", 30)
     versionCode 17
-    versionName "9.1.0"
+    versionName "10.0.1"
   }
   lintOptions {
     abortOnError false
   }
 }
 
-if (new File(rootProject.projectDir.parentFile, 'package.json').exists()) {
-  apply from: project(":unimodules-core").file("../unimodules-core.gradle")
-} else {
-  throw new GradleException(
-      "'unimodules-core.gradle' was not found in the usual React Native dependency location. " +
-          "This package can only be used in such projects. Are you sure you've installed the dependencies properly?")
-}
-
 dependencies {
-  unimodule "unimodules-core"
+  implementation project(':expo-modules-core')
+
+  implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${safeExtGet('kotlinVersion', '1.4.21')}"
 }

package/android/src/main/java/expo/modules/lineargradient/LinearGradientManager.java

@@ -2,8 +2,8 @@ package expo.modules.lineargradient;
 
 import android.content.Context;
 
-import org.unimodules.core.ViewManager;
-import org.unimodules.core.interfaces.ExpoProp;
+import expo.modules.core.ViewManager;
+import expo.modules.core.interfaces.ExpoProp;
 
 import java.util.ArrayList;
 

package/android/src/main/java/expo/modules/lineargradient/LinearGradientPackage.java

@@ -5,8 +5,8 @@ import android.content.Context;
 import java.util.Collections;
 import java.util.List;
 
-import org.unimodules.core.BasePackage;
-import org.unimodules.core.ViewManager;
+import expo.modules.core.BasePackage;
+import expo.modules.core.ViewManager;
 
 public class LinearGradientPackage extends BasePackage {
   @Override

package/build/LinearGradient.d.ts

@@ -1,18 +1,29 @@
 import * as React from 'react';
-import { View } from 'react-native';
+import { ViewProps } from 'react-native';
 import { NativeLinearGradientPoint } from './NativeLinearGradient.types';
+/**
+ * An object `{ x: number; y: number }` or array `[x, y]` that represents the point
+ * at which the gradient starts or ends, as a fraction of the overall size of the gradient ranging
+ * from `0` to `1`, inclusive.
+ */
 export declare type LinearGradientPoint = {
+    /**
+     * A number ranging from `0` to `1`, representing the position of gradient transformation.
+     */
     x: number;
+    /**
+     * A number ranging from `0` to `1`, representing the position of gradient transformation.
+     */
     y: number;
 } | NativeLinearGradientPoint;
-export declare type LinearGradientProps = {
+export declare type LinearGradientProps = ViewProps & {
     /**
      * An array of colors that represent stops in the gradient. At least two colors are required
      * (for a single-color background, use the `style.backgroundColor` prop on a `View` component).
      */
     colors: string[];
     /**
-     * An array that contains `number`s ranging from 0 to 1, inclusive, and is the same length as the `colors` property.
+     * An array that contains `number`s ranging from `0` to `1`, inclusive, and is the same length as the `colors` property.
      * Each number indicates a color-stop location where each respective color should be located.
      *
      * For example, `[0.5, 0.8]` would render:
@@ -20,28 +31,22 @@ export declare type LinearGradientProps = {
      * - a gradient from the first color to the second from the 50% point to the 80% point; and
      * - the second color, solid, from the 80% point to the end of the gradient view.
      *
-     * The color-stop locations must be ascending from least to greatest.
+     * > The color-stop locations must be ascending from least to greatest.
      */
     locations?: number[] | null;
     /**
-     * An object `{ x: number; y: number }` or array `[x, y]` that represents the point
-     * at which the gradient starts, as a fraction of the overall size of the gradient ranging from 0 to 1, inclusive.
-     *
      * For example, `{ x: 0.1, y: 0.2 }` means that the gradient will start `10%` from the left and `20%` from the top.
      *
      * **On web**, this only changes the angle of the gradient because CSS gradients don't support changing the starting position.
      */
     start?: LinearGradientPoint | null;
     /**
-     * An object `{ x: number; y: number }` or array `[x, y]` that represents the point
-     * at which the gradient ends, as a fraction of the overall size of the gradient ranging from 0 to 1, inclusive.
-     *
      * For example, `{ x: 0.1, y: 0.2 }` means that the gradient will end `10%` from the left and `20%` from the bottom.
      *
      * **On web**, this only changes the angle of the gradient because CSS gradients don't support changing the end position.
      */
     end?: LinearGradientPoint | null;
-} & React.ComponentProps<typeof View>;
+};
 /**
  * Renders a native view that transitions between multiple colors in a linear direction.
  */

package/build/LinearGradient.js

@@ -12,10 +12,10 @@ export class LinearGradient extends React.Component {
             console.warn('LinearGradient colors and locations props should be arrays of the same length');
             resolvedLocations = locations.slice(0, colors.length);
         }
-        return (React.createElement(NativeLinearGradient, Object.assign({}, props, { colors: Platform.select({
+        return (React.createElement(NativeLinearGradient, { ...props, colors: Platform.select({
                 web: colors,
                 default: colors.map(processColor),
-            }), locations: resolvedLocations, startPoint: _normalizePoint(start), endPoint: _normalizePoint(end) })));
+            }), locations: resolvedLocations, startPoint: _normalizePoint(start), endPoint: _normalizePoint(end) }));
     }
 }
 function _normalizePoint(point) {

package/build/LinearGradient.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../src/LinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAQ,MAAM,cAAc,CAAC;AAE5D,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AA2C1D;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,SAA8B;IACtE,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/D,IAAI,iBAAiB,GAAG,SAAS,CAAC;QAClC,IAAI,SAAS,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM,EAAE;YACnD,OAAO,CAAC,IAAI,CAAC,+EAA+E,CAAC,CAAC;YAC9F,iBAAiB,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;SACvD;QAED,OAAO,CACL,oBAAC,oBAAoB,oBACf,KAAK,IACT,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC;gBACtB,GAAG,EAAE,MAAa;gBAClB,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC;aAClC,CAAC,EACF,SAAS,EAAE,iBAAiB,EAC5B,UAAU,EAAE,eAAe,CAAC,KAAK,CAAC,EAClC,QAAQ,EAAE,eAAe,CAAC,GAAG,CAAC,IAC9B,CACH,CAAC;IACJ,CAAC;CACF;AAED,SAAS,eAAe,CACtB,KAA6C;IAE7C,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,SAAS,CAAC;KAClB;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAC9C,OAAO,CAAC,IAAI,CAAC,8EAA8E,CAAC,CAAC;QAC7F,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;AAC3D,CAAC","sourcesContent":["import * as React from 'react';\nimport { Platform, processColor, View } from 'react-native';\n\nimport NativeLinearGradient from './NativeLinearGradient';\nimport { NativeLinearGradientPoint } from './NativeLinearGradient.types';\n\nexport type LinearGradientPoint = { x: number; y: number } | NativeLinearGradientPoint;\n\nexport type LinearGradientProps = {\n  /**\n   * An array of colors that represent stops in the gradient. At least two colors are required\n   * (for a single-color background, use the `style.backgroundColor` prop on a `View` component).\n   */\n  colors: string[];\n  /**\n   * An array that contains `number`s ranging from 0 to 1, inclusive, and is the same length as the `colors` property.\n   * Each number indicates a color-stop location where each respective color should be located.\n   *\n   * For example, `[0.5, 0.8]` would render:\n   * - the first color, solid, from the beginning of the gradient view to 50% through (the middle);\n   * - a gradient from the first color to the second from the 50% point to the 80% point; and\n   * - the second color, solid, from the 80% point to the end of the gradient view.\n   *\n   * The color-stop locations must be ascending from least to greatest.\n   */\n  locations?: number[] | null;\n  /**\n   * An object `{ x: number; y: number }` or array `[x, y]` that represents the point\n   * at which the gradient starts, as a fraction of the overall size of the gradient ranging from 0 to 1, inclusive.\n   *\n   * For example, `{ x: 0.1, y: 0.2 }` means that the gradient will start `10%` from the left and `20%` from the top.\n   *\n   * **On web**, this only changes the angle of the gradient because CSS gradients don't support changing the starting position.\n   */\n  start?: LinearGradientPoint | null;\n  /**\n   * An object `{ x: number; y: number }` or array `[x, y]` that represents the point\n   * at which the gradient ends, as a fraction of the overall size of the gradient ranging from 0 to 1, inclusive.\n   *\n   * For example, `{ x: 0.1, y: 0.2 }` means that the gradient will end `10%` from the left and `20%` from the bottom.\n   *\n   * **On web**, this only changes the angle of the gradient because CSS gradients don't support changing the end position.\n   */\n  end?: LinearGradientPoint | null;\n} & React.ComponentProps<typeof View>;\n\n/**\n * Renders a native view that transitions between multiple colors in a linear direction.\n */\nexport class LinearGradient extends React.Component<LinearGradientProps> {\n  render() {\n    const { colors, locations, start, end, ...props } = this.props;\n    let resolvedLocations = locations;\n    if (locations && colors.length !== locations.length) {\n      console.warn('LinearGradient colors and locations props should be arrays of the same length');\n      resolvedLocations = locations.slice(0, colors.length);\n    }\n\n    return (\n      <NativeLinearGradient\n        {...props}\n        colors={Platform.select({\n          web: colors as any,\n          default: colors.map(processColor),\n        })}\n        locations={resolvedLocations}\n        startPoint={_normalizePoint(start)}\n        endPoint={_normalizePoint(end)}\n      />\n    );\n  }\n}\n\nfunction _normalizePoint(\n  point: LinearGradientPoint | null | undefined\n): [number, number] | undefined {\n  if (!point) {\n    return undefined;\n  }\n\n  if (Array.isArray(point) && point.length !== 2) {\n    console.warn('start and end props for LinearGradient must be of the format [x,y] or {x, y}');\n    return undefined;\n  }\n\n  return Array.isArray(point) ? point : [point.x, point.y];\n}\n"]}
+{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../src/LinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAa,MAAM,cAAc,CAAC;AAEjE,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAuD1D;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,SAA8B;IACtE,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/D,IAAI,iBAAiB,GAAG,SAAS,CAAC;QAClC,IAAI,SAAS,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM,EAAE;YACnD,OAAO,CAAC,IAAI,CAAC,+EAA+E,CAAC,CAAC;YAC9F,iBAAiB,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;SACvD;QAED,OAAO,CACL,oBAAC,oBAAoB,OACf,KAAK,EACT,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC;gBACtB,GAAG,EAAE,MAAa;gBAClB,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC;aAClC,CAAC,EACF,SAAS,EAAE,iBAAiB,EAC5B,UAAU,EAAE,eAAe,CAAC,KAAK,CAAC,EAClC,QAAQ,EAAE,eAAe,CAAC,GAAG,CAAC,GAC9B,CACH,CAAC;IACJ,CAAC;CACF;AAED,SAAS,eAAe,CACtB,KAA6C;IAE7C,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,SAAS,CAAC;KAClB;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAC9C,OAAO,CAAC,IAAI,CAAC,8EAA8E,CAAC,CAAC;QAC7F,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;AAC3D,CAAC","sourcesContent":["import * as React from 'react';\nimport { Platform, processColor, ViewProps } from 'react-native';\n\nimport NativeLinearGradient from './NativeLinearGradient';\nimport { NativeLinearGradientPoint } from './NativeLinearGradient.types';\n\n// @needsAudit\n/**\n * An object `{ x: number; y: number }` or array `[x, y]` that represents the point\n * at which the gradient starts or ends, as a fraction of the overall size of the gradient ranging\n * from `0` to `1`, inclusive.\n */\nexport type LinearGradientPoint =\n  | {\n      /**\n       * A number ranging from `0` to `1`, representing the position of gradient transformation.\n       */\n      x: number;\n      /**\n       * A number ranging from `0` to `1`, representing the position of gradient transformation.\n       */\n      y: number;\n    }\n  | NativeLinearGradientPoint;\n\n// @needsAudit\nexport type LinearGradientProps = ViewProps & {\n  /**\n   * An array of colors that represent stops in the gradient. At least two colors are required\n   * (for a single-color background, use the `style.backgroundColor` prop on a `View` component).\n   */\n  colors: string[];\n  /**\n   * An array that contains `number`s ranging from `0` to `1`, inclusive, and is the same length as the `colors` property.\n   * Each number indicates a color-stop location where each respective color should be located.\n   *\n   * For example, `[0.5, 0.8]` would render:\n   * - the first color, solid, from the beginning of the gradient view to 50% through (the middle);\n   * - a gradient from the first color to the second from the 50% point to the 80% point; and\n   * - the second color, solid, from the 80% point to the end of the gradient view.\n   *\n   * > The color-stop locations must be ascending from least to greatest.\n   */\n  locations?: number[] | null;\n  /**\n   * For example, `{ x: 0.1, y: 0.2 }` means that the gradient will start `10%` from the left and `20%` from the top.\n   *\n   * **On web**, this only changes the angle of the gradient because CSS gradients don't support changing the starting position.\n   */\n  start?: LinearGradientPoint | null;\n  /**\n   * For example, `{ x: 0.1, y: 0.2 }` means that the gradient will end `10%` from the left and `20%` from the bottom.\n   *\n   * **On web**, this only changes the angle of the gradient because CSS gradients don't support changing the end position.\n   */\n  end?: LinearGradientPoint | null;\n};\n\n/**\n * Renders a native view that transitions between multiple colors in a linear direction.\n */\nexport class LinearGradient extends React.Component<LinearGradientProps> {\n  render() {\n    const { colors, locations, start, end, ...props } = this.props;\n    let resolvedLocations = locations;\n    if (locations && colors.length !== locations.length) {\n      console.warn('LinearGradient colors and locations props should be arrays of the same length');\n      resolvedLocations = locations.slice(0, colors.length);\n    }\n\n    return (\n      <NativeLinearGradient\n        {...props}\n        colors={Platform.select({\n          web: colors as any,\n          default: colors.map(processColor),\n        })}\n        locations={resolvedLocations}\n        startPoint={_normalizePoint(start)}\n        endPoint={_normalizePoint(end)}\n      />\n    );\n  }\n}\n\nfunction _normalizePoint(\n  point: LinearGradientPoint | null | undefined\n): NativeLinearGradientPoint | undefined {\n  if (!point) {\n    return undefined;\n  }\n\n  if (Array.isArray(point) && point.length !== 2) {\n    console.warn('start and end props for LinearGradient must be of the format [x,y] or {x, y}');\n    return undefined;\n  }\n\n  return Array.isArray(point) ? point : [point.x, point.y];\n}\n"]}

package/build/NativeLinearGradient.android.js

@@ -1,4 +1,4 @@
-import { requireNativeViewManager } from '@unimodules/core';
+import { requireNativeViewManager } from 'expo-modules-core';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 export default function NativeLinearGradient({ colors, locations, startPoint, endPoint, children, style, ...props }) {
@@ -18,7 +18,7 @@ export default function NativeLinearGradient({ colors, locations, startPoint, en
         flatStyle.borderBottomLeftRadius ?? borderRadius,
         flatStyle.borderBottomLeftRadius ?? borderRadius,
     ];
-    return (React.createElement(View, Object.assign({}, props, { style: style }),
+    return (React.createElement(View, { ...props, style: style },
         React.createElement(BaseNativeLinearGradient, { style: StyleSheet.absoluteFill, colors: colors, startPoint: startPoint, endPoint: endPoint, locations: locations, borderRadii: borderRadiiPerCorner }),
         children));
 }

package/build/NativeLinearGradient.android.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeLinearGradient.android.js","sourceRoot":"","sources":["../src/NativeLinearGradient.android.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIhD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACkB;IAC1B,6FAA6F;IAC7F,sEAAsE;IACtE,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClD,MAAM,YAAY,GAAG,SAAS,CAAC,YAAY,IAAI,CAAC,CAAC;IAEjD,2BAA2B;IAC3B,wJAAwJ;IACxJ,MAAM,oBAAoB,GAAG;QAC3B,SAAS,CAAC,mBAAmB,IAAI,YAAY;QAC7C,SAAS,CAAC,mBAAmB,IAAI,YAAY;QAC7C,SAAS,CAAC,oBAAoB,IAAI,YAAY;QAC9C,SAAS,CAAC,oBAAoB,IAAI,YAAY;QAC9C,SAAS,CAAC,uBAAuB,IAAI,YAAY;QACjD,SAAS,CAAC,uBAAuB,IAAI,YAAY;QACjD,SAAS,CAAC,sBAAsB,IAAI,YAAY;QAChD,SAAS,CAAC,sBAAsB,IAAI,YAAY;KACjD,CAAC;IAEF,OAAO,CACL,oBAAC,IAAI,oBAAK,KAAK,IAAE,KAAK,EAAE,KAAK;QAC3B,oBAAC,wBAAwB,IACvB,KAAK,EAAE,UAAU,CAAC,YAAY,EAC9B,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,oBAAoB,GACjC;QACD,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC;AAED,MAAM,wBAAwB,GAAG,wBAAwB,CAAC,oBAAoB,CAAC,CAAC","sourcesContent":["import { requireNativeViewManager } from '@unimodules/core';\nimport * as React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport { NativeLinearGradientProps } from './NativeLinearGradient.types';\n\nexport default function NativeLinearGradient({\n  colors,\n  locations,\n  startPoint,\n  endPoint,\n  children,\n  style,\n  ...props\n}: NativeLinearGradientProps): React.ReactElement {\n  // TODO: revisit whether we need to inherit the container's borderRadius since this issue has\n  // been resolved: https://github.com/facebook/react-native/issues/3198\n  const flatStyle = StyleSheet.flatten(style) ?? {};\n  const borderRadius = flatStyle.borderRadius ?? 0;\n\n  // This is the format from:\n  // https://developer.android.com/reference/android/graphics/Path.html#addRoundRect(android.graphics.RectF,%20float[],%20android.graphics.Path.Direction)\n  const borderRadiiPerCorner = [\n    flatStyle.borderTopLeftRadius ?? borderRadius,\n    flatStyle.borderTopLeftRadius ?? borderRadius,\n    flatStyle.borderTopRightRadius ?? borderRadius,\n    flatStyle.borderTopRightRadius ?? borderRadius,\n    flatStyle.borderBottomRightRadius ?? borderRadius,\n    flatStyle.borderBottomRightRadius ?? borderRadius,\n    flatStyle.borderBottomLeftRadius ?? borderRadius,\n    flatStyle.borderBottomLeftRadius ?? borderRadius,\n  ];\n\n  return (\n    <View {...props} style={style}>\n      <BaseNativeLinearGradient\n        style={StyleSheet.absoluteFill}\n        colors={colors}\n        startPoint={startPoint}\n        endPoint={endPoint}\n        locations={locations}\n        borderRadii={borderRadiiPerCorner}\n      />\n      {children}\n    </View>\n  );\n}\n\nconst BaseNativeLinearGradient = requireNativeViewManager('ExpoLinearGradient');\n"]}
+{"version":3,"file":"NativeLinearGradient.android.js","sourceRoot":"","sources":["../src/NativeLinearGradient.android.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIhD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACkB;IAC1B,6FAA6F;IAC7F,sEAAsE;IACtE,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClD,MAAM,YAAY,GAAG,SAAS,CAAC,YAAY,IAAI,CAAC,CAAC;IAEjD,2BAA2B;IAC3B,wJAAwJ;IACxJ,MAAM,oBAAoB,GAAG;QAC3B,SAAS,CAAC,mBAAmB,IAAI,YAAY;QAC7C,SAAS,CAAC,mBAAmB,IAAI,YAAY;QAC7C,SAAS,CAAC,oBAAoB,IAAI,YAAY;QAC9C,SAAS,CAAC,oBAAoB,IAAI,YAAY;QAC9C,SAAS,CAAC,uBAAuB,IAAI,YAAY;QACjD,SAAS,CAAC,uBAAuB,IAAI,YAAY;QACjD,SAAS,CAAC,sBAAsB,IAAI,YAAY;QAChD,SAAS,CAAC,sBAAsB,IAAI,YAAY;KACjD,CAAC;IAEF,OAAO,CACL,oBAAC,IAAI,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK;QAC3B,oBAAC,wBAAwB,IACvB,KAAK,EAAE,UAAU,CAAC,YAAY,EAC9B,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,oBAAoB,GACjC;QACD,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC;AAED,MAAM,wBAAwB,GAAG,wBAAwB,CAAC,oBAAoB,CAAC,CAAC","sourcesContent":["import { requireNativeViewManager } from 'expo-modules-core';\nimport * as React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport { NativeLinearGradientProps } from './NativeLinearGradient.types';\n\nexport default function NativeLinearGradient({\n  colors,\n  locations,\n  startPoint,\n  endPoint,\n  children,\n  style,\n  ...props\n}: NativeLinearGradientProps): React.ReactElement {\n  // TODO: revisit whether we need to inherit the container's borderRadius since this issue has\n  // been resolved: https://github.com/facebook/react-native/issues/3198\n  const flatStyle = StyleSheet.flatten(style) ?? {};\n  const borderRadius = flatStyle.borderRadius ?? 0;\n\n  // This is the format from:\n  // https://developer.android.com/reference/android/graphics/Path.html#addRoundRect(android.graphics.RectF,%20float[],%20android.graphics.Path.Direction)\n  const borderRadiiPerCorner = [\n    flatStyle.borderTopLeftRadius ?? borderRadius,\n    flatStyle.borderTopLeftRadius ?? borderRadius,\n    flatStyle.borderTopRightRadius ?? borderRadius,\n    flatStyle.borderTopRightRadius ?? borderRadius,\n    flatStyle.borderBottomRightRadius ?? borderRadius,\n    flatStyle.borderBottomRightRadius ?? borderRadius,\n    flatStyle.borderBottomLeftRadius ?? borderRadius,\n    flatStyle.borderBottomLeftRadius ?? borderRadius,\n  ];\n\n  return (\n    <View {...props} style={style}>\n      <BaseNativeLinearGradient\n        style={StyleSheet.absoluteFill}\n        colors={colors}\n        startPoint={startPoint}\n        endPoint={endPoint}\n        locations={locations}\n        borderRadii={borderRadiiPerCorner}\n      />\n      {children}\n    </View>\n  );\n}\n\nconst BaseNativeLinearGradient = requireNativeViewManager('ExpoLinearGradient');\n"]}

package/build/NativeLinearGradient.ios.js

@@ -1,4 +1,4 @@
-import { requireNativeViewManager } from '@unimodules/core';
+import { requireNativeViewManager } from 'expo-modules-core';
 const NativeLinearGradient = requireNativeViewManager('ExpoLinearGradient');
 export default NativeLinearGradient;
 //# sourceMappingURL=NativeLinearGradient.ios.js.map

package/build/NativeLinearGradient.ios.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeLinearGradient.ios.js","sourceRoot":"","sources":["../src/NativeLinearGradient.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAK5D,MAAM,oBAAoB,GAAG,wBAAwB,CAAC,oBAAoB,CAEzE,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { requireNativeViewManager } from '@unimodules/core';\nimport * as React from 'react';\n\nimport { NativeLinearGradientProps } from './NativeLinearGradient.types';\n\nconst NativeLinearGradient = requireNativeViewManager('ExpoLinearGradient') as React.FC<\n  NativeLinearGradientProps\n>;\n\nexport default NativeLinearGradient;\n"]}
+{"version":3,"file":"NativeLinearGradient.ios.js","sourceRoot":"","sources":["../src/NativeLinearGradient.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAK7D,MAAM,oBAAoB,GAAG,wBAAwB,CACnD,oBAAoB,CACkB,CAAC;AAEzC,eAAe,oBAAoB,CAAC","sourcesContent":["import { requireNativeViewManager } from 'expo-modules-core';\nimport * as React from 'react';\n\nimport { NativeLinearGradientProps } from './NativeLinearGradient.types';\n\nconst NativeLinearGradient = requireNativeViewManager(\n  'ExpoLinearGradient'\n) as React.FC<NativeLinearGradientProps>;\n\nexport default NativeLinearGradient;\n"]}

package/build/NativeLinearGradient.js

@@ -5,6 +5,6 @@ import { View } from 'react-native';
 export default function NativeLinearGradient(props) {
     const { colors, locations, startPoint, endPoint, ...viewProps } = props;
     console.warn('LinearGradient is not available on this platform');
-    return React.createElement(View, Object.assign({}, viewProps));
+    return React.createElement(View, { ...viewProps });
 }
 //# sourceMappingURL=NativeLinearGradient.js.map

package/build/NativeLinearGradient.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeLinearGradient.js","sourceRoot":"","sources":["../src/NativeLinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,mEAAmE;AACnE,kFAAkF;AAClF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAgC;IAC3E,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxE,OAAO,CAAC,IAAI,CAAC,kDAAkD,CAAC,CAAC;IACjE,OAAO,oBAAC,IAAI,oBAAM,SAAiB,EAAI,CAAC;AAC1C,CAAC","sourcesContent":["import * as React from 'react';\nimport { View } from 'react-native';\n\nimport { NativeLinearGradientProps } from './NativeLinearGradient.types';\n\n// This is a shim view for platforms that aren't supported by Expo.\n// The component and prop types should match all of the other platform variations.\nexport default function NativeLinearGradient(props: NativeLinearGradientProps): React.ReactElement {\n  const { colors, locations, startPoint, endPoint, ...viewProps } = props;\n  console.warn('LinearGradient is not available on this platform');\n  return <View {...(viewProps as any)} />;\n}\n"]}
+{"version":3,"file":"NativeLinearGradient.js","sourceRoot":"","sources":["../src/NativeLinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,mEAAmE;AACnE,kFAAkF;AAClF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAgC;IAC3E,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACxE,OAAO,CAAC,IAAI,CAAC,kDAAkD,CAAC,CAAC;IACjE,OAAO,oBAAC,IAAI,OAAM,SAAiB,GAAI,CAAC;AAC1C,CAAC","sourcesContent":["import * as React from 'react';\nimport { View } from 'react-native';\n\nimport { NativeLinearGradientProps } from './NativeLinearGradient.types';\n\n// This is a shim view for platforms that aren't supported by Expo.\n// The component and prop types should match all of the other platform variations.\nexport default function NativeLinearGradient(props: NativeLinearGradientProps): React.ReactElement {\n  const { colors, locations, startPoint, endPoint, ...viewProps } = props;\n  console.warn('LinearGradient is not available on this platform');\n  return <View {...(viewProps as any)} />;\n}\n"]}

package/build/NativeLinearGradient.types.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { View } from 'react-native';
-export declare type NativeLinearGradientProps = React.ComponentProps<typeof View> & React.PropsWithChildren<{
+import { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native';
+export declare type NativeLinearGradientProps = ViewProps & PropsWithChildren<{
     colors: number[];
     locations?: number[] | null;
     startPoint?: NativeLinearGradientPoint | null;

package/build/NativeLinearGradient.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeLinearGradient.types.js","sourceRoot":"","sources":["../src/NativeLinearGradient.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { View } from 'react-native';\n\nexport type NativeLinearGradientProps = React.ComponentProps<typeof View> &\n  React.PropsWithChildren<{\n    colors: number[];\n    locations?: number[] | null;\n    startPoint?: NativeLinearGradientPoint | null;\n    endPoint?: NativeLinearGradientPoint | null;\n  }>;\n\nexport type NativeLinearGradientPoint = [number, number];\n"]}
+{"version":3,"file":"NativeLinearGradient.types.js","sourceRoot":"","sources":["../src/NativeLinearGradient.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PropsWithChildren } from 'react';\nimport { ViewProps } from 'react-native';\n\nexport type NativeLinearGradientProps = ViewProps &\n  PropsWithChildren<{\n    colors: number[];\n    locations?: number[] | null;\n    startPoint?: NativeLinearGradientPoint | null;\n    endPoint?: NativeLinearGradientPoint | null;\n  }>;\n\nexport type NativeLinearGradientPoint = [number, number];\n"]}

package/build/NativeLinearGradient.web.js

@@ -3,10 +3,8 @@ import { View } from 'react-native';
 import normalizeColor from 'react-native-web/src/modules/normalizeColor';
 export default function NativeLinearGradient({ colors, locations, startPoint, endPoint, ...props }) {
     const [layout, setLayout] = React.useState(null);
-    const [gradientColors, setGradientColors] = React.useState([]);
-    const [pseudoAngle, setPseudoAngle] = React.useState(0);
     const { width = 1, height = 1 } = layout ?? {};
-    React.useEffect(() => {
+    const pseudoAngle = React.useMemo(() => {
         const getControlPoints = () => {
             let correctedStartPoint = [0, 0];
             if (Array.isArray(startPoint)) {
@@ -31,10 +29,10 @@ export default function NativeLinearGradient({ colors, locations, startPoint, en
         end[1] *= height;
         const py = end[1] - start[1];
         const px = end[0] - start[0];
-        setPseudoAngle(90 + (Math.atan2(py, px) * 180) / Math.PI);
+        return 90 + (Math.atan2(py, px) * 180) / Math.PI;
     }, [width, height, startPoint, endPoint]);
-    React.useEffect(() => {
-        const nextGradientColors = colors.map((color, index) => {
+    const gradientColors = React.useMemo(() => {
+        return colors.map((color, index) => {
             const hexColor = normalizeColor(color);
             let output = hexColor;
             if (locations && locations[index]) {
@@ -45,17 +43,16 @@ export default function NativeLinearGradient({ colors, locations, startPoint, en
             }
             return output;
         });
-        setGradientColors(nextGradientColors);
     }, [colors, locations]);
     const colorStyle = gradientColors.join(',');
     const backgroundImage = `linear-gradient(${pseudoAngle}deg, ${colorStyle})`;
     // TODO(Bacon): In the future we could consider adding `backgroundRepeat: "no-repeat"`. For more
     // browser support.
-    return (React.createElement(View, Object.assign({}, props, { style: [
+    return (React.createElement(View, { ...props, style: [
             props.style,
             // @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
             { backgroundImage },
-        ], onLayout: event => {
+        ], onLayout: (event) => {
             const { x, y, width, height } = event.nativeEvent.layout;
             const oldLayout = layout ?? { x: 0, y: 0, width: 1, height: 1 };
             // don't set new layout state unless the layout has actually changed
@@ -68,6 +65,6 @@ export default function NativeLinearGradient({ colors, locations, startPoint, en
             if (props.onLayout) {
                 props.onLayout(event);
             }
-        } })));
+        } }));
 }
 //# sourceMappingURL=NativeLinearGradient.web.js.map

package/build/NativeLinearGradient.web.js.map

@@ -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,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAIzE,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,SAAS,EACT,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACkB;IAC1B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAyB,IAAI,CAAC,CAAC;IACzE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAW,EAAE,CAAC,CAAC;IACzE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,CAAC,CAAC,CAAC;IAEhE,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;IAC/C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,gBAAgB,GAAG,GAAgC,EAAE;YACzD,IAAI,mBAAmB,GAA8B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAC5D,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;gBAC7B,mBAAmB,GAAG;oBACpB,UAAU,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;oBAC3C,UAAU,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;iBAC5C,CAAC;aACH;YACD,IAAI,iBAAiB,GAA8B,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;YAC9D,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBAC3B,iBAAiB,GAAG;oBAClB,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;oBACvC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;iBACxC,CAAC;aACH;YACD,OAAO,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;QAClD,CAAC,CAAC;QAEF,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,gBAAgB,EAAE,CAAC;QACxC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC;QAClB,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC;QAChB,KAAK,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC;QACnB,GAAG,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC;QACjB,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QAC7B,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QAE7B,cAAc,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IAC5D,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAa,EAAE,KAAa,EAAU,EAAE;YAC7E,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;YACvC,IAAI,MAAM,GAAG,QAAQ,CAAC;YACtB,IAAI,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;gBACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBAC5D,2BAA2B;gBAC3B,MAAM,UAAU,GAAG,QAAQ,GAAG,GAAG,CAAC;gBAClC,MAAM,IAAI,IAAI,UAAU,GAAG,CAAC;aAC7B;YACD,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC,CAAC;QAEH,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAExB,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,eAAe,GAAG,mBAAmB,WAAW,QAAQ,UAAU,GAAG,CAAC;IAC5E,gGAAgG;IAChG,mBAAmB;IACnB,OAAO,CACL,oBAAC,IAAI,oBACC,KAAK,IACT,KAAK,EAAE;YACL,KAAK,CAAC,KAAK;YACX,kFAAkF;YAClF,EAAE,eAAe,EAAE;SACpB,EACD,QAAQ,EAAE,KAAK,CAAC,EAAE;YAChB,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;YACzD,MAAM,SAAS,GAAG,MAAM,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;YAChE,oEAAoE;YACpE,IACE,CAAC,KAAK,SAAS,CAAC,CAAC;gBACjB,CAAC,KAAK,SAAS,CAAC,CAAC;gBACjB,KAAK,KAAK,SAAS,CAAC,KAAK;gBACzB,MAAM,KAAK,SAAS,CAAC,MAAM,EAC3B;gBACA,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;aACpC;YAED,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAClB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;aACvB;QACH,CAAC,IACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["import * as React from 'react';\nimport { LayoutRectangle, View } from 'react-native';\nimport normalizeColor from 'react-native-web/src/modules/normalizeColor';\n\nimport { NativeLinearGradientPoint, NativeLinearGradientProps } from './NativeLinearGradient.types';\n\nexport default function NativeLinearGradient({\n  colors,\n  locations,\n  startPoint,\n  endPoint,\n  ...props\n}: NativeLinearGradientProps): React.ReactElement {\n  const [layout, setLayout] = React.useState<LayoutRectangle | null>(null);\n  const [gradientColors, setGradientColors] = React.useState<string[]>([]);\n  const [pseudoAngle, setPseudoAngle] = React.useState<number>(0);\n\n  const { width = 1, height = 1 } = layout ?? {};\n  React.useEffect(() => {\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    setPseudoAngle(90 + (Math.atan2(py, px) * 180) / Math.PI);\n  }, [width, height, startPoint, endPoint]);\n\n  React.useEffect(() => {\n    const nextGradientColors = colors.map((color: number, index: number): string => {\n      const hexColor = normalizeColor(color);\n      let output = hexColor;\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        output += ` ${percentage}%`;\n      }\n      return output;\n    });\n\n    setGradientColors(nextGradientColors);\n  }, [colors, locations]);\n\n  const colorStyle = gradientColors.join(',');\n  const backgroundImage = `linear-gradient(${pseudoAngle}deg, ${colorStyle})`;\n  // TODO(Bacon): In the future we could consider adding `backgroundRepeat: \"no-repeat\"`. For more\n  // browser support.\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 },\n      ]}\n      onLayout={event => {\n        const { x, y, width, height } = event.nativeEvent.layout;\n        const oldLayout = layout ?? { x: 0, y: 0, width: 1, height: 1 };\n        // don't set new layout state unless the layout has actually changed\n        if (\n          x !== oldLayout.x ||\n          y !== oldLayout.y ||\n          width !== oldLayout.width ||\n          height !== oldLayout.height\n        ) {\n          setLayout({ x, y, width, height });\n        }\n\n        if (props.onLayout) {\n          props.onLayout(event);\n        }\n      }}\n    />\n  );\n}\n"]}
+{"version":3,"file":"NativeLinearGradient.web.js","sourceRoot":"","sources":["../src/NativeLinearGradient.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAIzE,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,SAAS,EACT,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACkB;IAC1B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAyB,IAAI,CAAC,CAAC;IAEzE,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;IAE/C,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,MAAM,gBAAgB,GAAG,GAAgC,EAAE;YACzD,IAAI,mBAAmB,GAA8B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAC5D,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;gBAC7B,mBAAmB,GAAG;oBACpB,UAAU,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;oBAC3C,UAAU,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;iBAC5C,CAAC;aACH;YACD,IAAI,iBAAiB,GAA8B,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;YAC9D,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBAC3B,iBAAiB,GAAG;oBAClB,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;oBACvC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;iBACxC,CAAC;aACH;YACD,OAAO,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;QAClD,CAAC,CAAC;QAEF,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,gBAAgB,EAAE,CAAC;QACxC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC;QAClB,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC;QAChB,KAAK,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC;QACnB,GAAG,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC;QACjB,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QAC7B,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QAE7B,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;IACnD,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1C,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAa,EAAE,KAAa,EAAU,EAAE;YACzD,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;YACvC,IAAI,MAAM,GAAG,QAAQ,CAAC;YACtB,IAAI,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;gBACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBAC5D,2BAA2B;gBAC3B,MAAM,UAAU,GAAG,QAAQ,GAAG,GAAG,CAAC;gBAClC,MAAM,IAAI,IAAI,UAAU,GAAG,CAAC;aAC7B;YACD,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAExB,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,eAAe,GAAG,mBAAmB,WAAW,QAAQ,UAAU,GAAG,CAAC;IAC5E,gGAAgG;IAChG,mBAAmB;IACnB,OAAO,CACL,oBAAC,IAAI,OACC,KAAK,EACT,KAAK,EAAE;YACL,KAAK,CAAC,KAAK;YACX,kFAAkF;YAClF,EAAE,eAAe,EAAE;SACpB,EACD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YAClB,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;YACzD,MAAM,SAAS,GAAG,MAAM,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;YAChE,oEAAoE;YACpE,IACE,CAAC,KAAK,SAAS,CAAC,CAAC;gBACjB,CAAC,KAAK,SAAS,CAAC,CAAC;gBACjB,KAAK,KAAK,SAAS,CAAC,KAAK;gBACzB,MAAM,KAAK,SAAS,CAAC,MAAM,EAC3B;gBACA,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;aACpC;YAED,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAClB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;aACvB;QACH,CAAC,GACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["import * as React from 'react';\nimport { LayoutRectangle, View } from 'react-native';\nimport normalizeColor from 'react-native-web/src/modules/normalizeColor';\n\nimport { NativeLinearGradientPoint, NativeLinearGradientProps } from './NativeLinearGradient.types';\n\nexport default function NativeLinearGradient({\n  colors,\n  locations,\n  startPoint,\n  endPoint,\n  ...props\n}: NativeLinearGradientProps): React.ReactElement {\n  const [layout, setLayout] = React.useState<LayoutRectangle | null>(null);\n\n  const { width = 1, height = 1 } = layout ?? {};\n\n  const pseudoAngle = React.useMemo(() => {\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  }, [width, height, startPoint, endPoint]);\n\n  const gradientColors = React.useMemo(() => {\n    return colors.map((color: number, index: number): string => {\n      const hexColor = normalizeColor(color);\n      let output = hexColor;\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        output += ` ${percentage}%`;\n      }\n      return output;\n    });\n  }, [colors, locations]);\n\n  const colorStyle = gradientColors.join(',');\n  const backgroundImage = `linear-gradient(${pseudoAngle}deg, ${colorStyle})`;\n  // TODO(Bacon): In the future we could consider adding `backgroundRepeat: \"no-repeat\"`. For more\n  // browser support.\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 },\n      ]}\n      onLayout={(event) => {\n        const { x, y, width, height } = event.nativeEvent.layout;\n        const oldLayout = layout ?? { x: 0, y: 0, width: 1, height: 1 };\n        // don't set new layout state unless the layout has actually changed\n        if (\n          x !== oldLayout.x ||\n          y !== oldLayout.y ||\n          width !== oldLayout.width ||\n          height !== oldLayout.height\n        ) {\n          setLayout({ x, y, width, height });\n        }\n\n        if (props.onLayout) {\n          props.onLayout(event);\n        }\n      }}\n    />\n  );\n}\n"]}

package/expo-module.config.json

@@ -0,0 +1,7 @@
+{
+  "name": "expo-linear-gradient",
+  "platforms": ["ios", "android"],
+  "ios": {
+    "modulesClassNames": ["LinearGradientModule"]
+  }
+}

package/ios/EXLinearGradient/EXLinearGradient.h

@@ -1,8 +1,6 @@
 // Copyright 2015-present 650 Industries. All rights reserved.
 
 #import <UIKit/UIKit.h>
-#import <UMCore/UMModuleRegistry.h>
-#import <UMCore/UMAppLifecycleListener.h>
 
 @interface EXLinearGradient : UIView
 

package/ios/EXLinearGradient/EXLinearGradient.m

@@ -3,9 +3,9 @@
 #import <EXLinearGradient/EXLinearGradient.h>
 #import <EXLinearGradient/EXLinearGradientLayer.h>
 #import <UIKit/UIKit.h>
-#import <UMCore/UMModuleRegistry.h>
-#import <UMCore/UMAppLifecycleListener.h>
-#import <UMCore/UMUtilities.h>
+#import <ExpoModulesCore/EXModuleRegistry.h>
+#import <ExpoModulesCore/EXAppLifecycleListener.h>
+#import <ExpoModulesCore/EXUtilities.h>
 
 @interface EXLinearGradient ()
 
@@ -27,7 +27,7 @@
 {
   NSMutableArray *colors = [NSMutableArray arrayWithCapacity:colorStrings.count];
   for (NSString *colorString in colorStrings) {
-    UIColor *convertedColor = [UMUtilities UIColor:colorString];
+    UIColor *convertedColor = [EXUtilities UIColor:colorString];
     if (convertedColor) {
       [colors addObject:convertedColor];
     }

package/ios/EXLinearGradient/EXLinearGradientManager.h

@@ -1,8 +1,8 @@
 // Copyright 2015-present 650 Industries. All rights reserved.
 
-#import <UMCore/UMViewManager.h>
-#import <UMCore/UMExportedModule.h>
+#import <ExpoModulesCore/EXViewManager.h>
+#import <ExpoModulesCore/EXExportedModule.h>
 
-@interface EXLinearGradientManager : UMViewManager
+@interface EXLinearGradientManager : EXViewManager
 
 @end

package/ios/EXLinearGradient/EXLinearGradientManager.m

@@ -2,7 +2,7 @@
 
 #import <EXLinearGradient/EXLinearGradientManager.h>
 #import <EXLinearGradient/EXLinearGradient.h>
-#import <UMCore/UMUIManager.h>
+#import <ExpoModulesCore/EXUIManager.h>
 
 @interface EXLinearGradientManager ()
 
@@ -10,7 +10,7 @@
 
 @implementation EXLinearGradientManager
 
-UM_EXPORT_MODULE(ExpoLinearGradientManager);
+EX_EXPORT_MODULE(ExpoLinearGradientManager);
 
 - (NSString *)viewName
 {
@@ -22,23 +22,23 @@ UM_EXPORT_MODULE(ExpoLinearGradientManager);
   return [[EXLinearGradient alloc] init];
 }
 
-UM_VIEW_PROPERTY(colors, NSArray *, EXLinearGradient) {
+EX_VIEW_PROPERTY(colors, NSArray *, EXLinearGradient) {
   [view setColors:value];
 }
 
 // NOTE: startPoint and endPoint assume that the value is an array with exactly two floats
 
-UM_VIEW_PROPERTY(startPoint, NSArray *, EXLinearGradient) {
+EX_VIEW_PROPERTY(startPoint, NSArray *, EXLinearGradient) {
   CGPoint point = CGPointMake([[value objectAtIndex:0] floatValue], [[value objectAtIndex:1] floatValue]);
   [view setStartPoint:point];
 }
 
-UM_VIEW_PROPERTY(endPoint, NSArray *, EXLinearGradient) {
+EX_VIEW_PROPERTY(endPoint, NSArray *, EXLinearGradient) {
   CGPoint point = CGPointMake([[value objectAtIndex:0] floatValue], [[value objectAtIndex:1] floatValue]);
   [view setEndPoint:point];
 }
 
-UM_VIEW_PROPERTY(locations, NSArray *, EXLinearGradient) {
+EX_VIEW_PROPERTY(locations, NSArray *, EXLinearGradient) {
   [view setLocations:value];
 }
 

package/ios/EXLinearGradient/LinearGradientModule.swift

@@ -0,0 +1,29 @@
+import ExpoModulesCore
+
+public class LinearGradientModule: Module {
+  public func definition() -> ModuleDefinition {
+    name("ExpoLinearGradient")
+
+    viewManager {
+      view {
+        EXLinearGradient()
+      }
+
+      prop("colors") { (view: EXLinearGradient, colors: [Int]) in
+        view.setColors(colors)
+      }
+
+      prop("startPoint") { (view: EXLinearGradient, startPoint: [Double]) in
+        view.setStart(CGPoint(x: startPoint[0], y: startPoint[1]))
+      }
+
+      prop("endPoint") { (view: EXLinearGradient, endPoint: [Double]) in
+        view.setEnd(CGPoint(x: endPoint[0], y: endPoint[1]))
+      }
+
+      prop("locations") { (view: EXLinearGradient, locations: [Double]) in
+        view.setLocations(locations)
+      }
+    }
+  }
+}

package/ios/EXLinearGradient.podspec

@@ -10,15 +10,22 @@ Pod::Spec.new do |s|
   s.license        = package['license']
   s.author         = package['author']
   s.homepage       = package['homepage']
-  s.platform       = :ios, '11.0'
+  s.platform       = :ios, '12.0'
+  s.swift_version  = '5.4'
   s.source         = { git: 'https://github.com/expo/expo.git' }
+  s.static_framework = true
 
-  s.dependency 'UMCore'
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES'
+  }
 
   if !$ExpoUseSources&.include?(package['name']) && ENV['EXPO_USE_SOURCE'].to_i == 0 && File.exist?("#{s.name}.xcframework") && Gem::Version.new(Pod::VERSION) >= Gem::Version.new('1.10.0')
     s.source_files = "#{s.name}/**/*.h"
     s.vendored_frameworks = "#{s.name}.xcframework"
   else
-    s.source_files = "#{s.name}/**/*.{h,m}"
+    s.source_files = "#{s.name}/**/*.{h,m,swift}"
   end
 end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-linear-gradient",
-  "version": "9.1.0",
+  "version": "10.0.1",
   "description": "Provides a React component that renders a gradient view.",
   "main": "build/LinearGradient.js",
   "types": "build/LinearGradient.d.ts",
@@ -32,9 +32,12 @@
   },
   "author": "650 Industries, Inc.",
   "license": "MIT",
-  "homepage": "https://docs.expo.io/versions/latest/sdk/linear-gradient/",
+  "homepage": "https://docs.expo.dev/versions/latest/sdk/linear-gradient/",
+  "dependencies": {
+    "expo-modules-core": "~0.4.2"
+  },
   "devDependencies": {
     "expo-module-scripts": "^2.0.0"
   },
-  "gitHead": "5b57d1fd0a20294c1dec7c43b5df34dd6425d1a5"
+  "gitHead": "2718b696f4a6919905b0f47ebb24ff65b42d8ff9"
 }

package/src/LinearGradient.tsx

@@ -1,19 +1,37 @@
 import * as React from 'react';
-import { Platform, processColor, View } from 'react-native';
+import { Platform, processColor, ViewProps } from 'react-native';
 
 import NativeLinearGradient from './NativeLinearGradient';
 import { NativeLinearGradientPoint } from './NativeLinearGradient.types';
 
-export type LinearGradientPoint = { x: number; y: number } | NativeLinearGradientPoint;
+// @needsAudit
+/**
+ * An object `{ x: number; y: number }` or array `[x, y]` that represents the point
+ * at which the gradient starts or ends, as a fraction of the overall size of the gradient ranging
+ * from `0` to `1`, inclusive.
+ */
+export type LinearGradientPoint =
+  | {
+      /**
+       * A number ranging from `0` to `1`, representing the position of gradient transformation.
+       */
+      x: number;
+      /**
+       * A number ranging from `0` to `1`, representing the position of gradient transformation.
+       */
+      y: number;
+    }
+  | NativeLinearGradientPoint;
 
-export type LinearGradientProps = {
+// @needsAudit
+export type LinearGradientProps = ViewProps & {
   /**
    * An array of colors that represent stops in the gradient. At least two colors are required
    * (for a single-color background, use the `style.backgroundColor` prop on a `View` component).
    */
   colors: string[];
   /**
-   * An array that contains `number`s ranging from 0 to 1, inclusive, and is the same length as the `colors` property.
+   * An array that contains `number`s ranging from `0` to `1`, inclusive, and is the same length as the `colors` property.
    * Each number indicates a color-stop location where each respective color should be located.
    *
    * For example, `[0.5, 0.8]` would render:
@@ -21,28 +39,22 @@ export type LinearGradientProps = {
    * - a gradient from the first color to the second from the 50% point to the 80% point; and
    * - the second color, solid, from the 80% point to the end of the gradient view.
    *
-   * The color-stop locations must be ascending from least to greatest.
+   * > The color-stop locations must be ascending from least to greatest.
    */
   locations?: number[] | null;
   /**
-   * An object `{ x: number; y: number }` or array `[x, y]` that represents the point
-   * at which the gradient starts, as a fraction of the overall size of the gradient ranging from 0 to 1, inclusive.
-   *
    * For example, `{ x: 0.1, y: 0.2 }` means that the gradient will start `10%` from the left and `20%` from the top.
    *
    * **On web**, this only changes the angle of the gradient because CSS gradients don't support changing the starting position.
    */
   start?: LinearGradientPoint | null;
   /**
-   * An object `{ x: number; y: number }` or array `[x, y]` that represents the point
-   * at which the gradient ends, as a fraction of the overall size of the gradient ranging from 0 to 1, inclusive.
-   *
    * For example, `{ x: 0.1, y: 0.2 }` means that the gradient will end `10%` from the left and `20%` from the bottom.
    *
    * **On web**, this only changes the angle of the gradient because CSS gradients don't support changing the end position.
    */
   end?: LinearGradientPoint | null;
-} & React.ComponentProps<typeof View>;
+};
 
 /**
  * Renders a native view that transitions between multiple colors in a linear direction.
@@ -73,7 +85,7 @@ export class LinearGradient extends React.Component<LinearGradientProps> {
 
 function _normalizePoint(
   point: LinearGradientPoint | null | undefined
-): [number, number] | undefined {
+): NativeLinearGradientPoint | undefined {
   if (!point) {
     return undefined;
   }

package/src/NativeLinearGradient.android.tsx

@@ -1,4 +1,4 @@
-import { requireNativeViewManager } from '@unimodules/core';
+import { requireNativeViewManager } from 'expo-modules-core';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 

package/src/NativeLinearGradient.ios.tsx

@@ -1,10 +1,10 @@
-import { requireNativeViewManager } from '@unimodules/core';
+import { requireNativeViewManager } from 'expo-modules-core';
 import * as React from 'react';
 
 import { NativeLinearGradientProps } from './NativeLinearGradient.types';
 
-const NativeLinearGradient = requireNativeViewManager('ExpoLinearGradient') as React.FC<
-  NativeLinearGradientProps
->;
+const NativeLinearGradient = requireNativeViewManager(
+  'ExpoLinearGradient'
+) as React.FC<NativeLinearGradientProps>;
 
 export default NativeLinearGradient;

package/src/NativeLinearGradient.types.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { View } from 'react-native';
+import { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native';
 
-export type NativeLinearGradientProps = React.ComponentProps<typeof View> &
-  React.PropsWithChildren<{
+export type NativeLinearGradientProps = ViewProps &
+  PropsWithChildren<{
     colors: number[];
     locations?: number[] | null;
     startPoint?: NativeLinearGradientPoint | null;

package/src/NativeLinearGradient.web.tsx

@@ -12,11 +12,10 @@ export default function NativeLinearGradient({
   ...props
 }: NativeLinearGradientProps): React.ReactElement {
   const [layout, setLayout] = React.useState<LayoutRectangle | null>(null);
-  const [gradientColors, setGradientColors] = React.useState<string[]>([]);
-  const [pseudoAngle, setPseudoAngle] = React.useState<number>(0);
 
   const { width = 1, height = 1 } = layout ?? {};
-  React.useEffect(() => {
+
+  const pseudoAngle = React.useMemo(() => {
     const getControlPoints = (): NativeLinearGradientPoint[] => {
       let correctedStartPoint: NativeLinearGradientPoint = [0, 0];
       if (Array.isArray(startPoint)) {
@@ -43,11 +42,11 @@ export default function NativeLinearGradient({
     const py = end[1] - start[1];
     const px = end[0] - start[0];
 
-    setPseudoAngle(90 + (Math.atan2(py, px) * 180) / Math.PI);
+    return 90 + (Math.atan2(py, px) * 180) / Math.PI;
   }, [width, height, startPoint, endPoint]);
 
-  React.useEffect(() => {
-    const nextGradientColors = colors.map((color: number, index: number): string => {
+  const gradientColors = React.useMemo(() => {
+    return colors.map((color: number, index: number): string => {
       const hexColor = normalizeColor(color);
       let output = hexColor;
       if (locations && locations[index]) {
@@ -58,8 +57,6 @@ export default function NativeLinearGradient({
       }
       return output;
     });
-
-    setGradientColors(nextGradientColors);
   }, [colors, locations]);
 
   const colorStyle = gradientColors.join(',');
@@ -74,7 +71,7 @@ export default function NativeLinearGradient({
         // @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
         { backgroundImage },
       ]}
-      onLayout={event => {
+      onLayout={(event) => {
         const { x, y, width, height } = event.nativeEvent.layout;
         const oldLayout = layout ?? { x: 0, y: 0, width: 1, height: 1 };
         // don't set new layout state unless the layout has actually changed