Back button image not showing in Stack navigator (although button is there and pressable) - iOS and Android #11792

sergioisidoro · 2024-01-18T17:17:09Z

Current behavior

I'm having an issue where the arrow image of the back button does not show on Android (Expo Go - simulator and Device), despite the button being there, and being pressable.

The image shows on iOS, and it's only an issue on a nested navigator, not the Root stack navigator

AppNav (Stack) -- Back button visible
   Drawer Nav (Drawer)
       User Settings Screen
       Project Navigator (Stack)   
         Tab navigator
             Screen 1
             Screen 2
         Stack Screen 1 -- Back button there, but not visible

Because the button is visible on the Root stack I don't think this is an issue with the Assets imports / loading
It also doesn't' seem to be an issue with the header styles, since if I move Stack screen 1 to the root stack, the back button starts showing.
Inspecting the elements shows correctly the touchables, and the correct elements. The element is clickable, and does go back if pressed. It's just the arrow that is not visible.
I have removed all header styles, and all other headers are headerShown: false. Nothing helped
Because the button is there and is showing, it is not a problem of the stack being empty (with nothing to go back to)
Adding a headerBackImage bypasses the issue

iOs (left), Android (right)

NOTE: Cannot reproduce in Expo snack because of Reanimated issues

Expected behavior

Back button showing.

Reproduction

https://snack.expo.dev/@smaisidoro/talking-violet-coffee

Platform

Packages

Environment

Expo Go

    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/drawer": "^6.6.6",
    "@react-navigation/native": "~6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "@react-navigation/stack": "~6.3.20",

Similar issues found:
#8609
#11657

Worked around the issue by providing a custom back button image as a headerBackImage component

The text was updated successfully, but these errors were encountered:

oliverdolgener · 2024-01-26T19:36:46Z

I face the same issue but on iOS 😕
Looks as if it would only affect my production builds. On the simulator it seems to be there

bnussman · 2024-01-27T01:54:17Z

I'm having a similar issue to that @oliverdolgener. Everything is fine on Expo Go and in an Expo Dev Client, but my drawer icon is missing on production builds for iPhone only. It shows up on iPad somehow

Edit: Turns out I was at my expo OTA update limit, which cased my app to not push new icons to the client. Had to pay for an upgraded Expo Updates limit.

RyanTG · 2024-02-05T23:29:22Z

I'm experiencing the same as @oliverdolgener - back button is missing on iOS production-only, though not Android.

This occurred after upgrading Expo to SDK 50.

I experienced it with this set of react navigation packages:

    "@react-navigation/bottom-tabs": "^6.3.3",
    "@react-navigation/drawer": "^6.4.4",
    "@react-navigation/elements": "^1.3.21",
    "@react-navigation/native": "^6.0.12",
    "@react-navigation/stack": "^6.2.3",

as well as with

    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/drawer": "^6.6.6",
    "@react-navigation/elements": "^1.3.21",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.3.20",

I am not using OTA updates, as another noted above.

Not sure how to proceed here.

oliverdolgener · 2024-02-06T06:11:44Z

My current workaround is to use a custom back icon. But would be nice to have the default ones working again

TMcLoone · 2024-02-14T22:43:03Z

Also having this issue after Expo 50 updgrade

fgauna12 · 2024-02-19T16:45:05Z

Same issue for me on iOS and with stack navigator. Only happens in production builds.

    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/stack": "^6.1.7",

carbonatedcoder · 2024-02-19T22:22:13Z

Has there been any progress on this issue or a known cause?

After upgrading to Expo SDK 50, all our iOS production builds are not showing the back button after a fresh build. It is still pressable, but it's like the icon asset is missing or something. The only workaround we've found is that publishing an OTA subsequent to the build makes the back button appear again. It does not happen within Expo Go.

When building a simulator preview build and inspecting the application bundle using "Show Package Contents", I see the back icon bundled into the build at assets/node_modules/@react-navigation/elements/src/assets/back-icon.png, yet it does not show in app. Only after the first OTA does it start to appear.

