expo-mesh-gradient 0.1.0

package/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ['universe/native', 'universe/web'],
+  ignorePatterns: ['build'],
+};

package/README.md

@@ -0,0 +1,35 @@
+# expo-mesh-gradient
+
+My new module
+
+# API documentation
+
+- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/mesh-gradient/)
+- [Documentation for the main branch](https://docs.expo.dev/versions/unversioned/sdk/mesh-gradient/)
+
+# Installation in managed Expo projects
+
+For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.
+
+# Installation in bare React Native projects
+
+For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.
+
+### Add the package to your npm dependencies
+
+```
+npm install expo-mesh-gradient
+```
+
+### Configure for Android
+
+
+
+
+### Configure for iOS
+
+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).

package/build/MeshGradient.types.d.ts

@@ -0,0 +1,35 @@
+import type { StyleProp, ViewStyle } from "react-native";
+export type MeshGradientViewProps = {
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Width of the mesh, i.e. the number of vertices per row.
+     * @default 0
+     */
+    columns?: number;
+    /**
+     * Height of the mesh, i.e. the number of vertices per column.
+     * @default 0
+     */
+    rows?: number;
+    /**
+     * An array of two-dimensional points on the mesh. Must contain `columns * rows` elements.
+     */
+    points?: number[][];
+    /**
+     * An array of colors. Must contain `columns * rows` elements.
+     * @default []
+     */
+    colors?: string[];
+    /**
+     * Whether cubic (smooth) interpolation should be used for the colors in the mesh
+     * rather than only for the shape of the mesh.
+     * @default true
+     */
+    smoothsColors?: boolean;
+    /**
+     * Whether to ignore safe areas when positioning the view.
+     * @default true
+     */
+    ignoresSafeArea?: boolean;
+};
+//# sourceMappingURL=MeshGradient.types.d.ts.map

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

@@ -0,0 +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"}

package/build/MeshGradientView.d.ts

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

package/build/MeshGradientView.d.ts.map

@@ -0,0 +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"}

package/build/index.d.ts

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

package/build/index.d.ts.map

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

package/expo-module.config.json

@@ -0,0 +1,10 @@
+{
+  "platforms": [
+    "apple"
+  ],
+  "apple": {
+    "modules": [
+      "MeshGradientModule"
+    ]
+  }
+}

package/ios/Convertibles+SIMD.swift

@@ -0,0 +1,35 @@
+// Copyright 2024-present 650 Industries. All rights reserved.
+
+import ExpoModulesCore
+
+// Declares convertible conformance to `SIMD2<Float>` type which is commonly used in many SwiftUI APIs.
+extension SIMD2: @retroactive Convertible, AnyArgument where Scalar == Float {
+  public static func convert(from value: Any?, appContext: AppContext) throws -> SIMD2<Float> {
+    guard let values = value as? [Any] else {
+      throw NotAnArrayException()
+    }
+    guard values.count == 2 else {
+      throw IncorrectArraySizeException((expected: 2, actual: values.count))
+    }
+    if let values = values as? [Double] {
+      // Numbers from JS always come as doubles.
+      return SIMD2(Float(values[0]), Float(values[1]))
+    }
+    if let values = values as? [Float] {
+      return SIMD2(values[0], values[1])
+    }
+    throw Conversions.ConvertingException<SIMD2<Float>>(value)
+  }
+}
+
+internal final class NotAnArrayException: Exception {
+  override var reason: String {
+    "Given value is not an array"
+  }
+}
+
+internal final class IncorrectArraySizeException: GenericException<(expected: Int, actual: Int)> {
+  override var reason: String {
+    "Given array has unexpected number of elements: \(param.actual), expected: \(param.expected)"
+  }
+}

package/ios/ExpoMeshGradient.podspec

@@ -0,0 +1,29 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'ExpoMeshGradient'
+  s.version        = package['version']
+  s.summary        = package['description']
+  s.description    = package['description']
+  s.license        = package['license']
+  s.author         = package['author']
+  s.homepage       = package['homepage']
+  s.platforms      = {
+    :ios => '15.1',
+    :tvos => '15.1'
+  }
+  s.swift_version  = '5.4'
+  s.source         = { git: 'https://github.com/expo/expo' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

package/ios/MeshGradientModule.swift

@@ -0,0 +1,11 @@
+// Copyright 2024-present 650 Industries. All rights reserved.
+
+import ExpoModulesCore
+
+public class MeshGradientModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ExpoMeshGradient")
+
+    View(MeshGradientView.self)
+  }
+}

package/ios/MeshGradientProps.swift

@@ -0,0 +1,13 @@
+// Copyright 2024-present 650 Industries. All rights reserved.
+
+import SwiftUI
+import ExpoModulesCore
+
+class MeshGradientProps: ExpoSwiftUI.ViewProps {
+  @Field var columns: Int = 0
+  @Field var rows: Int = 0
+  @Field var points: [SIMD2<Float>] = []
+  @Field var colors: [Color] = []
+  @Field var smoothsColors: Bool = true
+  @Field var ignoresSafeArea: Bool = true
+}

package/ios/MeshGradientView.swift

@@ -0,0 +1,23 @@
+// Copyright 2024-present 650 Industries. All rights reserved.
+
+import SwiftUI
+import ExpoModulesCore
+
+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()
+    }
+  }
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "expo-mesh-gradient",
+  "version": "0.1.0",
+  "description": "A module that exposes MeshGradient view from SwiftUI to React Native",
+  "main": "src/index.ts",
+  "types": "build/index.d.ts",
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "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"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "expo-mesh-gradient",
+    "ExpoMeshGradient"
+  ],
+  "repository": "https://github.com/tsapeta/expo-mesh-gradient",
+  "author": "Tomasz Sapeta (tsapeta)",
+  "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"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
+  }
+}

package/src/MeshGradient.types.ts

@@ -0,0 +1,41 @@
+import type { StyleProp, ViewStyle } from "react-native";
+
+export type MeshGradientViewProps = {
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Width of the mesh, i.e. the number of vertices per row.
+   * @default 0
+   */
+  columns?: number;
+
+  /**
+   * Height of the mesh, i.e. the number of vertices per column.
+   * @default 0
+   */
+  rows?: number;
+
+  /**
+   * An array of two-dimensional points on the mesh. Must contain `columns * rows` elements.
+   */
+  points?: number[][];
+
+  /**
+   * An array of colors. Must contain `columns * rows` elements.
+   * @default []
+   */
+  colors?: string[];
+
+  /**
+   * Whether cubic (smooth) interpolation should be used for the colors in the mesh
+   * rather than only for the shape of the mesh.
+   * @default true
+   */
+  smoothsColors?: boolean;
+
+  /**
+   * Whether to ignore safe areas when positioning the view.
+   * @default true
+   */
+  ignoresSafeArea?: boolean;
+};

package/src/MeshGradientView.tsx

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

package/src/index.ts

@@ -0,0 +1,4 @@
+// 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";

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "expo-module-scripts/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "./build",
+    "emitDeclarationOnly": true
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__rsc_tests__/*"]
+}