Stroke

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 cssInterop() 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 { cssInterop } from 'nativewind'
 
cssInterop(Svg, {
  className: {
    target: "style",
    nativeStyleToProp: { width: true, height: true }
  },
});
cssInterop(Circle, {
  className: {
    target: "style",
    nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
  },
});
cssInterop(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

ClassSupport
stroke-{n}
โœ… Full Support
stroke-[n]
โœ… Full Support
stroke-inherit
๐ŸŒ Web only
stroke-current
๐ŸŒ Web only
Legend

Class

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon

โœ… Full support

โœ”๏ธ Partial support on native

๐Ÿงช Experimental support on native

๐Ÿ“ฑ Native only

๐ŸŒ Web only

On this page