Merge pull request #22 from SimformSolutionsPvtLtd/fix/UNT-T8848

Change wording and update READEME and gif

Author: mukesh-simform

README.md

@@ -17,7 +17,7 @@ const CenterContent = (props: CenterContentProps) => {
     isHideValue,
     value,
     centerContentStyle,
-    unitValueContenStyle,
+    unitValueContentStyle,
   } = props;
 
   return (
@@ -28,7 +28,7 @@ const CenterContent = (props: CenterContentProps) => {
         </Text>
       )}
       {!isHideValue && (
-        <View style={[styles.hideValue, unitValueContenStyle]}>
+        <View style={[styles.hideValue, unitValueContentStyle]}>
           <Text style={[styles.valueText, styles.large_header, valueStyle]}>
             {value}
           </Text>

assets/RadialCircle.gif

@@ -116,12 +116,12 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
             {linearGradient.map(
               (
                 item: {
-                  stop: NumberProp | undefined;
+                  offset: NumberProp | undefined;
                   color: Color | undefined;
                 },
                 index: React.Key | null | undefined
               ) => (
-                <Stop key={index} offset={item.stop} stopColor={item.color} />
+                <Stop key={index} offset={item.offset} stopColor={item.color} />
               )
             )}
           </LinearGradient>

assets/RadialSlider.gif

@@ -19,8 +19,8 @@ export const defaultProps = {
   lineColor: Colors.grey,
   lineSpace: 3,
   linearGradient: [
-    { stop: '0%', color: Colors.pink },
-    { stop: '100%', color: Colors.red },
+    { offset: '0%', color: Colors.skyBlue },
+    { offset: '100%', color: Colors.darkBlue },
   ],
   onChange: (_v: number) => {},
   onComplete: (_v: number) => {},

assets/RadialSliderExample.gif

@@ -40,7 +40,7 @@ const SpeedoMeter = (
     max,
     unitStyle,
     value = 0,
-    unitValueContenStyle,
+    unitValueContentStyle,
   } = props;
 
   const {
@@ -90,12 +90,12 @@ const SpeedoMeter = (
             {linearGradient?.map(
               (
                 item: {
-                  stop: NumberProp | undefined;
+                  offset: NumberProp | undefined;
                   color: Color | undefined;
                 },
                 index: React.Key | null | undefined
               ) => (
-                <Stop key={index} offset={item.stop} stopColor={item.color} />
+                <Stop key={index} offset={item.offset} stopColor={item.color} />
               )
             )}
           </LinearGradient>
@@ -138,9 +138,9 @@ const SpeedoMeter = (
           <CenterContent
             {...(props as object)}
             value={sliderValue}
-            unitValueContenStyle={[
+            unitValueContentStyle={[
               styles.centerText,
-              unitValueContenStyle,
+              unitValueContentStyle,
               // eslint-disable-next-line react-native/no-inline-styles
               { marginLeft: unit?.length ? unit?.length * 5 : 10 },
             ]}

src/components/RadialSlider/CenterContent.tsx

@@ -14,8 +14,8 @@ export const defaultSpeedoMeterProps = {
   lineColor: Colors.grey,
   lineSpace: 3,
   linearGradient: [
-    { stop: '0%', color: Colors.skyBlue },
-    { stop: '100%', color: Colors.darkBlue },
+    { offset: '0%', color: Colors.skyBlue },
+    { offset: '100%', color: Colors.darkBlue },
   ],
   onChange: (_v: number) => {},
   onComplete: (_v: number) => {},

src/components/RadialSlider/RadialSlider.tsx

@@ -50,9 +50,9 @@ exports[`RadialSlider component Match Snapshot 1`] = `
           gradient={
             Array [
               0,
-              -21338,
+              -15756829,
               1,
-              -1423360,
+              -16042895,
             ]
           }
           gradientTransform={null}