marklawlor / nativewind

React Native utility-first universal design system - powered by Tailwind CSS
https://nativewind.dev
MIT License
4.3k stars 233 forks source link

Issue with expo-linear-gradient #877

Closed benomzn closed 1 month ago

benomzn commented 1 month ago

When I use the "className" prop of Nativewind on "LinearGradient" component, it doesn't work in iOS simulator, only in Android emulator. But If I use "style" prop instead of "className", it works on both simulators

Code:

import { Slot } from "expo-router";
import "../../global.css";
import { View } from "react-native";
import { LinearGradient } from "expo-linear-gradient";

const Root = (): JSX.Element => {
  return (
    <>
      <View className="flex-1">
      <LinearGradient
          start={{ x: 0, y: 1 }}
          end={{ x: 1, y: 0 }}
          colors={["#00d976", "#00a55a"]}
          className="absolute h-full top-0 right-0 left-0 bottom-0"
          // style={{
          //   position: "absolute",
          //   height: "100%",
          //   top: 0,
          //   right: 0,
          //   left: 0
          // }}
        />
        <Slot />
      </View>
    </>
  );
}

export default Root;
image
bailletced commented 1 month ago

Have you tried with cssInterop? https://www.nativewind.dev/v4/api/css-interop

cssInterop(LinearGradient, { className: 'style' })
benomzn commented 1 month ago

Have you tried with cssInterop? https://www.nativewind.dev/v4/api/css-interop

cssInterop(LinearGradient, { className: 'style' })

It works! Thanks, @bailletced