Merge pull request #14 from SimformSolutionsPvtLtd/UNT-T4801

UNT-T4801 - RNSB - Support gradient [type(Linear, Radial), radial radius, angle, color, positions]

Author: Krunal-K-SimformSolutions

Example/.babelrc

@@ -2,4 +2,4 @@
   "plugins": [
     ["transform-class-properties", { "spec": true }]
   ]
-}
+}

Example/App/BarSpinnerButton.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { Text } from 'react-native';
 import styles from './styles/AppStyles';
 import SpinnerButton from 'react-native-spinner-button';

Example/App/DefaultOrBallSpinnerButton.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { Text } from 'react-native';
 import styles from './styles/AppStyles';
 import SpinnerButton from 'react-native-spinner-button';
@@ -22,6 +22,12 @@ const DefaultOrBallSpinnerButton = () => {
           isLoading={isLoading}
           onPress={handleButtonPress}
           indicatorCount={10}
+          gradientType={'linear'}
+          gradientColors={['#231557', '#44107A', '#FF1361', '#FFF800']}
+          gradientColoroffset={['0%', '29%', '67%', '100%']}
+          gradientColorAngle={90}
+          gradientRadialRadius={10}
+          gradientButtonHeight={50}
         >
           <Text style={styles.buttonText}>Default Or Ball SpinnerButton</Text>
         </SpinnerButton>

Example/App/DotSpinnerButton.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { Text } from 'react-native';
 import styles from './styles/AppStyles';
 import SpinnerButton from 'react-native-spinner-button';
@@ -25,6 +25,16 @@ const DotSpinnerButton = () => {
           spinnerType='DotIndicator'
           onPress={handleButtonPress}
           animationType={'flipInX'}
+          gradientType={'Radial'}
+          gradientColors={['#231557', '#44107A', '#FF1361', '#FFF800']}
+          gradientColoroffset={['0%', '29%', '67%', '100%']}
+          gradientColorAngle={90}
+          gradientRadialRadius={10}
+          gradientButtonHeight={50}
+          radialRadiusx={"50%"}
+          radialRadiusy={"50%"}
+          radialRadiusRX={"50%"}
+          radialRadiusRY={"50%"}
         >
           <Text style={styles.buttonText}>Dot SpinnerButton</Text>
         </SpinnerButton>

Example/App/MaterialSpinnerButton.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { Text } from 'react-native';
 import styles from './styles/AppStyles';
 import SpinnerButton from 'react-native-spinner-button';

Example/App/PacmanSpinnerButton.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { Text } from 'react-native';
 import styles from './styles/AppStyles';
 import SpinnerButton from 'react-native-spinner-button';
@@ -22,6 +22,12 @@ const PacmanSpinnerButton = () => {
           isLoading={isLoading}
           spinnerType='PacmanIndicator'
           onPress={handleButtonPress}
+          gradientType={'linear'}
+          gradientColors={['#893346', '#1aafb8', '#bf57c3', '#FF1361']}
+          gradientColoroffset={['0%', '29%', '67%', '100%']}
+          gradientColorAngle={90}
+          gradientRadialRadius={10}
+          gradientButtonHeight={50}
         >
           <Text style={styles.buttonText}>Pacman SpinnerButton</Text>
         </SpinnerButton>

Example/App/PulseSpinnerButton.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { Text } from 'react-native';
 import styles from './styles/AppStyles';
 import SpinnerButton from 'react-native-spinner-button';

Example/App/SkypeSpinnerButton.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { Text } from 'react-native';
 import styles from './styles/AppStyles';
 import SpinnerButton from 'react-native-spinner-button';
@@ -25,6 +25,16 @@ const SkypeSpinnerButton = () => {
             maxScale: 2
           }}
           onPress={handleButtonPress}
+          gradientType={'Radial'}
+          gradientColors={['#231557', '#44107A', '#FF1361', '#FFF800']}
+          gradientColoroffset={['0%', '29%', '67%', '100%']}
+          gradientColorAngle={90}
+          gradientRadialRadius={10}
+          gradientButtonHeight={50}
+          radialRadiusx={"50%"}
+          radialRadiusy={"50%"}
+          radialRadiusRX={"60%"}
+          radialRadiusRY={"40%"}
         >
           <Text style={styles.buttonText}>Skype SpinnerButton</Text>
         </SpinnerButton>

Example/App/UIActivitySpinnerButton.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { Text } from 'react-native';
 import styles from './styles/AppStyles';
 import SpinnerButton from 'react-native-spinner-button';

Example/App/WaveSpinnerButton.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { Text } from 'react-native';
 import styles from './styles/AppStyles';
 import SpinnerButton from 'react-native-spinner-button';