v4: Cannot style the SVG fill property

[robcaldecott]

nativewind@4.0.9
expo@49.0.13
react-native-svg@13.9.0
react-native-svg-transformer@1.1.0

I am trying to style an SVG file imported directly into my app via the magic of react-native-svg and react-native-svg-transformer but I am unable to style the fill property using the latest Nativewind. I'm trying to use cssInterop to add support for height, width and fill but the latter does not work.

Here is a sample repo: https://github.com/robcaldecott/nativewind-4-issues

Here is the code:

import * as React from "react";
import { Text, View } from "react-native";
import ErrorIcon from "./assets/error.svg";
import { cssInterop } from "nativewind";
import "./globals.css";

cssInterop(ErrorIcon, {
  className: {
    target: "style",
    nativeStyleToProp: { width: true, height: true, fill: true },
  },
});

function Foo(props: { icon: React.ElementType }) {
  const Icon = props.icon;

  return (
    <View className="gap-2 flex-row items-center">
      <Icon className="h-16 w-16 fill-red-500" />
      <Text>Label</Text>
    </View>
  );
}

export default function App() {
  return (
    <View className="flex-1 bg-white items-center justify-center gap-8">
      {/* Works */}
      <ErrorIcon style={{ height: 64, width: 64, fill: "red" }} />

      {/* Works */}
      <ErrorIcon height={64} width={64} fill="red" />

      {/* Fill does not work */}
      <ErrorIcon className="h-16 w-16 fill-red-500" />

      {/* Fill does not work with icon as an element prop */}
      <Foo icon={ErrorIcon} />
    </View>
  );
}

When the app runs I see the following console error:

LOG: [{"property": "fill", "type": "IncompatibleNativeProperty"}]

This would work in v2 using styled like this:

const StyledErrorIcon = styled(ErrorIcon, "h-16 w-16 fill-red-500");

I am getting a TS issue with that fill property of nativeStyleToProp so cannot rule out I'm misunderstanding how this should work but our app makes extensive use of SVGs and I'm sure this must be possible?

We also pass elements as props in some of our components so would love this to work as well (as the Foo example in the code.)

[marklawlor]

4.0.10 has improvements to how we parse styles like fill- & stroke-

Firstly, you can now remove cssInterop() wrapper

You can then write your styles as prop:h-16 prop:w-15 fill-red-500.

On native, prop: moves those styles to a prop (they stay as styles as web). fill- is always moved to a prop.

[robcaldecott]

@marklawlor thank you, this prop: idea is awesome. Sadly it isn't working my test app and weirdly the native style prop isn't working for the icon height and width now. I'm on 4.0.11.

export default function App() {
  return (
    <View className="flex-1 bg-white items-center justify-center gap-8 p-6">
      {/* Height and width do not work */}
      <ErrorIcon style={{ height: 64, width: 64, fill: "red" }} />

      {/* Works */}
      <ErrorIcon height={64} width={64} fill="red" />

      {/* Does not work */}
      <ErrorIcon className="prop:h-16 prop:w-16 fill-red-500" />

      {/* Does not work with icon as an element prop */}
      <Foo icon={ErrorIcon} />
    </View>
  );
}

Am I missing something in my config? Apologies if so.

https://github.com/robcaldecott/nativewind-4-issues

[marklawlor]

Can you try 4.0.13, that should fix it.

[robcaldecott]

Can you try 4.0.13, that should fix it.

Yes! Thank you so much @marklawlor

[robcaldecott]

Ah, native style does not work @marklawlor

<ErrorIcon style={{ height: 64, width: 64, fill: "red" }} />

Which is weird right?

[marklawlor]

No, that is to be expected. NativeWind only works with className and shouldn't change how native styling works.

Wrapping in cssInterop is kinda like an override that changes the default behaviour. I think this is be confusing for a lot of people, hence I'm going to recommend people use prop- instead.

If you want that behaviour you can restore the cssInterop code, but I don't think it should be the default.

[psyrenpark]

It works after I modified it like below.

// before
// import { cssInterop } from 'nativewind';
// after
import {cssInterop} from 'react-native-css-interop';