Re-render Header with different icon - React Native

Question

I need help, I have a component, and your function is render de header of app, with right and left icon, and in center is title of current page. But, I can re-render the title of page, but the icon not re-render. I not have idea for the solution this.

MyCode of Header.

import React, { Component } from 'react';
import ReactNative from 'react-native';
import { Icon, Text } from './../labsoft.ui';
import styles from './styles';
const Header = ReactNative.StyleSheet.flatten(styles.header);
const BoxHeaderFlex = ReactNative.StyleSheet.flatten(styles.boxHeaderFlex);
const BoxHeaderIcon = ReactNative.StyleSheet.flatten(styles.boxHeaderIcon);
const BoxHeaderTouchable = ReactNative.StyleSheet.flatten(styles.BoxHeaderTouchable);
const BoxHeaderTouchableCenter = ReactNative.StyleSheet.flatten(styles.BoxHeaderTouchableCenter);

interface HeaderProperties {
    leftAction?: HeaderLeftAction,
    rightAction?: HeaderRightAction,
    title?: string;
    style?: Style;
}

interface HeaderState {
    leftAction?: HeaderLeftAction,
    rightAction?: HeaderRightAction,
    title?: string;
}

interface HeaderLeftAction {
    icon: string;
    onClick?: () => void
}

interface HeaderRightAction {
    icon: string;
    onClick?: () => void
}

interface Style { }

export default class HeaderComponent extends Component<HeaderProperties, HeaderState> {

    constructor(props: HeaderProperties) {
        super(props);

        this.state = {
            leftAction: this.props.leftAction,
            rightAction: this.props.rightAction,
            title: this.props.title
        }
    }

    public setLeftAction(action: HeaderLeftAction) {
        this.setState({
            leftAction: action
        });
    }



 public setRightAction(action: HeaderRightAction) {
        this.setState({
            rightAction: action
        });
    }

    public setTitle(title: string) {
        this.setState({
            title: title
        });
    }


    render() {
        console.log('props: ', this.props.rightAction.icon);
        console.log('state: ', this.state.rightAction.icon);

        let iconRight = this.state.rightAction.icon;
        let iconLeft = this.state.leftAction.icon;

        return (
            <ReactNative.View style={[BoxHeaderFlex, { ...this.props.style }]}>


                {
                    this.state.leftAction != null ?

                        <Icon icon={iconLeft} onPress={this.state.leftAction.onClick} />
                        :
                        <ReactNative.TouchableOpacity style={BoxHeaderTouchable}>
                            <ReactNative.View>
                            </ReactNative.View>
                        </ReactNative.TouchableOpacity>
                }

                {

                    this.state.title != null ?

                        <Text style={BoxHeaderTouchableCenter}>{this.state.title}</Text>
                        :
                        <Text style={BoxHeaderTouchableCenter} />

                }


                {
                    this.state.rightAction != null ?
                        <Icon icon={iconRight} onPress={this.state.rightAction.onClick} />
                        :
                        <ReactNative.TouchableOpacity style={BoxHeaderTouchable}>
                            <ReactNative.View>
                            </ReactNative.View>
                        </ReactNative.TouchableOpacity>
                }

            </ReactNative.View >
        );
    }

}

My request for the change icon in other page (example: geolocation)

import React, { Component } from 'react';
import ReactNative from 'react-native';
import { styles, Container, Text } from './labsoft/labsoft.ui';

import App from "./app";
import { BasicPageProperties, BasicPageState, BasicPage } from './interfaces/generics/basicPage';

export interface GeolocationPageProperties extends BasicPageProperties {
}

export interface GeolocationPageState {
    latitude: any,
    longitude: any,
    address: any,
    error: any

}

export default class GeolocationPage extends BasicPage<GeolocationPageProperties, GeolocationPageState> {
    constructor(props: GeolocationPageProperties) {
        super(props);
        this.state = {
            latitude: null,
            longitude: null,
            address: null,
            error: null,
        };

    }


    componentWillMount() {
        this.app.header.setRightAction({
            icon: 'star',
            onClick: () => { }
        })
    }
    componentDidMount() {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                console.log(position);
                this.setState({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                    address: "",
                    error: null,
                });

                console.log('http://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + ',' + position.coords.longitude + '&sensor=true');

                // fetch('http://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + ',' + position.coords.longitude + '&sensor=true')
                //     .then((response) => response.json())
                //     .then((data) => {

                //         this.setState({
                //             latitude: position.coords.latitude,
                //             longitude: position.coords.longitude,
                //             address: data.results[0].formatted_address,
                //             error: null,
                //         });

                //     })
                //     .catch((error) => {
                //         console.error(error);
                //     });

            },
            (error) => this.setState({ error: error.message }),
            { enableHighAccuracy: true, timeout: 10000, maximumAge: 1000 },
        );
    }

    render() {
        return (
            <Container>
                <Text>Latitude: {this.state.latitude}</Text>
                <Text>Longitude: {this.state.longitude}</Text>
                <Text>Endereço: {this.state.address}</Text>
                {this.state.error ? <Text>Error: {this.state.error}</Text> : null}
            </Container>
        );
    }
}

And other code, for request change icon, but not working

import React, { Component } from 'react';
import ReactNative from 'react-native';
import { Container, Text, Button } from './labsoft/labsoft.ui';

import App from "./app";
import { BasicPageProperties, BasicPageState, BasicPage } from './interfaces/generics/basicPage';

export interface MainProperties extends BasicPageProperties {
}

export interface MainState extends BasicPageState {

}

export default class MainPage extends BasicPage<MainProperties, MainState> {

    constructor(props: MainProperties) {
        super(props);
    }

    render() {
        return (
            <Container>
                <Button title="aaa" onPress={() => this.app.openDrawer()} />
                <Button title="change right action"
                    onPress={() => {
                        this.app.header.setRightAction({
                            icon: "bars",
                            onClick: () => {
                                alert("star");
                            }
                        })
                    }} />
            </Container>
        );
    }
}

Answer 1

When navigator render other page, i set null in header icon. it's working