Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v4 cssInterop does not work with custom native component #891

Open
ospfranco opened this issue Apr 25, 2024 · 1 comment
Open

v4 cssInterop does not work with custom native component #891

ospfranco opened this issue Apr 25, 2024 · 1 comment

Comments

@ospfranco
Copy link

Describe the bug
I'm trying to apply native wind styles to a native component, the component is very bare-bones:

@objc(BlurViewManager)
class BlurViewManager: RCTViewManager {
  override static func requiresMainQueueSetup() -> Bool {
    return true
  }

  override func view() -> NSView! {
    return BlurView()
  }
}

When I try to import it and apply cssInterop to it:

import {requireNativeComponent, ViewStyle} from 'react-native'

import {cssInterop} from 'nativewind'

export const BlurView = requireNativeComponent<{
  children?: any
  onLayout?: (e: any) => void
  startColor?: string
  endColor?: string
  style?: ViewStyle
  cornerRadius?: number
  disabled?: boolean
  className?: string
}>('BlurView')

// export const BlurView = (...props: any) => <BlurViewNative {...props} />

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

However on runtime I get the following error:

Oscar Franco Screen 001343

@ospfranco
Copy link
Author

I managed to get this working, seems the cssInterop call is passing an array of props and not and object, therefore the destructuring is actually not working:

import {requireNativeComponent, ViewStyle} from 'react-native'

import {cssInterop} from 'nativewind'

export const BlurViewNative = requireNativeComponent<{
  children?: any
  onLayout?: (e: any) => void
  startColor?: string
  endColor?: string
  style?: ViewStyle
  cornerRadius?: number
  disabled?: boolean
  className?: string
}>('BlurView')

export const BlurView = (props: any) => {
  return <BlurViewNative {...props} />
}

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

Is this a bug? I'm not sure, maybe at least it needs to be documented properly

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant