8000 Using Expo, icons get cut off in App Bar on Android using headerRight (but not if hot-swapped in) · Issue #12595 · react-navigation/react-navigation · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
3 of 13 tasks
SubsequentlySneeds opened this issue May 14, 2025 · 1 comment
Open
3 of 13 tasks

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

SubsequentlySneeds opened this issue May 14, 2025 · 1 comment
Labels
bug platform:android repro provided

Comments

@SubsequentlySneeds
Copy link
SubsequentlySneeds commented May 14, 2025 •
edited
Loading

Current behavior

Originally filed here in the expo project: expo/expo#36793. Below is copied from the initial report:

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

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

  1. 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.

  1. 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.

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!

Expected behavior

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>.

Reproduction

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

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • @react-navigation/material-top-tabs
  • @react-navigation/stack
  • @react-navigation/native-stack
  • react-native-drawer-layout
  • react-native-tab-view

Environment

  • I've removed the packages that I don't use
package version
@react-navigation/native 7.1.9
@react-navigation/native-stack 7.3.13
react-native-screens 4.10.0
react-native-safe-area-context 5.4.0
react-native 0.79.2
expo 53.0.9
node 22.15.0
npm or yarn 11.3.0
@SubsequentlySneeds
Copy link
Author

Follow-up information from expo/expo#36793 (comment):

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 Good
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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug platform:android repro provided
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@SubsequentlySneeds
0