New primaryOpacity and secondaryOpacity props to work around Safari rgba bug (#96)

* Safari and iOS transparency workaround

Introduction of `primaryOpacity` and `secondaryOpacity`

* Remove primaryOpacity/secondaryOpacity conditional props type

* Add tests for primaryOpacity and secondaryOpacity

src/Wrap.js

@@ -33,7 +33,7 @@ const Wrap = (props: WrapProps): React.Element<*> => {
         <clipPath id={idClip}>{props.children}</clipPath>
 
         <linearGradient id={idGradient}>
-          <stop offset="0%" stopColor={props.primaryColor}>
+          <stop offset="0%" stopColor={props.primaryColor} stopOpacity={props.primaryOpacity}>
             {props.animate ? (
               <animate
                 attributeName="offset"
@@ -43,7 +43,7 @@ const Wrap = (props: WrapProps): React.Element<*> => {
               />
             ) : null}
           </stop>
-          <stop offset="50%" stopColor={props.secondaryColor}>
+          <stop offset="50%" stopColor={props.secondaryColor} stopOpacity={props.secondaryOpacity}>
             {props.animate ? (
               <animate
                 attributeName="offset"
@@ -53,7 +53,7 @@ const Wrap = (props: WrapProps): React.Element<*> => {
               />
             ) : null}
           </stop>
-          <stop offset="100%" stopColor={props.primaryColor}>
+          <stop offset="100%" stopColor={props.primaryColor} stopOpacity={props.primaryOpacity}>
             {props.animate ? (
               <animate
                 attributeName="offset"

src/index.js

@@ -18,6 +18,8 @@ export type Props = {
   preserveAspectRatio: string,
   primaryColor: string,
   secondaryColor: string,
+  primaryOpacity: number,
+  secondaryOpacity: number,
   style: { [key: string]: any },
   uniquekey: string,
 }
@@ -30,6 +32,8 @@ export const defaultProps = {
   preserveAspectRatio: 'xMidYMid meet',
   primaryColor: '#f0f0f0',
   secondaryColor: '#e0e0e0',
+  primaryOpacity: 1,
+  secondaryOpacity: 1,
 }
 
 const InitialComponent = props => (