Unable to pass NativeWind variables to LinearGradient color prop

[doranakan]

Description

The LinearGradient component does not support nativewind color variables

CodeSandbox/Snack link

_

Steps to reproduce

  <LinearGradient
    className='bg-gradient-to-br from-primary-700 to-primary-900'
    colors={['from-primary-700', 'to-primary-900']}
  >
    {children}
  </LinearGradient>

gluestack-ui Version

2

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

• "@gluestack-ui/nativewind-utils": "^1.0.24" • "nativewind": "4.0.36" • "expo-linear-gradient": "~13.0.2" • "react-native": "0.74.5" • "expo": "~51.0.31"

I don't know if there's a way to access the variables defined in the gluestack-ui-provider config.ts file so that I can pass theme inside the color prop field

[rajat693]

you can directly use token values.

Changing your LinearGradient to this will work on native device.

'use client';
import React from 'react';
import { tva } from '@gluestack-ui/nativewind-utils/tva';
import { LinearGradient as ExpoLinearGradient } from 'expo-linear-gradient';
import { cssInterop } from 'nativewind';

cssInterop(ExpoLinearGradient, {
  className: 'style',
});

const linearGradientStyle = tva({
  base: '',
});

export const LinearGradient = React.forwardRef(
  ({ className, from, to, ...props }: any, ref?: any) => {

    return (
      <ExpoLinearGradient
        {...props}
        colors={[from, to]}
        ref={ref}
      />
    );
  }
);

cssInterop(LinearGradient, {
  from:{
    target:"from",
    nativeStyleToProp:{
      color:true,
    }
  },
  to:{
    target:"to",
    nativeStyleToProp:{
      color:true,
    }
  }
});

<LinearGradient
     className="w-full rounded-full items-center py-2"
     from="color-success-500"
     to="color-primary-600"
     start={[0, 1]}
     end={[1, 0]}
   />

for web you can have custom implementation with index.web.tsx with <div />

For more info on cssInterop you can have look at https://www.nativewind.dev/v4/api/css-interop