navigation.setOptions not change - react-native

Question

i'm creating screens with react-navigator but i can not change the options of the Header Bar when screen opened
My code (App.js):
function App() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{
headerTitleAlign: 'center',
headerTitle: props => <LogoTitle {...props} />,
headerRight: props => <HeaderRight {...props} />,
headerStyle: {
backgroundColor: '#F46A0D'
},
headerTintColor: '#fff',
}}>
<Stack.Screen name="Search" component={SearchScreen}/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
My SearchScreen.js:
import React from 'react'
import { Text, View } from 'react-native'
import { Button } from 'react-native-paper'
const SearchScreen = ({ navigation }) => {
navigation.setOptions = {
headerTitle: props => <TextInput {...props} placeholder="Search" placeholderTextColor="#FFFF" style={{
fontSize: 24
}}></TextInput>,
headerRight: props => <FontAwesome5 {...props} name={'search'} size={22} color="white" style={{ marginRight: 15 }}></FontAwesome5>
}
return (
<View>
</View>
)
}
export default SearchScreen;
in the navigation.setOptions line nothing happens and the default screenOptions Stack.Navigator continues

Answer 1

on route file
<Stack.Screen
name="FuncName"
component={FuncName}
options={{
headerTitle:''
}}/>
on Press go to FuncName screen
onPress={()=>{
props.navigation.navigate("FuncName",{title:"title"})
}}
then change header by props title
const FuncName = (props) => {
useEffect(()=>{
props.navigation.setOptions({ headerTitle: props.route.params.title })
},[])
}

Answer 2

Try changing this
navigation.setOptions = {
headerTitle: props => <TextInput {...props} placeholder="Search" placeholderTextColor="#FFFF" style={{
fontSize: 24
}}></TextInput>,
headerRight: props => <FontAwesome5 {...props} name={'search'} size={22} color="white" style={{ marginRight: 15 }}></FontAwesome5>
}
to this:
navigation.setOptions({
headerTitle: props => <TextInput {...props} placeholder="Search" placeholderTextColor="#FFFF" style={{
fontSize: 24
}} />,
headerRight: props => <FontAwesome5 {...props} name={'search'} size={22} color="white" style={{ marginRight: 15 }}></FontAwesome5>
})

Answer 3

In my case I was able to make it possible to update "gestureEnabled" option in runtime using React lifecycle.
Each of my navigators was created as function that subscribes to UiContext value via hook.
In case of navigators re-rendering on dependency change, I was able to disable "swipe back" functionality on specific nested screen easily.