Skip to content

Conversation

@okwasniewski
Copy link
Member

@okwasniewski okwasniewski commented Jul 6, 2025

PR Description

This PR adjusts the behavior of empty string in the badge prop. It provides a consistent experience across platforms, now to get a "dot" badge you need to pass an empty space " ", this is a limitation of iOS prop parsing where std::string is always initialized as an empty string.

Here is a comparison of Android/iOS 18/iOS 26

CleanShot 2025-07-06 at 17 21 34@2x

@changeset-bot
Copy link

changeset-bot bot commented Jul 6, 2025

🦋 Changeset detected

Latest commit: e51f2e8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
react-native-bottom-tabs Minor
@bottom-tabs/expo-template Patch
@bottom-tabs/react-navigation Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR standardizes how an empty badge string is handled across Android and iOS by making the badge prop optional and requiring a space (" ") to display a dot badge.

  • Default getBadge fallback updated to use route.badge directly.
  • Native code on both platforms changed to treat badges as optional and removed the empty-string check on iOS.
  • Documentation and example updated to instruct users to pass a space for a “dot” badge.

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.

Show a summary per file
File Description
packages/react-native-bottom-tabs/src/TabView.tsx Added default getBadge fallback to route.badge
packages/react-native-bottom-tabs/ios/TabViewProvider.swift Made badge property optional and updated initializer parsing
packages/react-native-bottom-tabs/ios/TabViewImpl.swift Removed !data.isEmpty check so any non-nil badge shows a dot
packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewImpl.kt Made badge nullable and updated JSON parsing
packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt Changed badge visibility check to item.badge?.isNotEmpty() == true
docs/docs/docs/guides/usage-with-react-navigation.mdx Added warning about passing a space (" ") to show a dot badge
docs/docs/docs/guides/standalone-usage.md Updated example formatting; missing badge warning should be added
apps/example/src/Examples/FourTabs.tsx Added badge: ' ' example for dot badge
.changeset/khaki-maps-lay.md Recorded change in behavior of empty badge prop
Comments suppressed due to low confidence (3)

docs/docs/docs/guides/standalone-usage.md:29

  • Add a warning here similar to the other guide, indicating that to display a dot badge you need to pass a space character (" ").
export default function TabViewExample() {

packages/react-native-bottom-tabs/ios/TabViewImpl.swift:275

  • Introduce unit or snapshot tests verifying that passing an empty string vs. a space string yields the correct badge behavior on iOS.
      if let data {

packages/react-native-bottom-tabs/src/TabView.tsx:181

  • [nitpick] Update the TypeScript definitions (e.g., BaseRoute or TabViewProps) so that badge is explicitly string | undefined, ensuring consumers get correct type hints.
  getBadge = ({ route }: { route: Route }) => route.badge,

@okwasniewski okwasniewski merged commit e9b06e7 into main Jul 6, 2025
8 checks passed
@okwasniewski okwasniewski deleted the fix/badge-behavior branch July 6, 2025 17:58
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