Packages being used:

    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/elements": "^1.3.17",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.16",

tknuts · 2024-02-21T16:09:46Z

Here i my temporary fix. Expo will not be in a hurry to fix the issue, they have a new favourite :-) :
<Stack.Navigator screenOptions={{ headerShown: true, headerBackImage: () => <BackIcon /> }} initialRouteName="Welcome" >
Then the back icon:
const BackIcon = props => { return <Icon name="chevron-left" size={40} {...props} /> }

Eonfuzz · 2024-03-01T05:52:23Z

Here i my temporary fix. Expo will not be in a hurry to fix the issue, they have a new favourite :-) : <Stack.Navigator screenOptions={{ headerShown: true, headerBackImage: () => <BackIcon /> }} initialRouteName="Welcome" > Then the back icon: const BackIcon = props => { return <Icon name="chevron-left" size={40} {...props} /> }

Thanks mate, had the same issue over here and it blindsided us. Probably worth having the icons be different per platform but otherwise worked

dylanrandle · 2024-04-01T02:08:34Z

Has there been any progress on this issue or a known cause?

After upgrading to Expo SDK 50, all our iOS production builds are not showing the back button after a fresh build. It is still pressable, but it's like the icon asset is missing or something. The only workaround we've found is that publishing an OTA subsequent to the build makes the back button appear again. It does not happen within Expo Go.

When building a simulator preview build and inspecting the application bundle using "Show Package Contents", I see the back icon bundled into the build at assets/node_modules/@react-navigation/elements/src/assets/back-icon.png, yet it does not show in app. Only after the first OTA does it start to appear.

Packages being used:
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/elements": "^1.3.17",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.16",

I am seeing the exact same issue as @carbonatedcoder

