React Native switch component's state resets after re-entering screen

I'm using React Native's switch component to toggle between Light and Dark modes, using States, Context and Event Listeners and the switch's state is resetting after re-entering the screen where it is at with a weird behavior I haven't seen anywhere online.

This is the file where the switch is at:

import React, { useState, useContext } from 'react';
import { Text, TouchableOpacity, SafeAreaView, Switch } from 'react-native';
import { useNavigation } from '@react-navigation/core';
import theme from '../assets/styles/theme';
import ThemeContext from '../context/ThemeContext';
import { StatusBar } from 'expo-status-bar';
import { EventRegister } from 'react-native-event-listeners';
const Settings = () => {
const navigation = useNavigation();
const colors: any = useContext(ThemeContext);
const [mode, setMode] = useState(false);
return (
<SafeAreaView
style={[theme.container, { backgroundColor: colors.background }]}
>
<Switch
onValueChange={(value) => {
setMode((value) => !value);
EventRegister.emit('changeTheme', value);
}}
value={mode}
/>
<TouchableOpacity
onPress={() => navigation.navigate('Home')}
style={[theme.button, { backgroundColor: colors.button }]}
>
<Text style={[theme.buttonText, { color: colors.buttonText }]}>
Back
</Text>
</TouchableOpacity>
<StatusBar style={mode === false ? 'dark' : 'light'}></StatusBar>
</SafeAreaView>
);
};
export default Settings;

And this App.tsx where the Event Listener is:

import React, { useState, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AppNavigator from './navigation/AppNavigator';
import { EventRegister } from 'react-native-event-listeners';
import ThemeContext from './context/ThemeContext';
import colors from './assets/colors/colors';
export default function App() {
const [mode, setMode] = useState(false);
useEffect(() => {
let eventListener: string = EventRegister.addEventListener(
'changeTheme',
(data) => {
setMode(data);
}
);
return () => {
EventRegister.removeEventListener(eventListener);
};
});
return (
<ThemeContext.Provider value={mode === true ? colors.dark : colors.light}>
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
</ThemeContext.Provider>
);
}

And this is the weird behavior:

I am still pretty new and learning React so any help is appreciated, thanks.

EDIT:

After the suggestion from user18309290 I managed to do a workaround that works.

import React, { useState, useContext } from 'react';
import { Text, TouchableOpacity, SafeAreaView, Switch } from 'react-native';
import { useNavigation } from '@react-navigation/core';
import theme from '../assets/styles/theme';
import ThemeContext from '../context/ThemeContext';
import { StatusBar } from 'expo-status-bar';
import { EventRegister } from 'react-native-event-listeners';
import colors from '../assets/colors/colors';
const Settings = () => {
const navigation = useNavigation();
const scheme: any = useContext(ThemeContext);
let aux = scheme;
aux === colors.dark ? (aux = true) : (aux = false);
const [mode, setMode] = useState(aux);
return (
<SafeAreaView
style={[theme.container, { backgroundColor: scheme.background }]}
>
<Switch
onValueChange={(value) => {
setMode((value) => !value);
EventRegister.emit('changeTheme', value);
}}
value={aux}
/>
<TouchableOpacity
onPress={() => navigation.navigate('Home')}
style={[theme.button, { backgroundColor: scheme.button }]}
>
<Text style={[theme.buttonText, { color: scheme.buttonText }]}>
Back
</Text>
</TouchableOpacity>
<StatusBar style={mode === false ? 'dark' : 'light'}></StatusBar>
</SafeAreaView>
);
};
export default Settings;

While I'm not exactly happy with it and will probably rework it later, it does solve the issue and the switch now works properly, in case someone has the same problem I had.

useState just adds a state variable to a component like Settings. When a component mounts a variable is set to default like false.

Use context to set the default value. Something like this:

const colors: any = useContext(ThemeContext);
const [mode, setMode] = useState(colors.mode);

Or remove the local state all together.