Header Icons are sometimes unclickable and offset

[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

[markmssd]

As a workaround I show the Icon after a few ms:

const [shouldRenderIcon, setShouldRenderIcon] = useState(false)

useEffect(() => {
const nbr = setTimeout(() => setShouldRenderIcon(true), 200)
return () => clearTimeout(nbr)
}, [])

return shouldRenderIcon ? <MyIcon /> : null

[sallar]

I have the same issue. It happens after a few times of live reloading

[dmarkow]

Same issue:

• Doesn't seem related to live reloading. The production release of my app is showing this behavior randomly.
• Seems to only happen using the native navigator. A regular stack navigator (non-native) doesn't have the problem.

[satya164]

Hey, native-stack has been moved to software-mansion/react-native-screens. Please track the issue here: software-mansion/react-native-screens#372