[native-stack] Header Icons are sometimes unclickable and offset

[satya164]

Moved from react-navigation/react-navigation#6746. Originally opened by @markmssd

---

Current Behavior

When trying to display an icon in the header, it sometimes appears in a weird position, and becomes unclickable.

It only happens ~1/10 times. It happens on the iOS simulator AND on a real device.

It happens whether I use an image from my /assets folder, or an Icon from react-native-vector-icons.

I've also tried "hydrating" the icon by requiring it early during app startup, but still.

import React from 'react'
import { Image, TouchableOpacity, StyleSheet } from 'react-native'
import { NavigationNativeContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'

const styles = StyleSheet.create({
  settingsIcon: {
    height: 20,
    width: 20,
  },
})

const Stack = createNativeStackNavigator()

<NavigationNativeContainer>
  <Stack.Navigator>
    <Stack.Screen name={'_BottomTabs'} component={BottomTabs} options={{
          headerRight: () =>
            <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
              <Image source={require('../../assets/images/profile-icon.png')}
                     style={styles.settingsIcon} />
            </TouchableOpacity>,
        }} />
    </Stack.Navigator>
</NavigationNativeContainer>

Expected Behavior

It should consistently display the icon in the right position!

How to reproduce

• You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
• Either re-create the bug on Snack or link to a GitHub repository with code that reproduces the bug.
• Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.
• Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue.
• Before reporting an issue, make sure you are on latest version of the package.

Your Environment

software	version
iOS or Android	iOS
@react-navigation/native	5.0.0-alpha.33
@react-navigation/native-stack	5.0.0-alpha.33
react-native-screens	2.0.0-alpha.34
react-native	0.61.5
expo	N/A
node	10.15.3
npm or yarn	yarn 1.7.0

[kmanj-pixel]

Same problem. Happens in standalone build and in Expo app.

software	version
iOS or Android	iOS
@react-navigation/native	^5.0.2
@react-navigation/native-stack	^5.0.2
react-native-screens	2.0.0-alpha.12
react-native	expo's v36 fork
expo	v36
node	v12.16.1
npm or yarn	yarn 1.22.0

[guioum]

Same problem here in Expo SDK 36 (fixed it by reversing to non-native with react-navigation/stack).

[WoLewicki]

It looks like a duplicate of #432. I am closing it then. Feel free to comment if it is not the same and I will reopen it.