CODEWITHSUNDEEP
react-nativereact-navigation
Slinidy
Slinidy

Reputation: 387

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

Upvotes: 8

Views: 29898

Answers (3)

Soufiane Odf
Soufiane Odf

Reputation: 1112

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>
})

Upvotes: 3

evasyuk
evasyuk

Reputation: 383

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.

Upvotes: 0

Iman Roosta
Iman Roosta

Reputation: 2430

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  })
  },[])
}

Upvotes: 7

Related Questions