TouchableRipple onPress is not working with react navigation - react-native

Question

I am using stack navigator in my app to navigate through different components. but here I am facing 2 different issues. issue (1) I used a switch to toggle between dark and light theme, in the module, it works fine when using onPress but when called through stack screen it is not working. issue (2) I wanted to give some space between header text and the switch button but every time I add some padding to switch component, it is also applied to the header text. How can I solve these issues?
Here is App.js Component code:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow strict-local
*/
import React from 'react';
import {StatusBar, View} 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} from 'react-native-paper';
const Stack = createStackNavigator();
const App = () => {
const Darkthemebtntoggle = () => {
return (
<Details />
);
};
return (
<>
<NavigationContainer>
<StatusBar barStyle="dark-content" />
<Stack.Navigator screenOptions={{headerTitleAlign: ''}}>
<Stack.Screen
name="Home"
component={Home}
options={{
headerTitle: (props) => (
<Darkthemebtntoggle {...props} />
),
}}
/>
</Stack.Navigator>
</NavigationContainer>
</>
);
};
export default App;
Here is also Details.js component code:
import React, {useState} from 'react';
import {View, Text} from 'react-native';
import {TouchableRipple, Switch, Title} from 'react-native-paper';
function Details() {
const [isDartheme, setDarkTheme] = useState(false);
const togglemethod = () => {
setDarkTheme(!isDartheme);
};
return (
<View style={{flexDirection:"row"}}>
<View >
<Title>
<Text >Home</Text>
</Title>
</View>
<View style={{ paddingLeft:10, flexDirection:"row"}}>
<TouchableRipple
onPress={() => {
togglemethod();
}}>
<View pointerEvents="none">
<Switch value={isDartheme} />
</View>
</TouchableRipple>
</View>
</View>
);
}
export default Details;
Here is a screenshot of the behavior of the header: