added optional trackbar component to show centered text between thumb…

src/hooks.ts

@@ -24,7 +24,8 @@ export const useToggleValue = (
   thumbButton: ThumbButton,
   trackBar: TrackBar,
   animationDuration: number,
-  onPress: (val?: boolean) => void
+  onPress: (val?: boolean) => void,
+  managed: boolean
 ) => {
   const fadeAnim = useRef(new Animated.Value(0)).current;
 
@@ -53,7 +54,9 @@ export const useToggleValue = (
 
   const handleToggle = () => {
     const val = !toggleValue;
-    setToggleValue(val);
+    if(!managed) {
+      setToggleValue(val);
+    }
     onPress(val);
   };
 

src/toggle.tsx

@@ -76,6 +76,9 @@ const ReactNativeToggleElement = (props: ReactNativeToggleElementProps) => {
     leftTitle = "",
     rightTitle = "",
     animationDuration = 250,
+    activeTrackBarComponent,
+    inActiveTrackBarComponent,
+    managed = false
   } = { ...DefaultThumbChildrenProps, ...props };
 
   const finalTrackBar = { ...defaultTrackBar, ...customTrackBar };
@@ -87,7 +90,8 @@ const ReactNativeToggleElement = (props: ReactNativeToggleElementProps) => {
       finalThumbButton,
       finalTrackBar,
       animationDuration,
-      onPress
+      onPress,
+      managed,
     );
 
   const trackBarBackgroundColor = () => {
@@ -128,6 +132,8 @@ const ReactNativeToggleElement = (props: ReactNativeToggleElementProps) => {
             disabled && disabledStyle,
           ])}
         >
+          {toggleValue && activeTrackBarComponent}
+          {!toggleValue && inActiveTrackBarComponent}
           <View
             testID="ThumbButtonLeft"
             style={StyleSheet.flatten([

src/types.ts

@@ -54,6 +54,9 @@ export interface ReactNativeToggleElementProps {
   leftTitle?: string | null;
   rightTitle?: string | null;
   animationDuration?: number;
+  activeTrackBarComponent?: React.ReactNode;
+  inActiveTrackBarComponent?: React.ReactNode;
+  managed: boolean;
 }
 export interface Styles {
   container: ViewStyle;