From d6dc935cb8f3378056f1235c49aa2ac002be527c Mon Sep 17 00:00:00 2001 From: DrStoop Date: Tue, 22 Oct 2024 19:24:26 +0300 Subject: [PATCH 1/4] Update `IContentLoaderProps` in index.ts Extended `IcontentLoaderProps` with props `backgroundOpacity` and `foregroundOpacity`. --- src/native/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/native/index.ts b/src/native/index.ts index c0f4e269..a5c1a842 100644 --- a/src/native/index.ts +++ b/src/native/index.ts @@ -5,7 +5,9 @@ import ContentLoader from './ContentLoader' export interface IContentLoaderProps extends SvgProps { animate?: boolean backgroundColor?: string + backgroundOpacity?: number foregroundColor?: string + foregroundOpacity?: number rtl?: boolean speed?: number interval?: number From 21522454d5e9dc3c2e02073c3bc5ed69651d9741 Mon Sep 17 00:00:00 2001 From: DrStoop Date: Tue, 22 Oct 2024 19:31:21 +0300 Subject: [PATCH 2/4] Update NativeSvg fore back/foregroundOpacity Svg.tsx Added `backgroundOpacity` and `foregroundOpacity` freature for Native. --- src/native/Svg.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/native/Svg.tsx b/src/native/Svg.tsx index af748eda..68fbf791 100644 --- a/src/native/Svg.tsx +++ b/src/native/Svg.tsx @@ -17,7 +17,9 @@ class NativeSvg extends Component { static defaultProps = { animate: true, backgroundColor: '#f5f6f7', + backgroundOpacity: 1, foregroundColor: '#eee', + foregroundOpacity: 1, rtl: false, speed: 1.2, interval: 0.25, @@ -74,7 +76,9 @@ class NativeSvg extends Component { const { children, backgroundColor, + backgroundOpacity, foregroundColor, + foregroundOpacity, rtl, style, beforeMask, @@ -124,9 +128,9 @@ class NativeSvg extends Component { y1={0} y2={0} > - - - + + + From 96230b4043db4b4dc4749b2085c75f380c1bec44 Mon Sep 17 00:00:00 2001 From: DrStoop Date: Tue, 22 Oct 2024 19:45:15 +0300 Subject: [PATCH 3/4] Enabling `backgroundOpacity` and `foregroundOpacity` for `ContentLoader` on Native. in README.md Updated docs to describe `backgourndOpacity` and `foregroundOpacity` props of `ContentLoader` available in React Native environment. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 01ca203d..fc605ce4 100755 --- a/README.md +++ b/README.md @@ -119,8 +119,8 @@ const MyLoader = () => ( | **`rtl?: boolean`**
Defaults to `false` | React DOM
React Native | Content right-to-left. | | **`backgroundColor?: string`**
Defaults to `#f5f6f7` | React DOM
React Native | Used as background of animation. | | **`foregroundColor?: string`**
Defaults to `#eee` | React DOM
React Native | Used as the foreground of animation. | -| **`backgroundOpacity?: number`**
Defaults to `1` | React DOM only | Background opacity (0 = transparent, 1 = opaque)
used to solve an issue in [Safari](#safari--ios) | -| **`foregroundOpacity?: number`**
Defaults to `1` | React DOM only | Animation opacity (0 = transparent, 1 = opaque)
used to solve an issue in [Safari](#safari--ios) | +| **`backgroundOpacity?: number`**
Defaults to `1` | React DOM
React Native | Background opacity (0 = transparent, 1 = opaque)
used to solve an issue in [Safari](#safari--ios) | +| **`foregroundOpacity?: number`**
Defaults to `1` | React DOM
React Native | Animation opacity (0 = transparent, 1 = opaque)
used to solve an issue in [Safari](#safari--ios) | | **`style?: React.CSSProperties`**
Defaults to `{}` | React DOM only | | | **`uniqueKey?: string`**
Defaults to random unique id | React DOM only | Use the same value of prop key, 
that will solve inconsistency on the SSR, see more [here](https://github.com/danilowoz/react-content-loader/issues/78). | | **`beforeMask?: JSX.Element`**
Defaults to null | React DOM
React Native | Define custom shapes before content, 
see more [here](https://github.com/danilowoz/react-content-loader/issues/266). | From 6a48ef99513316c86fdacdb2286744f379f7c5f8 Mon Sep 17 00:00:00 2001 From: DrStoop Date: Mon, 7 Jul 2025 14:24:59 +0300 Subject: [PATCH 4/4] test: fixed tests for PR #324 --- .../__snapshots__/snapshots.test.tsx.snap | 18 ++++++++++++++++++ .../BulletListStyle.test.tsx.snap | 3 +++ .../__snapshots__/CodeStyle.test.tsx.snap | 3 +++ .../__snapshots__/FacebookStyle.test.tsx.snap | 3 +++ .../__snapshots__/InstagramStyle.test.tsx.snap | 3 +++ .../__snapshots__/ListStyle.test.tsx.snap | 3 +++ 6 files changed, 33 insertions(+) diff --git a/src/native/__tests__/__snapshots__/snapshots.test.tsx.snap b/src/native/__tests__/__snapshots__/snapshots.test.tsx.snap index 24296b87..d46cdfb3 100644 --- a/src/native/__tests__/__snapshots__/snapshots.test.tsx.snap +++ b/src/native/__tests__/__snapshots__/snapshots.test.tsx.snap @@ -73,14 +73,17 @@ exports[`ContentLoader snapshots renders correctly the basic version 1`] = ` @@ -124,14 +127,17 @@ exports[`ContentLoader snapshots renders correctly with beforeMask 1`] = ` @@ -169,14 +175,17 @@ exports[`ContentLoader snapshots renders correctly with beforeMask 2`] = ` @@ -256,14 +265,17 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined 1`] = ` @@ -343,14 +355,17 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined and size @@ -430,14 +445,17 @@ exports[`ContentLoader snapshots renders correctly with viewBox empty 1`] = ` diff --git a/src/native/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap b/src/native/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap index c9581b6c..27aece7e 100644 --- a/src/native/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap +++ b/src/native/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap @@ -85,14 +85,17 @@ exports[`BulletListStyle renders correctly 1`] = ` diff --git a/src/native/__tests__/presets/__snapshots__/CodeStyle.test.tsx.snap b/src/native/__tests__/presets/__snapshots__/CodeStyle.test.tsx.snap index a0ed15ed..2053b16e 100644 --- a/src/native/__tests__/presets/__snapshots__/CodeStyle.test.tsx.snap +++ b/src/native/__tests__/presets/__snapshots__/CodeStyle.test.tsx.snap @@ -89,14 +89,17 @@ exports[`CodeStyle renders correctly 1`] = ` diff --git a/src/native/__tests__/presets/__snapshots__/FacebookStyle.test.tsx.snap b/src/native/__tests__/presets/__snapshots__/FacebookStyle.test.tsx.snap index 692bdc9a..b54c2361 100644 --- a/src/native/__tests__/presets/__snapshots__/FacebookStyle.test.tsx.snap +++ b/src/native/__tests__/presets/__snapshots__/FacebookStyle.test.tsx.snap @@ -73,14 +73,17 @@ exports[`FacebookStyle renders correctly 1`] = ` diff --git a/src/native/__tests__/presets/__snapshots__/InstagramStyle.test.tsx.snap b/src/native/__tests__/presets/__snapshots__/InstagramStyle.test.tsx.snap index c0025d32..19f339c8 100644 --- a/src/native/__tests__/presets/__snapshots__/InstagramStyle.test.tsx.snap +++ b/src/native/__tests__/presets/__snapshots__/InstagramStyle.test.tsx.snap @@ -62,14 +62,17 @@ exports[`InstagramStyle renders correctly 1`] = ` diff --git a/src/native/__tests__/presets/__snapshots__/ListStyle.test.tsx.snap b/src/native/__tests__/presets/__snapshots__/ListStyle.test.tsx.snap index 84ddb2ff..849db5e4 100644 --- a/src/native/__tests__/presets/__snapshots__/ListStyle.test.tsx.snap +++ b/src/native/__tests__/presets/__snapshots__/ListStyle.test.tsx.snap @@ -81,14 +81,17 @@ exports[`ListStyle renders correctly 1`] = `