expo-mesh-gradient 0.1.0 → 0.2.0

package/.eslintrc.js

@@ -1,5 +1,2 @@
-module.exports = {
-  root: true,
-  extends: ['universe/native', 'universe/web'],
-  ignorePatterns: ['build'],
-};
+// @generated by expo-module-scripts
+module.exports = require('expo-module-scripts/eslintrc.base.js');

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+## Unpublished
+
+### 🛠 Breaking changes
+
+### 🎉 New features
+
+### 🐛 Bug fixes
+
+### 💡 Others
+
+## 0.2.0 — 2024-11-29
+
+### 🎉 New features
+
+- Allow passing children to render views on top of the gradient. ([#33271](https://github.com/expo/expo/pull/33271) by [@tsapeta](https://github.com/tsapeta))
+- Exported `MeshGradientViewProps` type. ([#33299](https://github.com/expo/expo/pull/33299) by [@tsapeta](https://github.com/tsapeta))
+- Added `mask` prop to mask the gradient using the alpha channel of the given children views.
+
+## 0.1.0 — 2024-10-20
+
+### 🎉 New features
+
+- Initial release 🎉

package/README.md

@@ -1,6 +1,13 @@
-# expo-mesh-gradient
+<p>
+  <a href="https://docs.expo.dev/versions/latest/sdk/mesh-gradient/">
+    <img
+      src="../../.github/resources/expo-mesh-gradient.svg"
+      alt="expo-mesh-gradient"
+      height="64" />
+  </a>
+</p>
 
-My new module
+A module that exposes MeshGradient view from SwiftUI to React Native.
 
 # API documentation
 
@@ -18,18 +25,13 @@ For bare React Native projects, you must ensure that you have [installed and con
 ### Add the package to your npm dependencies
 
 ```
-npm install expo-mesh-gradient
+npx expo install expo-mesh-gradient
 ```
 
-### Configure for Android
-
-
-
-
-### Configure for iOS
+### Configure for iOS, tvOS and macOS
 
 Run `npx pod-install` after installing the npm package.
 
 # Contributing
 
-Contributions are very welcome! Please refer to guidelines described in the [contributing guide]( https://github.com/expo/expo#contributing).
+Contributions are very welcome! Please refer to guidelines described in the [contributing guide](https://github.com/expo/expo#contributing).

package/build/MeshGradient.types.d.ts

@@ -1,6 +1,5 @@
-import type { StyleProp, ViewStyle } from "react-native";
-export type MeshGradientViewProps = {
-    style?: StyleProp<ViewStyle>;
+import type { ViewProps } from 'react-native';
+export interface MeshGradientViewProps extends ViewProps {
     /**
      * Width of the mesh, i.e. the number of vertices per row.
      * @default 0
@@ -13,6 +12,7 @@ export type MeshGradientViewProps = {
     rows?: number;
     /**
      * An array of two-dimensional points on the mesh. Must contain `columns * rows` elements.
+     * @default []
      */
     points?: number[][];
     /**
@@ -31,5 +31,11 @@ export type MeshGradientViewProps = {
      * @default true
      */
     ignoresSafeArea?: boolean;
-};
+    /**
+     * Masks the gradient using the alpha channel of the given children views.
+     * > **Note**: When this option is enabled, all user interactions (gestures) on children views are ignored.
+     * @default false
+     */
+    mask?: boolean;
+}
 //# sourceMappingURL=MeshGradient.types.d.ts.map

package/build/MeshGradient.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MeshGradient.types.d.ts","sourceRoot":"","sources":["../src/MeshGradient.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC"}
+{"version":3,"file":"MeshGradient.types.d.ts","sourceRoot":"","sources":["../src/MeshGradient.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB"}

package/build/MeshGradientView.d.ts

@@ -1,4 +1,4 @@
-import { MeshGradientViewProps } from "./MeshGradient.types";
-declare const NativeView: import("react").ComponentType<MeshGradientViewProps>;
-export default NativeView;
+import { MeshGradientViewProps } from './MeshGradient.types';
+declare const _default: import("react").ComponentType<MeshGradientViewProps>;
+export default _default;
 //# sourceMappingURL=MeshGradientView.d.ts.map

package/build/MeshGradientView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MeshGradientView.d.ts","sourceRoot":"","sources":["../src/MeshGradientView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,QAAA,MAAM,UAAU,sDAA+D,CAAC;AAEhF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"MeshGradientView.d.ts","sourceRoot":"","sources":["../src/MeshGradientView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;;AAE7D,wBAA4E"}

package/build/index.d.ts

@@ -1,2 +1,3 @@
-export { default as MeshGradientView } from "./MeshGradientView";
+export { default as MeshGradientView } from './MeshGradientView';
+export { MeshGradientViewProps } from './MeshGradient.types';
 //# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC"}

package/ios/ExpoMeshGradient.podspec

@@ -12,10 +12,11 @@ Pod::Spec.new do |s|
   s.homepage       = package['homepage']
   s.platforms      = {
     :ios => '15.1',
-    :tvos => '15.1'
+    :tvos => '15.1',
+    :osx => '10.15',
   }
   s.swift_version  = '5.4'
-  s.source         = { git: 'https://github.com/expo/expo' }
+  s.source         = { git: 'https://github.com/expo/expo.git' }
   s.static_framework = true
 
   s.dependency 'ExpoModulesCore'

package/ios/MeshGradientProps.swift

@@ -10,4 +10,5 @@ class MeshGradientProps: ExpoSwiftUI.ViewProps {
   @Field var colors: [Color] = []
   @Field var smoothsColors: Bool = true
   @Field var ignoresSafeArea: Bool = true
+  @Field var mask: Bool = false
 }

package/ios/MeshGradientView.swift

@@ -7,17 +7,32 @@ struct MeshGradientView: ExpoSwiftUI.View {
   @EnvironmentObject var props: MeshGradientProps
 
   var body: some View {
-    if #available(iOS 18.0, *) {
-      MeshGradient(
-        width: props.columns,
-        height: props.rows,
-        points: props.points,
-        colors: props.colors,
-        smoothsColors: props.smoothsColors
-      )
-      .ignoresSafeArea(edges: props.ignoresSafeArea ? .all : [])
-    } else {
-      EmptyView()
+    ZStack(alignment: .topLeading) {
+      let gradient = if #available(iOS 18.0, *) {
+        AnyView(
+          MeshGradient(
+            width: props.columns,
+            height: props.rows,
+            points: props.points,
+            colors: props.colors,
+            smoothsColors: props.smoothsColors
+          )
+          .ignoresSafeArea(edges: props.ignoresSafeArea ? .all : [])
+        )
+      } else {
+        AnyView(EmptyView())
+      }
+
+      if props.mask {
+        gradient.mask(alignment: .topLeading) {
+          Children()
+        }
+      } else {
+        Group {
+          gradient
+          Children()
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-mesh-gradient",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A module that exposes MeshGradient view from SwiftUI to React Native",
   "main": "src/index.ts",
   "types": "build/index.d.ts",
@@ -11,30 +11,32 @@
     "test": "expo-module test",
     "prepare": "expo-module prepare",
     "prepublishOnly": "expo-module prepublishOnly",
-    "expo-module": "expo-module",
-    "open:ios": "xed example/ios",
-    "open:android": "open -a \"Android Studio\" example/android"
+    "expo-module": "expo-module"
+  },
+  "homepage": "https://docs.expo.dev/versions/latest/sdk/mesh-gradient/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/expo/expo.git",
+    "directory": "packages/expo-mesh-gradient"
   },
   "keywords": [
     "react-native",
     "expo",
-    "expo-mesh-gradient",
-    "ExpoMeshGradient"
+    "mesh-gradient",
+    "gradient",
+    "mesh"
   ],
-  "repository": "https://github.com/tsapeta/expo-mesh-gradient",
-  "author": "Tomasz Sapeta (tsapeta)",
+  "author": "650 Industries, Inc.",
   "license": "MIT",
-  "homepage": "https://github.com/expo/expo#readme",
   "dependencies": {},
   "devDependencies": {
     "@types/react": "~18.3.12",
-    "expo-module-scripts": "^4.0.2",
-    "expo": "~52.0.0",
-    "react-native": "0.76.0"
+    "expo-module-scripts": "^4.0.2"
   },
   "peerDependencies": {
     "expo": "*",
     "react": "*",
     "react-native": "*"
-  }
+  },
+  "gitHead": "728158f99d680cf64fb06f08301d3806c18c6f63"
 }

package/src/MeshGradient.types.ts

@@ -1,8 +1,6 @@
-import type { StyleProp, ViewStyle } from "react-native";
-
-export type MeshGradientViewProps = {
-  style?: StyleProp<ViewStyle>;
+import type { ViewProps } from 'react-native';
 
+export interface MeshGradientViewProps extends ViewProps {
   /**
    * Width of the mesh, i.e. the number of vertices per row.
    * @default 0
@@ -17,6 +15,7 @@ export type MeshGradientViewProps = {
 
   /**
    * An array of two-dimensional points on the mesh. Must contain `columns * rows` elements.
+   * @default []
    */
   points?: number[][];
 
@@ -38,4 +37,11 @@ export type MeshGradientViewProps = {
    * @default true
    */
   ignoresSafeArea?: boolean;
-};
+
+  /**
+   * Masks the gradient using the alpha channel of the given children views.
+   * > **Note**: When this option is enabled, all user interactions (gestures) on children views are ignored.
+   * @default false
+   */
+  mask?: boolean;
+}

package/src/MeshGradientView.tsx

@@ -1,7 +1,5 @@
-import { requireNativeView } from "expo";
+import { requireNativeView } from 'expo';
 
-import { MeshGradientViewProps } from "./MeshGradient.types";
+import { MeshGradientViewProps } from './MeshGradient.types';
 
-const NativeView = requireNativeView<MeshGradientViewProps>("ExpoMeshGradient");
-
-export default NativeView;
+export default requireNativeView<MeshGradientViewProps>('ExpoMeshGradient');

package/src/index.ts

@@ -1,4 +1,2 @@
-// Reexport the native module. On web, it will be resolved to ExpoMeshGradientModule.web.ts
-// and on native platforms to ExpoMeshGradientModule.ts
-
-export { default as MeshGradientView } from "./MeshGradientView";
+export { default as MeshGradientView } from './MeshGradientView';
+export { MeshGradientViewProps } from './MeshGradient.types';