How to make headerTitle to fit into headerBackground with react navigation? - react-native

Question

I am using the react navigation library with react native, I want to create a custom header by using the headerBackground and headerTitle screen options.
I need a robust way for the headerTitle component to use all the available space, but remains inside the limits of the screen.
So far I have (Snack link):
function App(): JSX.Element {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
options={{
headerBackground: () => (
<View
style={{
flex: 1,
backgroundColor: 'red',
borderColor: 'green',
borderWidth: 4,
}}
/>
),
headerTitle: props => (
<View
style={{
backgroundColor: 'blue',
flex: 1,
}}>
<Text>Header Title</Text>
</View>
),
}}>
{() => <SafeAreaView />}
</Stack.Screen>
</Stack.Navigator>
</NavigationContainer>
);
}
Note I have inlined styles and other bad practices just to make the code shorter for this question.
The results is the following:
Note how the headerTitle component grows without limits.
Is there a robust way to deal with this issue ? Note I am trying to avoid getting/using the dimensions of the device, as in the header can be other content such as backButton, or other options buttons on the right side.
Thanks in advance.

Answer 1

here is code example you can see to run this code may be this will help you:)
App.js
import * as React from 'react';
import {
Button,
View,
Text,
ImageBackground,
StyleSheet,
TouchableOpacity,
Image
} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
const image = { uri: 'https://reactjs.org/logo-og.png' };
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}
function DetailsScreen({ navigation }) {
return (
<View style={{}}>
<ImageBackground source={image} style={styles.image}>
<TouchableOpacity
onPress={()=>navigation.navigate("Home")}
>
<Image source={{uri:"https://cdn-icons-png.flaticon.com/128/189/189254.png"}} style={{width:30,height:30,marginLeft:10,marginTop:20}}/>
<Text style={{fontSize:30 ,color:'white',textAlign:'center',fontWeight:'bold',marginTop:-40}}> hello world</Text>
</TouchableOpacity>
</ImageBackground>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
image: {
width: "100%",
height: 60,
},
text: {
color: 'white',
fontSize: 42,
lineHeight: 84,
fontWeight: 'bold',
backgroundColor: '#000000c0',
},
});
export default App;