title: Top navigation items in header constantly flickers when typing
body: <p>The image in the header constantly flickers when I type. May I ask how do I stop this flickering at the top right hand corner or accessoryRight? I am using this <a href="https://akveo.github.io/react-native-ui-kitten/docs/components/top-navigation/overview#topnavigation" rel="nofollow noreferrer">TopNavigation component</a> from UI Kitten UI library. I don't think this is normal, it shouldn't happen at all. I must be doing something wrongly.</p>
  <p><a href="https://youtu.be/fQppQn-RzeE" rel="nofollow noreferrer">https://youtu.be/fQppQn-RzeE</a> (How do I embed this? Editor, thank you in advance!)</p>
  <p>The flickering happens in the title and the right side of the Navigation Header.</p>
  <p>I made a separate component for the TopNavigation and then call it in respective screens.</p>
  <p>Things I have tried:</p>
  <ul>
  <li>Since the outcome of the Header relies on <code>navigation props</code>, I tried using <code>useState</code> and <code>useEffect</code> (with navProps as the dependency) to save the prop instead of reading directly from <code>props</code>, but to no avail</li>
  <li>Directly adding the jsx into the TopNavigation's <code>accessoryLeft/Right</code> and <code>title</code> options</li>
  </ul>
  <p>Any input is welcome, appreciate it!</p>
  <p>TopNavigation:</p>
  <pre class="lang-js prettyprint-override"><code>const NavHeader = ({ navProps }) =&gt; {
    const navigateBack = () =&gt; {
      navProps.navigation.goBack();
    };
  
    const [type, setType] = React.useState('');
  
    React.useEffect(() =&gt; {
      setType(navProps.type);
    }, [navProps]);
  
    const BackIcon = props =&gt; &lt;Icon {...props} name='arrow-back' /&gt;;
  
    const BackAction = () =&gt; (
      &lt;TopNavigationAction icon={BackIcon} onPress={navigateBack} /&gt;
    );
  
    const renderBrand = () =&gt; (
      &lt;View style={styles.titleContainer}&gt;
        &lt;Image source={require('../../assets/images/brand.png')} /&gt;
      &lt;/View&gt;
    );
  
    const renderLogo = () =&gt; (
      &lt;Image source={require('../../assets/images/logo.png')} /&gt;
    );
  
    return (
      &lt;TopNavigation
        style={styles.topNav}
        accessoryLeft={navProps.backNav &amp;&amp; BackAction}
        accessoryRight={
          type === 'register' || type === 'profile' ? renderLogo : null
        }
        title={type === 'landing' || type === 'auth' ? renderBrand : null}
        alignment='center'
      /&gt;
    );
  };
  </code></pre>
  <p>Import example:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;KeyboardAvoidingView
        style={styles.kbContainer}
        behavior={Platform.OS === 'ios' ? 'padding' : null}
      &gt;
    &lt;SafeAreaView style={styles.parentContainer}&gt;
      &lt;NavHeader navProps={navProps} /&gt; // Imported custom Header component here
      &lt;ScrollView&gt;
        {other content}
      &lt;/ScrollView&gt;
    &lt;/SafeAreaView&gt;
  &lt;/KeyboardAvoidingView&gt;
  </code></pre>