chore: ⚡ updated example app

Author: Karthik-B-06

example/src/App.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
-import SegmentedControl from 'rn-segmented-control';
+import SegmentedControl from './SegmentedControl';
 
 export default function App() {
   const [tabIndex, setTabIndex] = React.useState(0);
@@ -19,6 +19,7 @@ export default function App() {
           segments={['Label 1', 'Label 2']}
           onChange={(index) => setTabIndex(index)}
           currentIndex={tabIndex}
+          badgeValues={[2, null, 1]}
         />
       </View>
       <View style={styles.box}>
@@ -69,7 +70,7 @@ export default function App() {
           activeTextStyle={styles.customBlueTextColor}
           inactiveTextStyle={styles.customWhiteColor}
           tileStyle={styles.customBlueColor}
-          badgeCount={[2]}
+          badgeValues={[2]}
         />
       </View>
       <View style={styles.box}>
@@ -78,7 +79,7 @@ export default function App() {
           segments={['Label 1', 'Label 2', 'Label 3']}
           onChange={(index) => setTabIndex6(index)}
           currentIndex={tabIndex6}
-          badgeCount={[2, null, 1]}
+          badgeValues={[2, null, 1]}
         />
       </View>
     </View>

example/src/SegmentedControl.tsx

@@ -15,17 +15,63 @@ import Animated, {
 import { widthPercentageToDP } from 'react-native-responsive-screen';
 
 interface SegmentedControlProps {
+  /**
+   * The Segments Text Array
+   */
   segments: Array<string>;
+  /**
+   * The Current Active Segment Index
+   */
   currentIndex: number;
+  /**
+   * A callback onPress of a Segment
+   */
   onChange: (index: number) => void;
-  badgeCount?: Array<number | null>;
+  /**
+   * An array of Badge Values corresponding to the Segment
+   */
+  badgeValues?: Array<number | null>;
+  /**
+   * Is right-to-left mode.
+   */
   isRTL?: boolean;
+  /**
+   * The container margin for the segmented control
+   * Used to calculate the width of Segmented Control
+   */
   containerMargin?: number;
+  /**
+   * Active Segment Text Style
+   */
   activeTextStyle?: TextStyle;
+  /**
+   * InActive Segment Text Style
+   */
   inactiveTextStyle?: TextStyle;
+  /**
+   * Segment Container Styles
+   */
   segmentedControlWrapper?: ViewStyle;
+  /**
+   * Pressable Container Styles
+   */
   pressableWrapper?: ViewStyle;
+  /**
+   * The moving Tile Container Styles
+   */
   tileStyle?: ViewStyle;
+  /**
+   * Active Badge Styles
+   */
+  activeBadgeStyle?: ViewStyle;
+  /**
+   * Inactive Badge Styles
+   */
+  inactiveBadgeStyle?: ViewStyle;
+  /**
+   * Badge Text Styles
+   */
+  badgeTextStyle?: TextStyle;
 }
 
 const defaultShadowStyle = {
@@ -53,14 +99,17 @@ const SegmentedControl: React.FC<SegmentedControlProps> = ({
   segments,
   currentIndex,
   onChange,
-  badgeCount = [],
+  badgeValues = [],
   isRTL = false,
   containerMargin = 0,
   activeTextStyle,
   inactiveTextStyle,
   segmentedControlWrapper,
   pressableWrapper,
   tileStyle,
+  activeBadgeStyle,
+  inactiveBadgeStyle,
+  badgeTextStyle,
 }: SegmentedControlProps) => {
   const width = widthPercentageToDP('100%') - containerMargin * 2;
   const translateValue = width / segments.length;
@@ -91,34 +140,41 @@ const SegmentedControl: React.FC<SegmentedControlProps> = ({
 
   const finalisedActiveTextStyle: TextStyle = {
     fontSize: 15,
-    fontWeight: '500',
+    fontWeight: '600',
     textAlign: 'center',
-    color: '#0ea5e9',
+    color: '#111827',
     ...activeTextStyle,
   };
 
   const finalisedInActiveTextStyle: TextStyle = {
     fontSize: 15,
     textAlign: 'center',
-    color: '#1f2937',
+    color: '#4b5563',
     ...inactiveTextStyle,
   };
 
   const finalisedActiveBadgeStyle: ViewStyle = {
-    backgroundColor: '#0ea5e9',
+    backgroundColor: '#27272a',
     marginLeft: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...activeBadgeStyle,
   };
 
   const finalisedInActiveBadgeStyle: ViewStyle = {
     backgroundColor: '#6b7280',
     marginLeft: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+    ...inactiveBadgeStyle,
   };
 
   const finalisedBadgeTextStyle: TextStyle = {
     fontSize: 11,
     fontWeight: '500',
     textAlign: 'center',
     color: '#FFFFFF',
+    ...badgeTextStyle,
   };
 
   return (
@@ -154,7 +210,7 @@ const SegmentedControl: React.FC<SegmentedControlProps> = ({
               >
                 {segment}
               </Text>
-              {badgeCount[index] && (
+              {badgeValues[index] && (
                 <View
                   style={[
                     styles.defaultBadgeContainerStyle,
@@ -164,7 +220,7 @@ const SegmentedControl: React.FC<SegmentedControlProps> = ({
                   ]}
                 >
                   <Text style={finalisedBadgeTextStyle}>
-                    {badgeCount[index]}
+                    {badgeValues[index]}
                   </Text>
                 </View>
               )}