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
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 })
},[])
}
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>
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With