When I add icons to header and navigate to other screen, the icons stay

I added an right Icon to my header through the navigationOptions object in my first view. But when I go to the next screen it does stay on the header. And the next view does not have any buttons. When I go back and then go forward again, the behavior goes correct.


The code for my screen is:

import React from 'react';
import { View, Text, TouchableHighlight } from 'react-native';
import { CardView, Icon } from '../common';

const Style = {
    card: {
        padding: 10
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,

export default class Home extends React.Component {

    static navigationOptions = {
        title: 'Header',

        header: (navigation) => ({
            right: (
                    onPress={() => navigation.navigate('second', { foo: 'nothing yet' })}
                    style={{ marginRight: 15 }}
                        <Icon name='arrow-forward' />

    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={Style.container}>
                    <CardView style={Style.card}>
                        <Text style={Style.welcome}>
                            Welcome to React Native!!!!
                        <Text style={Style.instructions}>
                            To get started, edit index.android.js
                        <Text style={Style.instructions}>
                            Double tap R on your keyboard to reload,{'\n'}
                            Shake or press menu button for dev menu

1 thought on “When I add icons to header and navigate to other screen, the icons stay

  1. Pingback: 토토사이트

Comments are closed.