React Native / Styled Components - Theming

hope you're doing ok.

So, I'm trying to create a theme switcher in RN with styled-components;

When I toggle my theme switcher nothing happens.

I've created the following hook:

import React, {createContext,ReactNode,useContext, useState } from 'react'

interface IThemeProviderProps {children: ReactNode }

interface ThemeData {toggleTheme: () => voidcurrentTheme: string }

const ThemeContext = createContext({} as ThemeData)

export const CustomThemeProvider = ({ children }: IThemeProviderProps)=> {const [currentTheme, setWwitchTheme] = useState('light')

 const toggleTheme = () => {      if (currentTheme ==='light'){           setWwitchTheme('dark')      }      setWwitchTheme('dark')      console.log({currentTheme}) } return (<ThemeContext.Provider value={{ toggleTheme, currentTheme }}>           {children}</ThemeContext.Provider> ) }

export function useCustomTheme() {const context = useContext(ThemeContext)

 return context }

Then I setup my app like this:

import 'react-native-gesture-handler' import { ThemeProvider } from'styled-components/native' import { AppProvider } from'./src/components/hooks' import { useCustomTheme } from'./src/components/hooks/Theme' import { Routes } from './src/routes'import { dark } from './src/styles/themeDark' import { light } from'./src/styles/themeLight'

export default function App() {const { currentTheme } = useCustomTheme()

 return (<AppProvider><ThemeProvider theme={ currentTheme === 'light' ? light : dark}><Routes /></ThemeProvider></AppProvider> ) }

Bellow follows my theme switcher code:

import { DrawerContentScrollView } from '@react-navigation/drawer'import React from 'react' import { View, Text, Switch } from'react-native'

import { useCustomTheme } from '../hooks/Theme';

import { Container } from './styles'

export function DrawerContent({ ...props }) {

 const {currentTheme, toggleTheme} = useCustomTheme(); function handleTheme () { } return (<Container><DrawerContentScrollView><View><Switch                     value={!!currentTheme}                     onValueChange={toggleTheme}                     /><Text>{currentTheme}</Text></View></DrawerContentScrollView></Container> ) }