react-native-linear-gradient-fabric 0.1.0

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKrE,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAiCD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,SAAS,EACT,KAAqB,EACrB,GAAiB,EACjB,QAAgB,EAChB,KAAS,EACT,WAAkC,EAClC,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CA0B1C;AAED,eAAe,cAAc,CAAC"}

package/package.json

@@ -0,0 +1,145 @@
+{
+  "name": "react-native-linear-gradient-fabric",
+  "version": "0.1.0",
+  "description": "A modern replacement for react-native-linear-gradient with full Fabric support",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/.gradle",
+    "!android/.idea",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example:ios": "cd example && bun run ios",
+    "example:android": "cd example && bun run android",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint:fix": "eslint \"**/*.{js,ts,tsx}\" --fix",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "release": "release-it",
+    "release:beta": "release-it --preRelease=beta",
+    "release:dry": "release-it --dry-run"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "react-native-linear-gradient",
+    "linear-gradient",
+    "gradient",
+    "fabric",
+    "new-architecture"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Yoon-SeungHwan/react-native-linear-gradient-fabric.git"
+  },
+  "author": "Seunghwan Yoon <hwani6736@gmail.com> (https://github.com/Yoon-SeungHwan)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Yoon-SeungHwan/react-native-linear-gradient-fabric/issues"
+  },
+  "homepage": "https://github.com/Yoon-SeungHwan/react-native-linear-gradient-fabric#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.73.1",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.44",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "18.2.0",
+    "react-native": "0.73.2",
+    "react-native-builder-bob": "^0.23.2",
+    "release-it": "^15.0.0",
+    "typescript": "^5.2.2"
+  },
+  "overrides": {
+    "execa": "^5.1.1"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    },
+    "hooks": {
+      "before:init": [
+        "bun run lint",
+        "bun run typecheck"
+      ],
+      "after:bump": "bun run prepare"
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "RNLinearGradientFabricSpec",
+    "type": "components",
+    "jsSrcsDir": "src"
+  }
+}

package/react-native-linear-gradient-fabric.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-linear-gradient-fabric"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/seunghwanyoon/react-native-linear-gradient-fabric.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm}"
+
+  install_modules_dependencies(s)
+end

package/src/LinearGradientNativeComponent.ts

@@ -0,0 +1,43 @@
+import type { ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface NativeLinearGradientPoint {
+  x: Float;
+  y: Float;
+}
+
+export interface NativeLinearGradientProps extends ViewProps {
+  /**
+   * An array of colors in integer format (processed by processColor)
+   */
+  colors: ReadonlyArray<Int32>;
+  /**
+   * An array of locations for each color stop, values should be between 0 and 1
+   */
+  locations?: ReadonlyArray<Float>;
+  /**
+   * The start point of the gradient (x: 0 = left, 1 = right; y: 0 = top, 1 = bottom)
+   */
+  startPoint?: NativeLinearGradientPoint;
+  /**
+   * The end point of the gradient (x: 0 = left, 1 = right; y: 0 = top, 1 = bottom)
+   */
+  endPoint?: NativeLinearGradientPoint;
+  /**
+   * If true, use angle instead of start/end points
+   */
+  useAngle?: boolean;
+  /**
+   * Angle of the gradient in degrees (0 = up, 90 = right, 180 = down, 270 = left)
+   */
+  angle?: Float;
+  /**
+   * The center point for the angle rotation
+   */
+  angleCenter?: NativeLinearGradientPoint;
+}
+
+export default codegenNativeComponent<NativeLinearGradientProps>(
+  'LinearGradientView'
+);

package/src/index.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
+import { processColor, StyleSheet } from 'react-native';
+
+import LinearGradientNativeComponent from './LinearGradientNativeComponent';
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface LinearGradientProps {
+  /**
+   * An array of at least 2 colors that represent gradient colors
+   */
+  colors: ColorValue[];
+  /**
+   * An array of locations for each color stop, values should be between 0 and 1
+   * The array length must match the colors array length
+   */
+  locations?: number[];
+  /**
+   * The start point of the gradient
+   * Default: { x: 0.5, y: 0 } (top center)
+   */
+  start?: Point;
+  /**
+   * The end point of the gradient
+   * Default: { x: 0.5, y: 1 } (bottom center)
+   */
+  end?: Point;
+  /**
+   * If true, use angle instead of start/end points
+   * Default: false
+   */
+  useAngle?: boolean;
+  /**
+   * Angle of the gradient in degrees (0 = up, 90 = right, 180 = down, 270 = left)
+   * Only used when useAngle is true
+   * Default: 0
+   */
+  angle?: number;
+  /**
+   * The center point for the angle rotation
+   * Default: { x: 0.5, y: 0.5 }
+   */
+  angleCenter?: Point;
+  /**
+   * Style for the gradient view
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Children elements to render on top of the gradient
+   */
+  children?: React.ReactNode;
+}
+
+const DEFAULT_START: Point = { x: 0.5, y: 0 };
+const DEFAULT_END: Point = { x: 0.5, y: 1 };
+const DEFAULT_ANGLE_CENTER: Point = { x: 0.5, y: 0.5 };
+
+function processColors(colors: ColorValue[]): number[] {
+  return colors.map((color) => {
+    const processed = processColor(color);
+    if (processed === null || processed === undefined) {
+      throw new Error(`Invalid color value: ${String(color)}`);
+    }
+    return typeof processed === 'number' ? processed : 0;
+  });
+}
+
+function validateLocations(
+  locations: number[] | undefined,
+  colorsLength: number
+): number[] | undefined {
+  if (!locations) {
+    return undefined;
+  }
+
+  if (locations.length !== colorsLength) {
+    console.warn(
+      `LinearGradient: locations array length (${locations.length}) does not match colors array length (${colorsLength})`
+    );
+  }
+
+  return locations;
+}
+
+export function LinearGradient({
+  colors,
+  locations,
+  start = DEFAULT_START,
+  end = DEFAULT_END,
+  useAngle = false,
+  angle = 0,
+  angleCenter = DEFAULT_ANGLE_CENTER,
+  style,
+  children,
+  ...rest
+}: LinearGradientProps): React.ReactElement {
+  if (colors.length < 2) {
+    throw new Error('LinearGradient requires at least 2 colors');
+  }
+
+  const processedColors = React.useMemo(() => processColors(colors), [colors]);
+  const validatedLocations = React.useMemo(
+    () => validateLocations(locations, colors.length),
+    [locations, colors.length]
+  );
+
+  return (
+    <LinearGradientNativeComponent
+      {...rest}
+      style={StyleSheet.flatten(style)}
+      colors={processedColors}
+      locations={validatedLocations}
+      startPoint={start}
+      endPoint={end}
+      useAngle={useAngle}
+      angle={angle}
+      angleCenter={angleCenter}
+    >
+      {children}
+    </LinearGradientNativeComponent>
+  );
+}
+
+export default LinearGradient;