sfSymbol rendered wrong

[philipheinser]

return { sfSymbol: focused ? 'star.fill' : 'star' }; both render a filled star. but should look like this:

[okwasniewski]

Hey,

Thanks for opening the issue.

I've checked it out in native SwiftUI app:

    WindowGroup {
      TabView {
        ContentView()
          .tabItem {
            Label("star", systemImage: "star")
          }
        ContentView()
          .tabItem {
            Label("star.fill", systemImage: "star.fill")
          }
      }
    }

The result is the same:

It looks like a built-in "feature" of TabView, You can still use a custom image (or download SFSymbol) and toggle it on focus if you want.

[shovel-kun]

I found this suggestion, but not sure how to apply it to RN.

Add .environment(.symbolVariants, .none) in a tabbar to get the non-filled symbol, otherwise SwiftUI automatically chooses the filled symbol in a TabView 0

https://forums.developer.apple.com/forums/thread/713449

[okwasniewski]

@shovel-kun Interesting.. thanks for posting this!

In theory, this could be applied to the SwiftUI view in the library:

https://github.com/okwasniewski/react-native-bottom-tabs/blob/main/ios/TabViewImpl.swift

Im not sure if this should be hidden behind some kind of prop or be a default tho