Fill
Usage
React Native does not have SVG components but universal SVG support can be achieved with 3rd party libraries such as react-native-svg. While these docs use react-native-svg, the concept applies to all libraries.
You will need to enableCSSInterop() on these components to properly style them for native.
Example usage
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Circle, Rect from } 'react-native-svg';
import { enableCSSInterop } from 'nativewind'
enableCSSInterop(Svg, {
className: {
target: "style",
nativeStyleToProp: { width: true, height: true }
},
});
enableCSSInterop(Circle, {
className: {
target: "style",
nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
},
});
enableCSSInterop(Rect, {
className: {
target: "style",
nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
},
});
export function SvgExample () {
return (
<View className="inset-0 items-center content-center">
<Svg className="h-1/2 w-1/2" viewBox="0 0 100 100" >
<Circle cx="50" cy="50" r="45" className="stroke-blue-500 stroke-2 fill-green-500" />
<Rect x="15" y="15" className="w-16 h-16 stroke-red-500 stroke-2 fill-yellow-500" />
</Svg>
</View>
);
}
Compatibility
| Class | Support |
|---|---|
| fill-{n} | ✅ Full Support |
| fill-[n] | ✅ Full Support |
| fill-inherit | 🌐 Web only |
| fill-current | 🌐 Web only |