From 48e0cde42a2c3d9614aea02822b2f3576e58d6bb Mon Sep 17 00:00:00 2001 From: Abraham Hernandez Date: Wed, 27 Feb 2019 14:16:31 -0500 Subject: [PATCH 1/7] Adding syntax highlighter --- README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index b75d67e..c5f033c 100644 --- a/README.md +++ b/README.md @@ -23,11 +23,13 @@ Supported backgrounds: ### Usage -``` -import Gradient from 'react-native-css-gradient`; +```js +import Gradient from 'react-native-css-gradient'; render() { - const gradient = `linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%), repeating-linear-gradient(-115deg, transparent, transparent 20px, rgba(255,255,255,0.1) 20px, rgba(255,255,255,0.1) 40px), repeating-linear-gradient(115deg, transparent, transparent 20px, rgba(255,255,255,0.1) 20px, rgba(255,255,255,0.1) 40px)`; + const gradient = `linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%), + repeating-linear-gradient(-115deg, transparent, transparent 20px, rgba(255,255,255,0.1) 20px, rgba(255,255,255,0.1) 40px), + repeating-linear-gradient(115deg, transparent, transparent 20px, rgba(255,255,255,0.1) 20px, rgba(255,255,255,0.1) 40px)`; return } From ac93a0ebf0366bc43274b41fc8c3aafc47d8cea7 Mon Sep 17 00:00:00 2001 From: mata Date: Sat, 3 Aug 2019 23:24:47 +0200 Subject: [PATCH 2/7] Updated Expo import for a gradient --- index.js | 2 +- package.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index c4f3e6f..8186851 100755 --- a/index.js +++ b/index.js @@ -1,11 +1,11 @@ import React from "react"; import { View, StyleSheet } from "react-native"; import generateGradient from "./generator"; +import { LinearGradient } from "expo-linear-gradient"; export { generateGradient }; export default ({ gradient, children, style }) => { - const LinearGradient = require("expo").LinearGradient; const generated = generateGradient(gradient, { width: style.width, height: style.height diff --git a/package.json b/package.json index 2a90c2c..6d75792 100755 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ }, "peerDependencies": { "expo": "*", + "expo-linear-gradient": "*", "react": "*", "react-native": "*" } From 67f9c9b9589f4362b80e1d661cfc647dc04ab1b7 Mon Sep 17 00:00:00 2001 From: catalinmiron Date: Fri, 8 Nov 2019 11:55:37 +0100 Subject: [PATCH 3/7] Add fast-memoize library #5 --- package-lock.json | 7 ++++++- package.json | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 4233d02..5f066f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,9 +1,14 @@ { "name": "react-native-css-gradient", - "version": "0.3.0", + "version": "0.3.1", "lockfileVersion": 1, "requires": true, "dependencies": { + "fast-memoize": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.1.tgz", + "integrity": "sha512-xdmw296PCL01tMOXx9mdJSmWY29jQgxyuZdq0rEHMu+Tpe1eOEtCycoG6chzlcrWsNgpZP7oL8RiQr7+G6Bl6g==" + }, "gradient-parser": { "version": "0.1.5", "resolved": "https://registry.npmjs.org/gradient-parser/-/gradient-parser-0.1.5.tgz", diff --git a/package.json b/package.json index 6d75792..3ad5fa6 100755 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "homepage": "https://github.com/catalinmiron/react-native-css-gradient#readme", "main": "index.js", "dependencies": { + "fast-memoize": "^2.5.1", "gradient-parser": "0.1.5" }, "peerDependencies": { From 2d6c1d8275bacc3a52f182c59e63d2d28fb2d0d8 Mon Sep 17 00:00:00 2001 From: catalinmiron Date: Fri, 8 Nov 2019 11:56:05 +0100 Subject: [PATCH 4/7] Require expo-linear-gradient just in case the user wants Gradient component #5 --- index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 8186851..26835af 100755 --- a/index.js +++ b/index.js @@ -1,11 +1,15 @@ import React from "react"; import { View, StyleSheet } from "react-native"; import generateGradient from "./generator"; -import { LinearGradient } from "expo-linear-gradient"; export { generateGradient }; export default ({ gradient, children, style }) => { + // Avoid breaking this when people are not using expo :) + // find a better solution to expose either expo-linear-gradient or + // react-native-linear-gradient. + const { LinearGradient } = require("expo-linear-gradient"); + const generated = generateGradient(gradient, { width: style.width, height: style.height @@ -20,6 +24,7 @@ export default ({ gradient, children, style }) => { ); } + return ( {children || null} From 6da4b97388ae77523e46f38dad7ab4c3b3ffef1a Mon Sep 17 00:00:00 2001 From: catalinmiron Date: Fri, 8 Nov 2019 11:56:24 +0100 Subject: [PATCH 5/7] Introduce memo + fix render issues #5 --- generator.js | 82 +++++++++++++++++++++++++--------------------------- 1 file changed, 40 insertions(+), 42 deletions(-) diff --git a/generator.js b/generator.js index 9f45edc..6a37ca4 100755 --- a/generator.js +++ b/generator.js @@ -2,6 +2,7 @@ TODO: write tests (lazy) like always right? <3 */ const parser = require("gradient-parser"); +const memoize = require("fast-memoize"); const getColor = color => { switch (color.type) { @@ -14,27 +15,23 @@ const getColor = color => { } }; -const getColorsAndLocations = (colorStops, maxWidth) => +const getColorsAndLocations = memoize((colorStops, maxWidth) => colorStops.reduce( (acc, color, index) => { acc.colors = [...acc.colors, getColor(color)]; // PX value for location will break! // TODO Make it happen for px + repeat? - const locationValue = getPixelsForColor( - color, - colorStops.length, - index, - maxWidth - ); + const locationValue = getPixelsForColor(color, colorStops.length, index, maxWidth); acc["locations"] = [...acc.locations, locationValue]; return acc; }, { colors: [], locations: [] } - ); + ) +); -const getPixelsForColor = (color, colorsLength, index, maxWidth) => { +const getPixelsForColor = memoize((color, colorsLength, index, maxWidth) => { const { length } = color; if (!length) { return (1 / (colorsLength - 1)) * index; @@ -49,33 +46,30 @@ const getPixelsForColor = (color, colorsLength, index, maxWidth) => { return length.value / 100; } } -}; +}); + const getRepeatingColorsAndLocations = (colorStops, sizes) => { const { width: maxWidth, height: maxHeight } = sizes; - - if (!maxWidth && !maxHeight) { - throw new Error( - "You have to define width and height for repeating gradient to work" - ); - } - - const { - colors: initialColors, - locations: initialLocations - } = getColorsAndLocations(colorStops, maxWidth); + const { colors: initialColors, locations: initialLocations } = getColorsAndLocations(colorStops, maxWidth); const maxValue = parseFloat(initialLocations.slice(-1)[0]); const increment = maxValue / maxWidth; - const maxChunks = Math.round(maxWidth / maxValue) + 1; + // we need to add +1 but this is breaking LinearGradient, maybe can't render + // it outside the viewport. + const maxChunks = Math.round(maxWidth / maxValue); const locations = [...Array(maxChunks).keys()].reduce((acc, i) => { - return [...acc, ...initialLocations.map(j => j / maxWidth + increment * i)]; + return [ + ...acc, + ...initialLocations.map(j => { + return j / maxWidth + increment * i; + }) + ]; }, []); - const colors = locations.map( - (_, i) => initialColors[i % initialColors.length] - ); + const colors = locations.map((_, i) => initialColors[i % initialColors.length]); - return { locations, colors }; + return { colors, locations }; }; -const getVectorsByDirection = direction => { + +const getVectorsByDirection = memoize(direction => { switch (direction) { case "top": return getVectorsByAngle(0); @@ -94,27 +88,31 @@ const getVectorsByDirection = direction => { case "right bottom": return getVectorsByAngle(90 + 45); } -}; -const round = number => Math.round(number * 1000) / 1000; -const degreesToRadians = function(degrees) { - return (degrees * Math.PI) / 180; -}; -const getVectorsByAngle = alfa => { +}); + +const round = memoize(number => Math.round(number * 10000) / 10000); +const degreesToRadians = memoize(degrees => (degrees * Math.PI) / 180); + +const getVectorsByAngle = memoize(alfa => { const angle = degreesToRadians(alfa); - let gradientLineLength = round( - Math.abs(Math.sin(angle)) + Math.abs(Math.cos(angle)) - ); + let gradientLineLength = round(Math.abs(Math.sin(angle)) + Math.abs(Math.cos(angle))); let center = { x: 0.5, y: 0.5 }; let yDiff = (Math.sin(angle - Math.PI / 2) * gradientLineLength) / 2; let xDiff = (Math.cos(angle - Math.PI / 2) * gradientLineLength) / 2; return { - start: [center.x - xDiff, center.y - yDiff], - end: [center.x + xDiff, center.y + yDiff] + start: { + x: center.x - xDiff, + y: center.y - yDiff + }, + end: { + x: center.x + xDiff, + y: center.y + yDiff + } }; -}; +}); const getVectorsByOrientation = orientation => { return orientation.type === "directional" @@ -122,7 +120,7 @@ const getVectorsByOrientation = orientation => { : getVectorsByAngle(orientation.value); }; -const generateGradient = (gradient, sizes) => { +const generateGradient = memoize((gradient, sizes) => { return parser.parse(gradient).map(({ type, colorStops, orientation }) => { // YOLO: Radial gradients <3 if (type === "radial-gradient") { @@ -138,6 +136,6 @@ const generateGradient = (gradient, sizes) => { ...getVectorsByOrientation(orientation) }; }); -}; +}); export default generateGradient; From edb11f495a8a4a59bba1c3e35b9450de8680cfcf Mon Sep 17 00:00:00 2001 From: catalinmiron Date: Fri, 8 Nov 2019 11:57:59 +0100 Subject: [PATCH 6/7] v0.4.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3ad5fa6..0f0d772 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-css-gradient", - "version": "0.3.1", + "version": "0.4.0", "description": "CSS Gradient for LinearGradient component.", "author": "Catalin Miron", "license": "MIT", From 0e401bdcf48d6cef25efbb26b38295a4c4b6caa7 Mon Sep 17 00:00:00 2001 From: Catalin Miron Date: Thu, 19 Aug 2021 11:33:55 +0200 Subject: [PATCH 7/7] Create FUNDING.yml --- .github/FUNDING.yml | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 .github/FUNDING.yml diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..0c7b638 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,12 @@ +# These are supported funding model platforms + +github: catalinmiron # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] +patreon: catalinmiron # Replace with a single Patreon username +open_collective: # Replace with a single Open Collective username +ko_fi: # Replace with a single Ko-fi username +tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel +community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry +liberapay: # Replace with a single Liberapay username +issuehunt: # Replace with a single IssueHunt username +otechie: # Replace with a single Otechie username +custom: http://buymeacoffee.com/catalinmiron # Replace with a single custom sponsorship URL