Merge pull request #19 from SimformSolutionsPvtLtd/v1.0.5

V1.0.5

Author: rupal-simform

Example/.babelrc

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

Example/App/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import styles from './styles/AppStyles';
 import DefaultOrBallSpinnerButton from './DefaultOrBallSpinnerButton';
 import BarSpinnerButton from './BarSpinnerButton';
@@ -15,12 +15,12 @@ const App = () => {
   return (
     <ScrollView style={styles.safeArea}>
       <DefaultOrBallSpinnerButton />
-      <BarSpinnerButton />
       <DotSpinnerButton />
-      <MaterialSpinnerButton />
       <PacmanSpinnerButton />
-      <PulseSpinnerButton />
       <SkypeSpinnerButton />
+      <BarSpinnerButton />
+      <MaterialSpinnerButton />
+      <PulseSpinnerButton />
       <UIActivitySpinnerButton />
       <WaveSpinnerButton />
     </ScrollView>

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';
@@ -24,6 +24,10 @@ const BarSpinnerButton = () => {
           onPress={handleButtonPress}
           animationType={'flipInY'}
           indicatorCount={10}
+          animateHeight={50}
+          animateWidth={200}
+          animateRadius={10}
+          animatedDuration={700}
         >
           <Text style={styles.buttonText}>Bar SpinnerButton</Text>
         </SpinnerButton>

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,13 @@ 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}
+          borderStyle={styles.borderStyle}
         >
           <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';
@@ -24,7 +24,19 @@ const DotSpinnerButton = () => {
           size={10}
           spinnerType='DotIndicator'
           onPress={handleButtonPress}
-          animationType={'flipInX'}
+          animationType={'bounceIn'}
+          gradientType={'Radial'}
+          gradientName={'Night Fade'}
+          gradientRadialRadius={10}
+          gradientButtonHeight={50}
+          radialRadiusx={"50%"}
+          radialRadiusy={"50%"}
+          radialRadiusRX={"50%"}
+          radialRadiusRY={"50%"}
+          animateHeight={50}
+          animateWidth={220}
+          animateRadius={10}
+          animatedDuration={700}
         >
           <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,15 @@ 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}
+          animateHeight={70}
+          animateWidth={70}
+          animateRadius={35}
         >
           <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={['#44107A', '#FF1361', '#dead00', '#231557']}
+          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';