How can I efficiently render an Image Component in a React Native Header bar?

Question

Overview

I am currently working on a React Native application that uses the React Navigation library. From the React Navigation library, I'm using the navigationOptions property to create a Header component in each of my screens. Each screen uses the exact same properties:

HomeScreen.navigationOptions = {
  headerRight: (
    <Ionicons
      name={"md-menu"}
      size={26}
      style={{ marginBottom: -5, paddingRight: 15 }}
      color={"#ccc"}
    />
  ),
  headerTitle: (
    <HeaderLogo/>
  )
}

My Logo component is as such:

export default HeaderLogo = () => {
  const logo = require("../../../assets/images/logo.png");
  return (
      <Image
        style={{
          resizeMode: "contain",
          height: 40,
          width: 85,
          marginLeft: 85
        }}
        source={logo}
      />
  )
}

The problem

The logo renders in the header correctly as expected; however, whenever I switch screens, the logo briefly disappears and reappears in a flash. Its noticeable and does not look good. I want the header to appear static no matter how many times I switch screens. I'm assuming this has something to with the require() method, where its pulling the image everytime. My question is:

How can I efficiently use an Image component in my Header, such that the header appears static?

Answer 1

Add headerMode: 'float' to the navigationOptions of the stack navigator that contains your screens.

From createStackNavigator documentation:

• headerMode - Specifies how the header should be rendered:
  • float - Render a single header that stays at the top and animates as screens are changed. This is a common pattern on iOS.
  • screen - Each screen has a header attached to it and the header fades in and out together with the screen. This is a common pattern on Android.
  • none - No header will be rendered.