react-navigation custom header using headerMode float creates jumps / glitches on navigation

I have setup a custom header within react navigation. However it seems to flicker and glitch slightly when navigation between screens.

It's a bit intermittent but happens perhaps 70% of the time. This only happens when using the float headerMode however because my header title doesn't change the screen mode isnt really an option.

My header looking like this:

<Header style={style.header}>
  <Left style={{ paddingLeft: 10 }}>
    {props.previous ? BackButton(navigation) : null}
  </Left>
  <Body style={{ width: WIDTH - 75 }}>
    <Text style={style.title} numberOfLines={1}>App Sample</Text>
  </Body>
  <Right style={{ paddingRight: 10 }}>
    {showMenu(route) ? <TouchableOpacity hitSlop={{
      top: 10,
      bottom: 10,
      left: 10,
      right: 10
    }} onPress={() => props.toggleMenu()}>
      <Icon style={style.icon} name="md-menu" />
    </TouchableOpacity> : null}
  </Right>
</Header>

My screens themselves are simple and it doesn't seem to make a difference the type of screen i navigate to.

Any suggestions to try and really appreciated it, else I'm going to have to release our app with the screen headerMode which i really want to avoid.

Thanks!