dev switch is hiding/showing a little bit now

nr-app/app/(tabs)/settings.tsx

@@ -21,6 +21,26 @@ import {
 } from "react-native";
 import Toast from "react-native-root-toast";
 
+const DevSwitch = () => {
+  const [devMode, setDevMode] = useState(true); // Local state for toggle
+
+  const toggleVisibility = (value: boolean | ((prevState: boolean) => boolean)) => {
+    setDevMode(value); // Update visibility based on switch value
+  };
+
+  return (
+    <View>
+    <Switch
+      value={devMode}
+      onValueChange={toggleVisibility}
+    />
+    <Text>dev mode</Text>
+    {devMode && <Text>DEV MODE ON</Text>}
+    </View>
+  );
+};
+
+
 export default function TabThreeScreen() {
   const [nsec, setNsec] = useState("");
   const [mnemonic, setMnemonic] = useState("");
@@ -153,10 +173,7 @@ export default function TabThreeScreen() {
           }}
         />
       </ScrollView>
-      <View>
-        <Switch value={true} />
-        <Text>dev mode</Text>
-      </View>
+      <DevSwitch />
     </SafeAreaView>
   );
 }