Icons get cut off in App Bar on Android using headerRight (but not if hot-swapped in) #36793

SubsequentlySneeds · 2025-05-10T04:12:10Z

Minimal reproducible example

https://github.com/SubsequentlySneeds/expo-icon-header-bug-mre

Steps to reproduce

Platforms

I tested this on the Expo Go app on two Android devices:

Samsung S23 Ultra, Android 15
LG V35 ThinQ, Android 10

Although I skipped web and iPhone to keep the example minimal, neither of these platforms had the issue when I first experienced the bug.

Steps

From the repo linked above, ensure that in _layout.jsx the <Text> line is uncommented and the <Ionicons> line is commented.
Run npx expo start. From a clean start of Expo Go, scan the QR code from the terminal. The screen should look like:

With the app still open, comment out the <Text> line and uncomment the <Ionicons> line in _layout.jsx. Save the file to hot reload. The screen should now look like:

Note that the accessibility icon is (horizontally) fully visible.

Close the app (ours, not Expo Go) and re-enter, either from "Recently Opened" or another QR scan in Expo Go. Whichever way you do it, you just need the "New update available, downloading..." to show up. The screen should now look like:

Note that the accessibility icon is now almost entirely cut off - only a small section of one of the arms can be seen on the right.

Comment out the <Ionicons> line and uncomment the <Text> line in _layout.jsx. The screen should now look like:

Here, only a sliver of the leftmost part of the R is visible.

Bug

The desired behavior is that the <Ionicons> renders visibly in the right part of the App Bar, as it does after hot-swapping it for <Text>. Because this is platform-specific and behaves inconsistently with respect to hot-swapping in Expo Go, I filed under SDK.

Other Notes

You can fix it during an Expo Go session by commenting out the headerRight option, hot reloading, and then uncommenting it and hot reloading again. Notice that the feet display this time, where in all the above examples they are cut off.
headerLeft and headerTitle don't seem to have this issue in the minimal example. There was a point while investigating the original project where all three header icons were cut off this way (only the leftmost sliver showing). Unfortunately I didn't save this state and don't remember how I got there (some combination of changes and hot reloads), but the knowledge might be useful to rule out that it's just being cut off by the right side of the screen.
Building through EAS and installing the APK did not fix it. However, I'm very new to Expo (first EAS build), and may not have set this up correctly.

Environment

$ npx expo-env-info

  expo-env-info 1.3.3 environment info:
    System:
      OS: Linux 6.11 Ubuntu 24.10 24.10 (Oracular Oriole)
      Shell: 5.2.32 - /bin/bash
    Binaries:
      Node: 22.15.0 - /run/user/1000/fnm_multishells/3548540_1746843328195/bin/node
      Yarn: 1.22.22 - /run/user/1000/fnm_multishells/3548540_1746843328195/bin/yarn
      npm: 11.3.0 - /run/user/1000/fnm_multishells/3548540_1746843328195/bin/npm
      Watchman: 4.9.0 - /usr/bin/watchman
    npmPackages:
      expo: ~53.0.9 => 53.0.9 
      expo-router: ~5.0.6 => 5.0.6 
      react: 19.0.0 => 19.0.0 
      react-native: 0.79.2 => 0.79.2 
    npmGlobalPackages:
      eas-cli: 16.4.1
    Expo Workflow: managed

Expo Doctor Diagnostics

$ npx expo-doctor@latest
15/15 checks passed. No issues detected!

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

SubsequentlySneeds · 2025-05-11T01:40:20Z

After some more testing, this appears specific to Expo 53 or the corresponding Expo Go version. Neither 51 nor 52 have the issue.

marklawlor · 2025-05-14T00:18:40Z

Hey! Thanks for opening the issue. Seems that this issue is related to react-navigation library which is a dependency of Expo Router. Can you try reproducing the issue without using Expo Router (just using React Navigation).

Expo Router also inserts a Safe Area Context which might be misbehaving on these particular devices.

If your able to reproduce the issue without Expo Router, I would recommend closing this issue and reopening under the React Navigation repo, as they are the maintainers of the <Header /> component and its appearance - so they are the best people to resolve this issue.

SubsequentlySneeds · 2025-05-14T06:48:56Z

If your able to reproduce the issue without Expo Router, I would recommend closing this issue and reopening under the React Navigation repo, as they are the maintainers of the <Header /> component and its appearance - so they are the best people to resolve this issue.

I put together an example trying to demonstrate the bug independent of Expo:

RN Only Example

But, I found I couldn't replicate the issue through their standard way of running apps (npx react-native start and npx react-native run-android). I used @react-native-vector-icons/ionicons for this to avoid Expo packages and it displayed correctly.

I then made a fresh example in Expo (no router) using this icon library instead of @expo/vector-icons to see if that was the difference:

Expo Example (no router, no Expo icons)

Here are the results from each configuration I tested:

Framework	Icons	Run Config	Result
React Native (bare)	`react-native-vector-icons`	`npx react-native start` + `npx react-native run-android`	Good
Expo (no router)	`@expo/vector-icons`	Expo Go	Cut off
Expo (no router)	`@expo/vector-icons`	`npx expo run:android`	Cut off
Expo (no router)	`react-native-vector-icons`	Expo Go	Not Visible ❗
Expo (no router)	`react-native-vector-icons`	`npx expo run:android`	G 8000 ood
Expo (router)	`@expo/vector-icons`	Expo Go	Cut off
Expo (router)	`@expo/vector-icons`	`npx expo run:android`	Cut off
Expo (router)	`react-native-vector-icons`	Expo Go	Cut off
Expo (router)	`react-native-vector-icons`	`npx expo run:android`	Good
Expo 51/52 ❓	*	*	Good

