react-native - TouchableOpacity onpress がナビゲーションで機能しない

Question

私は反応するネイティブナビゲーションを使用しており、ヘッダー内にスイッチを配置して、touchableOpacity onPress propを使用しながら明るいテーマと暗いテーマを切り替えます。エラー ログはありません。スイッチを押しても touchableOpacity onpress が起動しません。私は自分の App.js コードを共有しました。間違っているところを見て指摘していただければ幸いです。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useState} from 'react';
import {StatusBar, View, TouchableOpacity} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import Home from './src/screens/Home';
import Details from './src/screens/Details';
import {createStackNavigator} from '@react-navigation/stack';
import {DarkTheme, Text, Title, TouchableRipple, Switch} from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Stack = createStackNavigator();


const App = () => {

  const [isDartheme, setDarkTheme] = useState(false);

  const togglemethod = () => {
      console.log("Called!");
    setDarkTheme(!isDartheme);
  };


  return (
    <>

          
      <NavigationContainer>
        <StatusBar barStyle="dark-content" />
        <Stack.Navigator screenOptions={{headerTitleAlign: 'center'}}>
          <Stack.Screen
            name="Home"
            component={Home}
            options={{
              headerTitle: (props) => (
                <View style={{ flexDirection: 'row'}}>
                <View>
                  <Title style={{paddingLeft: 130}}>
                    <Text>Home</Text>
                  </Title>
                </View>
          
                
                  <View >
                    <TouchableOpacity
                      onPress={ () => {togglemethod() }
                      }
                      centered ={true}
                      >
                          <MaterialCommunityIcons
                        name={isDartheme?'moon-waning-crescent': 'white-balance-sunny'}
                        size = {25}
                        color= "blue"
                        style={{paddingLeft: 110, paddingBottom:5, width: '200%'}}
                        > 
                      <Switch
                        value={isDartheme}
                        color="red"
                        style={{paddingLeft: 8}}
                      />
                      </MaterialCommunityIcons>
                    </TouchableOpacity>
                  </View>
                </View>
                  
              ),
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </> 
  );
};

export default App;