iOS builds only
Confirmed that the back-icon@1x.ios.png, back-icon@2x.ios.png, and back-icon@3x.ios.png are included in the build (although, it's missing the back-icon@1.5x.ios.png and back-icon@4x.ios.png which are included in the original code).
"Fixed" by pushing OTA update

useEffects · 2024-04-09T18:59:14Z

can confirm

dylanrandle · 2024-04-18T22:58:14Z

@EvanBacon can you or someone at Expo to take a look at this?

outaTiME · 2024-04-19T23:40:46Z

Exactly, I am experiencing the same problem after migrating to Expo 50, the back icon files of react navigation are not resolved in the iOS production builds.

For example, the following code:

import { useAssets } from 'expo-asset';
const [assetsLoaded, assetsError] = useAssets([
  require('@react-navigation/elements/src/assets/back-icon.png'),
  require('@react-navigation/elements/src/src/assets/back-icon-mask.png'),
]);
if (assetsError) {
  console.warn(assetsError);
}

throws the following error:

{ [Error: File './ -- file:///' could not be copied to 'file:///var/mobile/Containers/Data/Application/9B4B3B09-F681-4578-B13F-7EBA52903F5B/Library/Caches/ExponentAsset-0ea69b5077e7c4696db85dbcba75b0e1.png'] code: 'E_FILE_NOT_COPIED' }

jzhangdev · 2024-05-23T02:23:37Z

Has anyone solved this problem? Expo 51 still have the same problem on iOS production build.

antonio-vevivo · 2024-05-23T13:14:29Z

Can confirm that this happens with our app on iOS production build and gets fixed by making an OTA update after build.

WhidRubeld · 2024-05-27T08:48:55Z

I confirm. This problem occurs in almost every build for iOS when using Expo 50

dylanrandle · 2024-05-27T13:04:49Z

@sergioisidoro Would you be willing to update the description to include iOS? If not, we can create a new issue since many of us are only seeing this on iOS.

github-actions · 2024-05-27T15:21:34Z

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

@react-navigation/bottom-tabs (found: 6.5.11, latest: 6.5.20)
@react-navigation/drawer (found: 6.6.6, latest: 6.6.15)
@react-navigation/native (found: 6.1.9, latest: 6.1.17)
@react-navigation/stack (found: 6.3.20, latest: 6.3.29)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

sergioisidoro · 2024-05-27T15:25:11Z

@dylanrandle Done! Thanks for bringing attention to this

I also removed the word nested because it seems people are getting this issue on non nested navigators (?) can please someone confirm that it is indeed the case? or does this only happen on nested navigators?

Also for people finding this issue for the first time, note that it can be worked around by providing a custom image through the prop.

WhidRubeld · 2024-06-05T12:48:31Z

I confirm that on any Stack navigation screen. It doesn't matter if it's nested or in Root.

    "@react-navigation/elements": "^1.3.19",
    "@react-navigation/native": "^6.1.8",
    "@react-navigation/native-stack": "^6.9.14", // not used, used only JS stack navigator
    "@react-navigation/stack": "^6.3.18",

The library versions are used by installing via expo-cli (npx expo install ...)
The project is being assembled using EAS

thelamedia · 2024-06-10T16:27:35Z

I am also still having this issue on iOS production builds in SDK 51.0.11. RN elements, native, stack and bottom tabs are all the latest version, updated using expo install.
Dev (simulator and client) and android all work properly. I can tap in that corner to go back, but no icons are rendered.

tomerittah · 2024-06-12T16:18:27Z

I've used the following workaround which is I basically took from HeaderBackButton of react-navigation/elements for IOS and changed the Image to Icon and it worked for production EAS build:

import * as React from 'react'
import { StyleSheet, I18nManager } from 'react-native'
import { Icon } from 'react-native-elements'

const styles = StyleSheet.create({
  icon: {
    height: 21,
    width: 13,
    marginLeft: 8,
    marginRight: 22,
    marginVertical: 12,
    transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
  },
})

// TODO: Delete once the missing header back button is solved
// Ref. https://github.com/react-navigation/react-navigation/issues/11792
const HeaderBackImage = ({ tintColor }): React.ReactNode => {
  return (
    <Icon name="chevron-left" color={tintColor} type="font-awesome-5" iconStyle={styles.icon} />
  )
}

export default HeaderBackImage

Then:

<Stack.Navigator
      screenOptions={{
        ...
        headerBackImage: HeaderBackImage,
      }}
    >
    ...
</Stack.Navigator>

…vigation#11792)

rikur · 2024-07-25T09:16:00Z

Wow, #12019 really fixes the issue. I'm currently patching it with patch-package:

diff --git a/node_modules/@react-navigation/elements/src/assets/back-icon@1.5x.android.png b/node_modules/@react-navigation/elements/src/assets/back-icon@1.5x.android.png
deleted file mode 100644
index ad03a63..0000000
Binary files a/node_modules/@react-navigation/elements/src/assets/back-icon@1.5x.android.png and /dev/null differ
diff --git a/node_modules/@react-navigation/elements/src/assets/back-icon@1.5x.ios.png b/node_modules/@react-navigation/elements/src/assets/back-icon@1.5x.ios.png
deleted file mode 100644
index 1fa30ec..0000000
Binary files a/node_modules/@react-navigation/elements/src/assets/back-icon@1.5x.ios.png and /dev/null differ

i.e. just delete the node_modules/@react-navigation/elements/src/assets/back-icon@1.5*.png files.

github-actions · 2024-07-25T09:16:13Z

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

sergioisidoro added the bug label Jan 18, 2024

github-actions bot added repro provided platform:android labels Jan 18, 2024

sergioisidoro changed the title ~~Back button image not showing on Android in level 2 nested Stack navigator (although button is there and pressable)~~ Back button image not showing on Android in nested Stack navigator (although button is there and pressable) Jan 18, 2024

github-actions bot added the platform:ios label May 27, 2024

sergioisidoro changed the title ~~Back button image not showing on Android in nested Stack navigator (although button is there and pressable)~~ Back button image not showing in Stack navigator (although button is there and pressable) - iOS and Android May 27, 2024

sparkertime added a commit to sparkertime/react-navigation that referenced this issue Jun 13, 2024

Remove 1.5x back-icon.png images. Fixes react-navigation#11792

23afe77

sparkertime added a commit to sparkertime/react-navigation that referenced this issue Jun 13, 2024

fix: Ensures the back icon renders in iOS production builds (react-na…

2a65c41

…vigation#11792)

sparkertime mentioned this issue Jun 13, 2024

Remove 1.5x back-icon.png images. Ensures the back icon renders in iOS production builds, fixes #11792 #12019

Merged

satya164 closed this as completed in 5e297a0 Jun 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Back button image not showing in Stack navigator (although button is there and pressable) - iOS and Android #11792

Back button image not showing in Stack navigator (although button is there and pressable) - iOS and Android #11792

sergioisidoro commented Jan 18, 2024 •

edited

Loading

oliverdolgener commented Jan 26, 2024

bnussman commented Jan 27, 2024 •

edited

Loading

RyanTG commented Feb 5, 2024

oliverdolgener commented Feb 6, 2024

TMcLoone commented Feb 14, 2024

fgauna12 commented Feb 19, 2024

carbonatedcoder commented Feb 19, 2024 •

edited

Loading

tknuts commented Feb 21, 2024

Eonfuzz commented Mar 1, 2024

dylanrandle commented Apr 1, 2024

useEffects commented Apr 9, 2024

dylanrandle commented Apr 18, 2024

outaTiME commented Apr 19, 2024

jzhangdev commented May 23, 2024 •

edited

Loading

antonio-vevivo commented May 23, 2024

WhidRubeld commented May 27, 2024

dylanrandle commented May 27, 2024

github-actions bot commented May 27, 2024

sergioisidoro commented May 27, 2024

WhidRubeld commented Jun 5, 2024 •

edited

Loading

thelamedia commented Jun 10, 2024 •

edited

Loading

tomerittah commented Jun 12, 2024 •

edited

Loading

rikur commented Jul 25, 2024

github-actions bot commented Jul 25, 2024

Back button image not showing in Stack navigator (although button is there and pressable) - iOS and Android #11792

Back button image not showing in Stack navigator (although button is there and pressable) - iOS and Android #11792

Comments

sergioisidoro commented Jan 18, 2024 • edited Loading

Current behavior

Expected behavior

Reproduction

Platform

Packages

Environment

oliverdolgener commented Jan 26, 2024

bnussman commented Jan 27, 2024 • edited Loading

RyanTG commented Feb 5, 2024

oliverdolgener commented Feb 6, 2024

TMcLoone commented Feb 14, 2024

fgauna12 commented Feb 19, 2024

carbonatedcoder commented Feb 19, 2024 • edited Loading

tknuts commented Feb 21, 2024

Eonfuzz commented Mar 1, 2024

dylanrandle commented Apr 1, 2024

useEffects commented Apr 9, 2024

dylanrandle commented Apr 18, 2024

outaTiME commented Apr 19, 2024

jzhangdev commented May 23, 2024 • edited Loading

antonio-vevivo commented May 23, 2024

WhidRubeld commented May 27, 2024

dylanrandle commented May 27, 2024

github-actions bot commented May 27, 2024

sergioisidoro commented May 27, 2024

WhidRubeld commented Jun 5, 2024 • edited Loading

thelamedia commented Jun 10, 2024 • edited Loading

tomerittah commented Jun 12, 2024 • edited Loading

rikur commented Jul 25, 2024

github-actions bot commented Jul 25, 2024

sergioisidoro commented Jan 18, 2024 •

edited

Loading

bnussman commented Jan 27, 2024 •

edited

Loading

carbonatedcoder commented Feb 19, 2024 •

edited

Loading

jzhangdev commented May 23, 2024 •

edited

Loading

WhidRubeld commented Jun 5, 2024 •

edited

Loading

thelamedia commented Jun 10, 2024 •

edited

Loading

tomerittah commented Jun 12, 2024 •

edited

Loading