Whats the best way to dynamically change the title of the header title text?

How to / Third Party Tooling
1

I have been struggling with something that sounds simple. I have been trying to get button when onpressed is called. Have tried several combinators but nothing works. Any ideas?

export default class JobScreen extends React.Component {

constructor(props) {
    super(props);
}

static navigationOptions = ({navigation}) => ({
    title: "Chat with"
});

onPressLearnMore(nav) {

    // how do I update the title header 

    console.log("On Pressed" + nav)
}

render() {
    const {navigate} = this.props.navigation;


    return (
        <View style={styles.container}>
            <Button
                onPress={() => {this.onPressLearnMore(navigate)}}
                title="Learn More"
                color="#841584"
            />

        </View>
    );
}

}

2

Hey @testbucket I know how this might be frustrating, especially because it feels like it should be a simple thing to do. Have no fear, here is some example code to help guide you

// Here is the meat of it, this is how you get a dynamic title.
static navigationOptions = ({ navigation }) => {
  const { state } = navigation;

  return {
    title: `${state.params && state.params.title ? state.params.title : 'BASE TITLE'}`,
  };
};

// Just using componentWillReceiveProps as an example
// you can call this.props.navigation.setParams anywhere.
componentWillReceiveProps(nextProps) {
  const title = nextProps.YOUR_NEXT_CONDITION ? 'TITLE A' : 'TITLE B';
  this.props.navigation.setParams({ title });
}

Let me know if you have any other questions. You can obviously call this.props.navigation.setParams where-ever this.props.navigation is available!

Good luck :slight_smile:

3 Likes
3

I have been struggling with translations for over a while know

static navigationOptions = () => ({
title: I18n.t(“title”)
};

constructor(props) {
    super(props);
    this.serState = {
        appIsReady: false,
    }
}


async componentWillMount() {
    await I18n.initAsync();
    this.setState({appIsReady: true});
}

render() {
    return (
        <View style={styles.LoginContainer}>
            <Button onPress={signInWithGoogleAsync.bind(this)}
                    title={I18n.t('buttonTranslation')}/>
        </View>
    );


    async function signInWithGoogleAsync() {
        try {
            const result = await Expo.Google.logInAsync({
                androidClientId: testAndroid,
                iosClientId: testIOS,
                androidStandaloneAppClientId: androidID,
                iosStandaloneAppClientId: iosId,
                webClientId: webID,
                scopes: ['profile', 'email'],
            });

            if (result.type === 'success') {

                let details = {
                    'domainName': 'ispcloudservices.com',
                    'userEmail': result.user.email,
                    'langId': I18n.locale,
                    'userToken': result.accessToken
                };

                console.log(details);

                let formBody = [];
                for (let property in details) {
                    let encodedKey = encodeURIComponent(property);
                    let encodedValue = encodeURIComponent(details[property]);
                    formBody.push(encodedKey + "=" + encodedValue);
                }
                formBody = formBody.join("&");

                let postData = {
                    method: 'POST',
                    headers: {
                        'User-Agent': 'ToogleBoxMobile',
                        'referer': 'https://toogleboxmobile.com',
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                    },
                    body: formBody
                };

                fetch(url, postData)
                    .then((response) => response.json())
                    .then((responseJson) => {
                        this.props.navigation.navigate('Second', {responseJson})
                    })

            } else {
                return {cancelled: true};
            }
        } catch (e) {
            return {error: true};
        }
    }
}

}

I18n.fallbacks = true;

I18n.translations = {
en: {
buttonTranslation: ‘Sign-in with google!’,
title: ‘Welcome’
},
pt: {
buttonTranslation: ‘Faça login no Google’,
title: ‘bem vindo’
},
es: {
buttonTranslation: ‘iniciar sesión con Google’,
title: ‘bienvenido’
}
};

4

I can translate the button, but not the title of the navigationOptions

5

you are awesome