❗ Changes to "Cut off" when wrapped in SafeAreaProvider
❓ Had the same major and minor versions of @react-navigation/native and @react-navigation/native-stack (7.1.X and 7.3.X) as the Expo 53 tests, only behind by 1 patch on each. Edit: these are both just version bumps, no changes.

So, it appears the only way to trigger the issue is to use Expo 53, and then either a) use Expo Go or b) use @expo/vector-icons. This makes it hard to provide a clean MRE to react-navigation to demonstrate it's their issue since it worked, still works (outside Expo), and even still works with some Expo configs.

I'll file the bug there too regardless, but since I have very little knowledge of how these two interact, I'll wait for you to determine whether these results mean we should close this one and assume it's something that should be fixed in react-navigation instead.

HarambeHombre · 2025-05-14T15:49:21Z

Use the React Navigation - "Stack"

I have had this issue pop up and it can be frustrating, there is an issue in the native-stack with rendering a "headerRight" must be an issue in expo-router as well?

If you use Stack you can add the code this way, it will properly render your icon on the right side of the header:

npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-gesture-handler

import { NavigationContainer } from '@react-navigation/native'; //This container needs to wrap anything in your app that uses Navigation or error
import { createStackNavigator } from '@react-navigation/stack';
import {Ionicons} from '@expo/vector-icons

const Stack = createStackNavigator();

export default function RootLayout() {
  return (
    <NavigationContainer> 
      <Stack.Navigator     
          screenOptions={{
              headerRight: () => <Ionicons name="accessibility" size={24} color="black" /> //add a style={{}} to add margin and such
          }} 
      />
          <Stack.Screen name="Home" component={HomeScreen} /> //if you are using screens
          //... content will go here ...
      </Stack.Navigator>
    </NavigationContainer>
  )
}

References:
https://reactnavigation.org/docs/getting-started
https://reactnavigation.org/docs/stack-navigator

SubsequentlySneeds · 2025-05-15T02:44:30Z

If you use Stack you can add the code this way, it will properly render your icon on the right side of the header:

@HarambeHombre Yes, I'm getting this result too - changing the no-router test above to use @react-navigation/stack and createStackNavigator() causes it to display the icon fully. However, there are differences in the layout: both the horizontal positioning of the icon and the vertical size of the navigation header are different (overlay of screenshots from a dev build with each):

This is in addition to the other differences between the two. As you mentioned, this affects Expo Router too. There seems to be a way around this here:

https://expo.github.io/router/docs/migration/react-navigation/stack

but ideally we would be able to get the benefits of native-stack and the same layout as before, using expo-router.

HarambeHombre · 2025-05-15T04:17:56Z

If you use Stack you can add the code this way, it will properly render your icon on the right side of the header:

@HarambeHombre Yes, I'm getting this result too - changing the no-router test above to use @react-navigation/stack and createStackNavigator() causes it to display the icon fully. However, there are differences in the layout: both the horizontal positioning of the icon and the vertical size of the navigation header are different (overlay of screenshots from a dev build with each):
This is in addition to the other differences between the two. As you mentioned, this affects Expo Router too. There seems to be a way around this here:
https://expo.github.io/router/docs/migration/react-navigation/stack

but ideally we would be able to get the benefits of native-stack and the same layout as before, using expo-router.

Have you tried adding a style to it to try to force everything to line up? Maybe create a custom icon component with the Ionicons wrapped in a view that can be styled and add it to the headerRight?

All I can think is there is an update or state issue with rendering the icon, because like you said if you hot-load fix it, the icon appears until you reload. Other times the icon looks like it wants to render like normal and then it gets a major margin left boost lol.

Also, I fully agree we should be able to just get this functionality whichever route we choose to use.

SubsequentlySneeds added the needs validation Issue needs to be validated label May 10, 2025

expo-bot added needs review Issue is ready to be reviewed by a maintainer and removed needs validation Issue needs to be validated labels May 10, 2025

brentvatne assigned marklawlor May 12, 2025

brentvatne marked this as a duplicate of #36853 May 13, 2025

marklawlor added needs more info To be used when awaiting reporter response and removed needs review Issue is ready to be reviewed by a maintainer labels May 14, 2025

SubsequentlySneeds mentioned this issue May 14, 2025

Using Expo, icons get cut off in App Bar on Android using headerRight (but not if hot-swapped in) react-navigation/react-navigation#12595

Open

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Icons get cut off in App Bar on Android using headerRight (but not if hot-swapped in) #36793

Icons get cut off in App Bar on Android using headerRight (but not if hot-swapped in) #36793

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Icons get cut off in App Bar on Android using headerRight (but not if hot-swapped in) #36793

Icons get cut off in App Bar on Android using headerRight (but not if hot-swapped in) #36793

Comments

Minimal reproducible example

Steps to reproduce

Platforms

Steps

Bug

Other Notes

Environment

Expo Doctor Diagnostics

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!