CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
Alfredo Takazu
Alfredo Takazu

Reputation: 79

How can I update a custom title on stacknavigator with react navigation?

I has been many hours on this problem and I don't know how resolve it. I have this on App.js:

import 'react-native-gesture-handler';
import * as React from 'react';
import { View, Text, Button, Alert } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './src/screens/homescreen';
import DetailScreen from './src/screens/detailscreen';
import Login from './src/screens/login';

const Stack = createStackNavigator();

function App() {

  return (    
    <NavigationContainer>    
      <Stack.Navigator initialRouteName="Home">

        <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Initial Title' }} />
        <Stack.Screen name="Login" component={Login} options={{ title: '' }} />
        <Stack.Screen name="Details" component={DetailScreen} />

      </Stack.Navigator>    
    </NavigationContainer>    
  );
}

export default App;

And i have this on homescreen.js:

import * as React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import Home from '../sections/containers/home';

function HomeScreen({ navigation }) {

    return (    
        <View style={styles.container} >
            <Home />    
            <Button
                title="Update"
                onPress={() => navigation.setParams({ title: 'Other title' })} />
        </View>
    );    
}

export default HomeScreen;

But I can't set the custom title on my homescreen.js, how can I change this param and others params from this screen? or how can I set default custom params from this screen to itself?

Thanks for your help beforehand.

Upvotes: 1

Views: 880

Answers (2)

Safeer
Safeer

Reputation: 1467

Unlike @Alfredo, if you are still using Class Component then I got it working this way:

constructor(props) {
super(props);

this.props.navigation.setOptions({
  title: 'Disco',
  headerRight: () => (
    <Image
      style={{
        width: 48,
        height: 48,
        marginEnd: 16
      }}
      source={icLogout}
    />
  )
})}

Upvotes: 1

Alfredo Takazu
Alfredo Takazu

Reputation: 79

With SetOptions method:

import * as React from 'react';
import { View } from 'react-native';
import Home from '../sections/containers/home';


function HomeScreen({ navigation }) {

    navigation.setOptions({
        'title': 'Other title'
    })

    return (    
        <View style={styles.container} >
            <Home />
        </View>
    );

}

export default HomeScreen;

Upvotes: 3

Related Questions