React native support?

[iRoachie]

Does this plugin support react native?

export const Shadow = styled.View`
  shadowColor: #000;
  shadowOpacity: .2;
  shadowOffset: 0px -1px;
  shadowRadius: 1;
  marginBottom: -1px;
`

All show as errors currently

[daedlock]

Can't reproduce.

[daedlock]

@iRoachie please include your plugin/IDE versions

[undeadcat]

@iRoachie, Hi!
Could you clarify what you're seeing?
I'm guessing that ios-specific properties are highlighted as unknown.

But could you confirm?

There is nothing in this plugin currently that is aware of react-native props, it just assumes it is plain CSS. As a workaround, you can mark them as custom properties (Alt+Enter, 'Add to custom properties')

[undeadcat]

If someone wants to contribute proper support for react-native style properties, seems like the way to go would be to implement com.intellij.psi.css.CssElementDescriptorProvider (some samples here and here) and override getAllPropertyDescriptors and findPropertyDescriptors to provide React Native-specific properties.

It could be used to:

1. Add React-only props like shadowOffset
2. Transform existing css props to their React Native counterparts (e.g. margin-left -> marginLeft). One would need to take care of the fact that many props, e.g top allow different values than their CSS counterparts. ("Ems and other units are not supported").
   com.intellij.psi.css.descriptor.value.CssValueDescriptor are used to configure what strings should be accepted as values (highlighted/available in completion).
3. Filter out any CSS properties that are not accepted by css-to-react-native.

Seems like the main issue would be to figure out what properties and values should be accepted and where to get that information without hardcoding a list (.d.ts files?).

If anyone wants to try this — I'll be happy to answer questions re: Intellij IDEA APIs.

[iRoachie]

@daedlock The snippet you posted isn't actually valid react native code. background isn't a style property on the View model like you'd expect on the web.

Thanks @undeadcat, I don't have any experience with Java or Kotlin but I guess I could answer any questions you have with react native, that would help.

A roadmap for this so far would look like:

• React native property styles e.g (flexWrap instead of flex-wrap)
  • Error is Unknown css property
• Support non-unit values e.g (height: 120)
  • Error is Mismatched property value
• Don't enforce semi-colons

const Content = styled.View`
  flexDirection: row
  marginRight: 24 
`
"; expected"

[daedlock]

@iRoachie I blindly forgot about that as I thought the issue was with the styled.View and not the styling properties itself. 👍

[yordis]

I am getting some complains about margin: -5 because it doesn't have the unit ...

[nenti]

@yordis just add px and you are fine. I migrated successfully all my styled to meet requirements. Only one that I can't get around with this plugin is:

const Container = styled.View`
    elevation: 10;
`

Error:(95, 14) Mismatched property value (<angle> | below | level | above | higher | lower | [initial | inherit | unset | revert])

[hamidfzm]

It's sad this issue is open from 2017. Hope maintainers pay more attention to styled-components React Native development

[baba43]

Would be awesome to see this fixed.