From f4685107d31c66f0d3fc5a71b470a137ba1889b9 Mon Sep 17 00:00:00 2001
From: kenne <kenneth.rinnan@gmail.com>
Date: Thu, 20 Mar 2025 09:19:48 +0100
Subject: [PATCH 1/2] added optional trackbar component to show centered text
 between thumbButtons

---
 src/toggle.tsx | 4 ++++
 src/types.ts   | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/src/toggle.tsx b/src/toggle.tsx
index 8cc4b0e..663360c 100644
--- a/src/toggle.tsx
+++ b/src/toggle.tsx
@@ -76,6 +76,8 @@ const ReactNativeToggleElement = (props: ReactNativeToggleElementProps) => {
     leftTitle = "",
     rightTitle = "",
     animationDuration = 250,
+    activeTrackBarComponent,
+    inActiveTrackBarComponent
   } = { ...DefaultThumbChildrenProps, ...props };
 
   const finalTrackBar = { ...defaultTrackBar, ...customTrackBar };
@@ -128,6 +130,8 @@ const ReactNativeToggleElement = (props: ReactNativeToggleElementProps) => {
             disabled && disabledStyle,
           ])}
         >
+          {toggleValue && activeTrackBarComponent}
+          {!toggleValue && inActiveTrackBarComponent}
           <View
             testID="ThumbButtonLeft"
             style={StyleSheet.flatten([
diff --git a/src/types.ts b/src/types.ts
index 914a823..e6a7a89 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -54,6 +54,8 @@ export interface ReactNativeToggleElementProps {
   leftTitle?: string | null;
   rightTitle?: string | null;
   animationDuration?: number;
+  activeTrackBarComponent?: React.ReactNode;
+  inActiveTrackBarComponent?: React.ReactNode;
 }
 export interface Styles {
   container: ViewStyle;

From dc84507de4f86d2ff99207c69ec73f8f9ed56384 Mon Sep 17 00:00:00 2001
From: kenne <kenneth.rinnan@gmail.com>
Date: Thu, 20 Mar 2025 10:41:56 +0100
Subject: [PATCH 2/2] added optional managed option to have outside control

---
 src/hooks.ts   | 7 +++++--
 src/toggle.tsx | 6 ++++--
 src/types.ts   | 1 +
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/hooks.ts b/src/hooks.ts
index 82083c8..e5774c6 100644
--- a/src/hooks.ts
+++ b/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);
   };
 
diff --git a/src/toggle.tsx b/src/toggle.tsx
index 663360c..a6d06a0 100644
--- a/src/toggle.tsx
+++ b/src/toggle.tsx
@@ -77,7 +77,8 @@ const ReactNativeToggleElement = (props: ReactNativeToggleElementProps) => {
     rightTitle = "",
     animationDuration = 250,
     activeTrackBarComponent,
-    inActiveTrackBarComponent
+    inActiveTrackBarComponent,
+    managed = false
   } = { ...DefaultThumbChildrenProps, ...props };
 
   const finalTrackBar = { ...defaultTrackBar, ...customTrackBar };
@@ -89,7 +90,8 @@ const ReactNativeToggleElement = (props: ReactNativeToggleElementProps) => {
       finalThumbButton,
       finalTrackBar,
       animationDuration,
-      onPress
+      onPress,
+      managed,
     );
 
   const trackBarBackgroundColor = () => {
diff --git a/src/types.ts b/src/types.ts
index e6a7a89..759c305 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -56,6 +56,7 @@ export interface ReactNativeToggleElementProps {
   animationDuration?: number;
   activeTrackBarComponent?: React.ReactNode;
   inActiveTrackBarComponent?: React.ReactNode;
+  managed: boolean;
 }
 export interface Styles {
   container: ViewStyle;