Title on the back button

Question

import React, { Component } from 'react';
import api from '../service/api';
import {View ,Text, StyleSheet, Image, FlatList, Dialog} from 'react-native';
import Cabecalho from '../components/Cabecalho';

export default class Tarefa extends Component { 
  constructor(props) {
    super(props)
    this.state = {
      loading: true,
      listaItem: {},
      item: props.navigation.state.params.tarefa
    }
  }

  componentDidMount() {
    this.loadProducts();
  }

  loadProducts = async () => {      
    const response = await api.get("/tarefa/" + this.state.item);
    this.setState({ listaItem: response.data });     
  };

  render() {
      return (
        <View style={estilos.container}>
          <Text>{this.state.listaItem.cidade} - {this.state.listaItem.bairro}</Text>
          <Image source={require('../img/012345.png')} style={estilos.logo}/>
          <Image source={require('../img/-IPb7Whg.png')} style={estilos.estrela}/>
          <Text>{this.state.listaItem.titulo}</Text>
          <Text>{this.state.listaItem.texto}</Text>
        </View>
      );
  }
}

Figure 1

Figure 2

I’m trying to put Porto Alegre up there, what I have at the moment is figure 1 and I’m trying to turn into figure 2.

I tried some alternatives like:

static navigationOptions = {
title: {this.state.listaItem.cidade} - {this.state.listaItem.bairro},
};

but I was struck by the following error: Can not read Property 'listitem' of Undefined

tried as well:

static navigationOptions = {
  title: this.state && this.state.listaItem ? `${this.state.listaItem.cidade} - ${this.state.listaItem.bairro}` : '',
};

and

import _ from 'lodash';
...
static navigationOptions = {
  title: `${_.get(this, 'state.listaItem.cidade', '')} - ${_.get(this, 'state.listaItem.bairro', '')}`
};

these last two do not give error but also do not present

Answer 1

The navigationOptions can also be used as a function:

 static navigationOptions = ({navigation}) => {
        const {state} = navigation;
        return {
          title: state.listaItem 
                 ? `{this.state.listaItem.cidade} - {this.state.listaItem.bairro}` 
                 : '',
        };
      };