Enabling backgroundOpacity and foregroundOpacity for `ContentLoad…

…er` in React Native environment (#324) * Update `IContentLoaderProps` in index.ts Extended `IcontentLoaderProps` with props `backgroundOpacity` and `foregroundOpacity`. * Update NativeSvg fore back/foregroundOpacity Svg.tsx Added `backgroundOpacity` and `foregroundOpacity` freature for Native. * 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.
danilowoz · Oct 22, 2024 · 418fae9 · 418fae9
1 parent c73be7a
commit 418fae9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -119,8 +119,8 @@ const MyLoader = () => (
 | **`rtl?: boolean`** <br /> Defaults to `false`                   | React DOM<br/>React Native | Content right-to-left.                                                                                                                                                                                                                                                                              |
 | **`backgroundColor?: string`** <br /> Defaults to `#f5f6f7`      | React DOM<br/>React Native | Used as background of animation.                                                                                                                                                                                                                                                                    |
 | **`foregroundColor?: string`** <br /> Defaults to `#eee`         | React DOM<br/>React Native | Used as the foreground of animation.                                                                                                                                                                                                                                                                |
-| **`backgroundOpacity?: number`** <br /> Defaults to `1`          | React DOM only             | Background opacity (0 = transparent, 1 = opaque)<br/>used to solve an issue in [Safari](#safari--ios)                                                                                                                                                                                               |
-| **`foregroundOpacity?: number`** <br /> Defaults to `1`          | React DOM only             | Animation opacity (0 = transparent, 1 = opaque)<br/>used to solve an issue in [Safari](#safari--ios)                                                                                                                                                                                                |
+| **`backgroundOpacity?: number`** <br /> Defaults to `1`          | React DOM<br/>React Native | Background opacity (0 = transparent, 1 = opaque)<br/>used to solve an issue in [Safari](#safari--ios)                                                                                                                                                                                               |
+| **`foregroundOpacity?: number`** <br /> Defaults to `1`          | React DOM<br/>React Native | Animation opacity (0 = transparent, 1 = opaque)<br/>used to solve an issue in [Safari](#safari--ios)                                                                                                                                                                                                |
 | **`style?: React.CSSProperties`** <br /> Defaults to `{}`        | React DOM only             |                                                                                                                                                                                                                                                                                                     |
 | **`uniqueKey?: string`** <br /> Defaults to random unique id     | React DOM only             | Use the same value of prop key, <br/>that will solve inconsistency on the SSR, see more [here](https://github.com/danilowoz/react-content-loader/issues/78).                                                                                                                                        |
 | **`beforeMask?: JSX.Element`** <br /> Defaults to null           | React DOM<br/>React Native | Define custom shapes before content, <br/>see more [here](https://github.com/danilowoz/react-content-loader/issues/266).                                                                                                                                                                            |

diff --git a/src/native/Svg.tsx b/src/native/Svg.tsx
@@ -17,7 +17,9 @@ class NativeSvg extends Component<IContentLoaderProps> {
   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<IContentLoaderProps> {
     const {
       children,
       backgroundColor,
+      backgroundOpacity,
       foregroundColor,
+      foregroundOpacity,
       rtl,
       style,
       beforeMask,
@@ -124,9 +128,9 @@ class NativeSvg extends Component<IContentLoaderProps> {
             y1={0}
             y2={0}
           >
-            <Stop offset={0} stopColor={backgroundColor} />
-            <Stop offset={0.5} stopColor={foregroundColor} />
-            <Stop offset={1} stopColor={backgroundColor} />
+            <Stop offset={0} stopColor={backgroundColor} stopOpacity={backgroundOpacity} />
+            <Stop offset={0.5} stopColor={foregroundColor} stopOpacity={foregroundOpacity} />
+            <Stop offset={1} stopColor={backgroundColor} stopOpacity={backgroundOpacity} />
           </AnimatedLinearGradient>
         </Defs>
       </Svg>

diff --git 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