How to a full-width text input in header in React Navigation 6? - css

Question

In my React Native (Expo) application, I wanted to upgrade React Navigation from V5 to V6. However, I could not make TextInput in stack navigator header full-width. I tried 'auto' and '100%' for the width value in styling, however neither helped with a real wide textbox.
Here is the link for Expo snack for reproduction: https://snack.expo.io/#vahdet/reactnavigation6-headerbar and the App.js content from it is below. I guess I am short of some flexbox knowledge in headerSearchBarStyle:
import React, { useLayoutEffect, useState } from 'react';
import { Text, TextInput, View, StyleSheet } from 'react-native';
import { NavigationContainer, useNavigation } from '#react-navigation/native';
import { enableScreens } from 'react-native-screens';
import { AppearanceProvider } from 'react-native-appearance';
import { StatusBar } from 'expo-status-bar';
import { createStackNavigator } from '#react-navigation/stack';
enableScreens();
const HomeStack = createStackNavigator();
const Search = () => {
const navigation = useNavigation();
const [searchText, setSearchText] = useState('');
// Customize header
useLayoutEffect(() => {
navigation.setOptions({
headerTitle: () => (
<TextInput
style={styles.headerSearchBarStyle}
value={searchText}
onChangeText={(val) => setSearchText(val)}
containerStyle={styles.searchBarContainerStyle}
placeholder="Search..."
returnKeyType="search"
textContentType="none"
cancelButtonTitle="Cancel"
/>
)
})
}, [navigation, searchText]);
return (
<View style={styles.view}>
{!searchText ? (
<Text>Search results go here</Text>
) : (
<Text>Initial (no search) content goes here</Text>
)}
</View>
)
}
const App = () => {
return (
<AppearanceProvider>
<StatusBar style="auto" />
<NavigationContainer>
<HomeStack.Navigator initialRouteName="Search">
<HomeStack.Screen name="Search" component={Search} />
</HomeStack.Navigator>
</NavigationContainer>
</AppearanceProvider>
);
}
const styles = StyleSheet.create({
headerSearchBarStyle: {
width: 'auto', // also tried '100%'
borderColor: 'black',
borderWidth: 1,
backgroundColor: 'transparent'
},
});
export default App;
EDIT: After Kartikey's approach I want to elaborate that by full-width, I do not necessarily mean the full screen width: There may be scenarios with headerLeft (e.g. back button) or headerRight components at the same time.

Answer 1

Use Device Width
import { Dimensions } from "react-native";
const ScreenWidth = Dimensions.get('window').width;
and
headerSearchBarStyle: {
width: ScreenWidth,
borderColor: 'black',
borderWidth: 1,
backgroundColor: 'transparent',
margin: 10,
},
You can also set it to width: ScreenWidth - 30, just to give some margin
Working Example