how to show/hide icons in a react native toolbar

Question

I need to hide a hamburger-menu/location icon on the toolbar while the login screen is active. One option I thought would work is to have the icons set to a empty string by default. And use the EventEmitter in the success callback function in my Login.js & Logout.js, and then listen for it in my toolbar component. Sending a bool to determine show/hide. I am not sure if there is a better way of doing this so I'm up for suggestions. The Emit/Listen events work as expected. The issue is how I use a variable to apply the empty string or named icon.

here is the Toolbar Component.

    export default class Toolbar extends Component {

    //noinspection JSUnusedGlobalSymbols
    static contextTypes = {
        navigator: PropTypes.object
    };

    //noinspection JSUnusedGlobalSymbols
    static propTypes = {
        onIconPress: PropTypes.func.isRequired
    };

    //noinspection JSUnusedGlobalSymbols
    constructor(props) {
        super(props);
        this.state = {
            title: AppStore.getState().routeName,
            theme: AppStore.getState().theme,
            menuIcon: '',
            locationIcon: ''
        };
    }

    emitChangeMarket() {
        AppEventEmitter.emit('onClickEnableNavigation');
    }

    //noinspection JSUnusedGlobalSymbols
    componentDidMount = () => {
        AppStore.listen(this.handleAppStore);
        AppEventEmitter.addListener('showIcons', this.showIcons.bind(this));
    };

    //noinspection JSUnusedGlobalSymbols
    componentWillUnmount() {
        AppStore.unlisten(this.handleAppStore);
    }

    handleAppStore = (store) => {
        this.setState({
            title: store.routeName,
            theme: store.theme
        });
    };

    showIcons(val) {
        if (val === true) {
            this.setState({
                menuIcon: 'menu',
                locationIcon: 'location-on'
            });
        } else {
            this.setState({
                menuIcon: '',
                locationIcon: ''
            });
        }
    }

    render() {
        let menuIcon = this.state.menuIcon;
        let locationIcon = this.state.locationIcon;

        const {navigator} = this.context;
        const {theme} = this.state;
        const {onIconPress} = this.props;

        return (
            <MaterialToolbar
                title={navigator && navigator.currentRoute ? navigator.currentRoute.title : 'Metro Tracker Login'}
                primary={theme}
                icon={navigator && navigator.isChild ? 'keyboard-backspace' : {menuIcon}}
                onIconPress={() => navigator && navigator.isChild ? navigator.back() : onIconPress()}
                actions={[{
                    icon: {locationIcon},
                    onPress: this.emitChangeMarket.bind(this)
                }]}
                rightIconStyle={{
                    margin: 10
                }}
            />
        );
    }
}

The warning message I get is the:

Invalid prop icon of type object supplied to toolbar, expected a string.

how can I pass a string while wrapped in variable brackets?

Or if easier how can I hide/show the entire toolbar? either way works.

Answer 1

Try removing the brackets around menuIcon and locationIcon:

...
icon={navigator && navigator.isChild ? 'keyboard-backspace' : menuIcon}
...
    icon: locationIcon,
...