Skip to content

fix(expo-template): render tab bar icons on Android - #576

Merged
thiagobrez merged 3 commits into
callstack:mainfrom
oleksandrzavarzin-callstack:fix/render-tab-bar-icons-on-android-expo-template
Sep 9, 2026
Merged

fix(expo-template): render tab bar icons on Android#576
thiagobrez merged 3 commits into
callstack:mainfrom
oleksandrzavarzin-callstack:fix/render-tab-bar-icons-on-android-expo-template

Conversation

@oleksandrzavarzin-callstack

Copy link
Copy Markdown
Contributor

PR Description

Bug fix for @bottom-tabs/expo-template. A scaffolded app had no tab bar icons on Android.

app/(tabs)/_layout.tsx passed only SF Symbols, which are Apple-only. On Android the library
warns once per tab and renders the item with a label and an empty M3 active-indicator pill

  • Icons: Platform branch - SF Symbols on iOS, images elsewhere. Ships two 96x96 PNGs.
  • Tints: the bar was falling back to React Navigation's colors.primary (the default blue).
    Now uses the template's own Colors.tabIconSelected / tabIconDefault.
  • Docs: usage-with-expo-router.mdx mirrored the iOS-only pattern, and imported Tabs from
    @/components/bottom-tabs - a path the guide never tells you to create, so the snippet was
    uncopyable. Fixed both.

How to test?

Pack the template from this branch and scaffold from the tarball:

yarn workspace @bottom-tabs/expo-template pack --out /tmp/expo-template.tgz
npx create-expo-app@latest /tmp/tpl --template /tmp/expo-template.tgz
cd /tmp/tpl && npm run android
  • Both tabs show an icon, and the active-indicator pill contains the glyph.
  • adb logcat | grep "SF Symbols" is empty (two lines before this PR).
  • No LogBox toast on launch.
  • Active tab uses #0a7ea4 in light / white in dark; inactive #687076 / #9BA1A6.
  • Toggle the system theme at runtime - the bar re-themes correctly.
  • On iOS, SF Symbols still render.

Screenshots

Theme Android iOS
Light Screenshot 2026-09-08 at 16 45 42 Screenshot 2026-09-08 at 16 56 40
Dark Screenshot 2026-09-08 at 16 54 09 Screenshot 2026-09-08 at 16 57 51

Comment thread docs/docs/docs/guides/usage-with-expo-router.mdx Outdated
Comment thread packages/expo-template/app/(tabs)/_layout.tsx Outdated
@thiagobrez
thiagobrez added this pull request to the merge queue Sep 9, 2026
Merged via the queue into callstack:main with commit 1283040 Sep 9, 2026
5 checks passed
@oleksandrzavarzin-callstack
oleksandrzavarzin-callstack deleted the fix/render-tab-bar-icons-on-android-expo-template branch September 10, 2026 11:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants