React Native SVG Not Rendering or Showing Black Box on Android

An SVG that renders correctly on iOS but shows as a solid black box (or nothing at all) specifically on Android almost always comes down to either the native SVG library not being correctly linked for Android, or a specific SVG attribute that behaves differently between the two platforms' underlying rendering implementations.

The Problem

Using react-native-svg to display an SVG works correctly on iOS, but on Android, the same component shows as a solid black rectangle, or fails to render anything visible at all.

Why It Happens

Common causes specific to the Android rendering path for SVGs:

• The native Android portion of react-native-svg isn't correctly linked or built into the app — particularly relevant if the package was installed but the app wasn't properly rebuilt afterward, since JavaScript-only changes (like a Metro reload) don't pick up new native module linking
• An SVG using currentColor or relying on CSS-style inherited fill/stroke values that Android's SVG rendering implementation handles differently or doesn't support the same way as the web-based or iOS rendering path might
• Missing explicit width/height on the SVG component itself, which some Android rendering paths handle less gracefully as a fallback than iOS does, resulting in a black or improperly sized render rather than gracefully defaulting to the SVG's own intrinsic dimensions
• A specific SVG feature or attribute (certain gradient definitions, clip paths, or filter effects) not being fully supported by the underlying Android SVG rendering library that react-native-svg uses internally, even though the same SVG renders correctly through iOS's different underlying rendering engine

The Fix

First, confirm the native module is actually properly linked and built for Android by doing a full clean rebuild, rather than just reloading the JavaScript bundle:

cd android
./gradlew clean
cd ..
npx react-native run-android

If you recently installed or updated react-native-svg, this full native rebuild step is required for Android to pick up the change — a simple Metro/JS reload alone is not sufficient for native module changes to take effect.

Always specify explicit width and height on the SVG component directly, rather than relying on the SVG's own internal viewBox dimensions to be correctly inferred automatically:

import Svg, { Path } from 'react-native-svg';

<Svg width="24" height="24" viewBox="0 0 24 24">
  <Path d="..." fill="#2DD4BF" />
</Svg>

If the SVG source uses currentColor for fill or stroke (a common pattern for icons meant to inherit color from surrounding CSS context on the web), replace it with an explicit, literal color value, since this CSS-specific behavior doesn't translate reliably across react-native-svg's cross-platform rendering:

<!-- Problematic on Android: relies on CSS-style color inheritance -->
<path fill="currentColor" d="..." />

<!-- Reliable cross-platform: explicit color -->
<path fill="#2DD4BF" d="..." />

If you need dynamic, prop-driven coloring (similar in spirit to what currentColor would provide on the web), pass the color explicitly as a prop to your SVG component and apply it directly to the relevant fill/stroke attributes in your React Native code, rather than relying on any CSS-style inheritance mechanism:

function Icon({ color = '#2DD4BF' }) {
  return (
    <Svg width="24" height="24" viewBox="0 0 24 24">
      <Path d="..." fill={color} />
    </Svg>
  );
}

If a specific complex SVG feature (an intricate gradient, a filter effect, certain clip path configurations) is the culprit, simplify the SVG to confirm this is genuinely the cause — temporarily strip the SVG down to its most basic path elements with plain solid fills, confirm that renders correctly on Android, then reintroduce more complex features one at a time to identify exactly which specific feature isn't rendering correctly. For features confirmed unsupported or buggy in the Android rendering path, either find a simpler equivalent representation, or pre-render that specific complex element as a raster image (PNG) instead of relying on SVG rendering for that particular asset.

Still Not Working?

If a clean rebuild and explicit color/dimension fixes don't resolve a persistent black box specifically, check your react-native-svg version against known Android-specific issues for your exact React Native version combination, since SVG rendering compatibility between the library and different React Native/Android versions has had version-specific bugs over time that get fixed in subsequent releases — checking the library's GitHub issues for your specific version pairing, or simply upgrading to the latest stable version of both React Native and react-native-svg together, resolves many of these version-specific Android rendering quirks that aren't necessarily related to anything in your own SVG markup or usage code at all.