adjusting Switch and Icon in stack header on react-navigation - react-native

Question

I was trying to put an Switch and an Icon on header created with stack navigation from react navigation. the problem I am facing is that adjusting the switch and icon accordingly next to each other. I tried different alternatives but still I am unable to adjust them. I wanted to show on the header a text in the center; Home for instance, and show also a switch and icon on the right of the header next to each other (switch and icon). I will highly appreciate any help of how Can I do this? Here I am sharing my code trying to do it.
/**
* 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,
DarkTheme as navigationDarkTheme,
DefaultTheme as navigationDefaultTheme,
useTheme
} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {
DarkTheme as PaperDarkTheme,
Provider as PaperProvider,
DefaultTheme as PaperDefaultTheme,
Text,
Title,
TouchableRipple,
Switch,
} from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
const customDarktheme = {
...PaperDarkTheme,
...navigationDarkTheme,
colors: {
...PaperDarkTheme.colors,
...navigationDarkTheme.colors,
headerColor: 'rgb(255, 255, 255)',
bgcolor: "#404040",
surface:"#404040",
btnSearchColor:"#404040",
}
}
const customDefaulttheme = {
...PaperDefaultTheme,
...navigationDefaultTheme,
colors: {
...PaperDefaultTheme.colors,
...navigationDefaultTheme.colors,
headerColor: "white",
bgcolor: "#fafcff",
btnSearchColor:"#006aff",
surface:"white",
}
}
const HomeS = () => {
return <View></View>;
};
const Stack = createStackNavigator();
const App = () => {
const {colors} = useTheme()
const [isDarktheme, setDarkTheme] = useState(false);
const togglemethod = () => {
setDarkTheme(!isDarktheme);
};
return (
<>
<PaperProvider theme={isDarktheme?customDarktheme:customDefaulttheme}>
<NavigationContainer theme={isDarktheme?customDarktheme:customDefaulttheme}>
<StatusBar barStyle="dark-content" />
<Stack.Navigator screenOptions={{headerTitleAlign: 'center', headerStyle: { backgroundColor: colors.headerColor }}}>
<Stack.Screen
name="Home"
component={HomeS}
options={{
headerTitle: (props) => (
<View style={{flexDirection: 'row', width:"300%"}}>
<>
<View>
<Title style={{paddingLeft: 180}}>
<Text>Home</Text>
</Title>
</View>
<View >
<TouchableRipple rippleColor="rgba(0, 0, 0, .32)">
<Switch
value={isDarktheme}
color="yellow"
onValueChange={() => togglemethod()}
style={{
paddingLeft:250,
}}
/>
</TouchableRipple>
</View>
<View style={{}}>
<MaterialCommunityIcons
name={
isDarktheme
? 'moon-waning-crescent'
: 'white-balance-sunny'
}
size={25}
color={isDarktheme ? "yellow" : "blue"}
style={{
paddingLeft: 110,
// paddingBottom: 5,
width: '200%',
flexDirection: 'row',
paddingRight:300
}}
/>
</View>
</>
</View>
),
}}
/>
</Stack.Navigator>
</NavigationContainer>
</PaperProvider>
</>
);
};
export default App;
currently the header looks like this:
look at the distance b/w the switch and Icon. trying to eliminate this was not possible for me. for example the text Home disappears while adjusting other elements like switch or Icon. I know this can be achieved. but I run out of options and glad that someone else can do it and learn from.

Answer 1

Since you want to add the switch and icon on the right, you should use headerRight instead of headerTitle
options={{
headerRight: () => (
<View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
// Your switch and icon here
</View>
),
}}