Android SVG icons low resolution

[zamplyy]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

When i use SVG:s as tabBarIcon for android i get blurry icons.
It works fine on iOS

Library version

1.0.2

Environment info

info Fetching system and libraries information...
System:
  OS: macOS 26.1
  CPU: (12) arm64 Apple M3 Pro
  Memory: 2.62 GB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.19.0
    path: /Users/joar.karlsson/.nvm/versions/node/v22.19.0/bin/node
  Yarn:
    version: 1.22.22
    path: /Users/joar.karlsson/.nvm/versions/node/v22.19.0/bin/yarn
  npm:
    version: 10.9.3
    path: /Users/joar.karlsson/.nvm/versions/node/v22.19.0/bin/npm
  Watchman:
    version: 2025.09.01.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/joar.karlsson/.gem/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.1
      - iOS 26.1
      - macOS 26.1
      - tvOS 26.1
      - visionOS 26.1
      - watchOS 26.1
  Android SDK:
    API Levels:
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 34.0.0
      - 35.0.0
      - 35.0.1
      - 36.0.0
      - 36.1.0
    System Images:
      - android-35 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.2 AI-252.25557.131.2521.14432022
  Xcode:
    version: 26.1.1/17B100
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.16
    path: /usr/bin/javac
  Ruby:
    version: 3.4.7
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.2
    wanted: ^20.0.0
  react:
    installed: 19.1.1
    wanted: 19.1.1
  react-native:
    installed: 0.82.1
    wanted: ^0.82.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

1. Create a Tab
2. Use an SVG as an tabBarIcon

Reproducible sample code

<Tab.Screen
	name="Stack"
	component={View}
	options={{
		tabBarIcon: () => require('../icons/svg/navigation/icon.svgx'),
		title: "Test"
	}}
/>

[zamplyy]

This diff fixes my problem.

diff --git a/android/src/main/java/com/rcttabview/RCTTabView.kt b/android/src/main/java/com/rcttabview/RCTTabView.kt
index 0cf9cef2e666733e53d1885ed974cf1f989787a0..c895fe1af2776327e0abf2278780df715fc4404d 100644
--- a/android/src/main/java/com/rcttabview/RCTTabView.kt
+++ b/android/src/main/java/com/rcttabview/RCTTabView.kt
@@ -24,6 +24,9 @@ import coil3.ImageLoader
 import coil3.asDrawable
 import coil3.request.ImageRequest
 import coil3.svg.SvgDecoder
+import coil3.size.Precision
+import coil3.size.Size as CoilSize
+import coil3.size.Scale
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.common.assets.ReactFontManager
 import com.facebook.react.modules.core.ReactChoreographer
@@ -336,8 +339,12 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
       onDrawableReady(it)
       return
     }
+    val iconSizePx = bottomNavigation.itemIconSize
     val request = ImageRequest.Builder(context)
       .data(imageSource.getUri(context))
+      .size(CoilSize(iconSizePx, iconSizePx))
+      .scale(Scale.FILL)
+      .precision(Precision.EXACT)
       .target { drawable ->
         post {
           val stateDrawable = drawable.asDrawable(context.resources)

[prateekchachra-aily]

For me what worked was increasing the resolution of the SVG and the path scale.

[mykelcodes]

Thanks @zamplyy the diff worked for me as I was facing the same issue.

[okwasniewski]

Hey @zamplyy Would be open to create a PR with this fix?

[zamplyy]

Yeah! I'll create one!

[zamplyy]

It's added #474