Enabling backgroundOpacity and foregroundOpacity for ContentLoader in React Native environment (danilowoz#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.

Author: DrStoop

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).                                                                                                                                                                            |

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>

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