Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

navigation.setOptions not change

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

like image 540
Slinidy Avatar asked Mar 02 '23 13:03

Slinidy


2 Answers

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  })
  },[])
}
like image 120
iman roosta Avatar answered Mar 05 '23 15:03

iman roosta


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>
    })
like image 20
Soufiane Odf Avatar answered Mar 05 '23 15:03

Soufiane Odf