v4: remapProps documentation, should I use it for className to style mapping?

[johnf]

@marklawlor The current docs for remapProps indicate it should be used for Third party components with multiple style tags.
Should it not also be used for third-party components with a single style tag?

e.g. I'm using react-native-vector-icons which takes a standard style tag.
So rather than using cssInterop should I not use

remapProps(FontAwesome6Pro, { className: 'style' });

Or am I missing something here? It seems to work in my testing.

If this is the case, I would suggest extending the remapProps API so that if you pass it no arguments it just maps className to style.
e.g. instead of the above, I could just fo

remapProps(FontAwesome6Pro);

Let me know if that makes sense, and I can create a PR

[johnf]

Now I'm even more confused. If I don't remap anything

import FontAwesome6Pro from 'react-native-vector-icons/FontAwesome6Pro';
import LinearGradient, { LinearGradientProps } from 'react-native-linear-gradient'; 

// BAD - Style isn't applied 
<FontAwesome6Pro className="text-pink-300" name="smile" />

// GOOD - style is applied
<LinearGradient className="border-[50px]" {...linearGradient} {...props} />;

Is there some dark magic I'm missing somewhere?

[johnf]

Ahh is it a Native component vs javascript component thing?

[marklawlor]

Yep that was the issue. I decided to enable the interop for all native modules, so it should work in 4.0.4. However, react-native-vector-icons sets a default color, so you will need to either:

• Use `remapProps(FontAwesome6Pro, { "className": "style" })
• Or use the important modifier !text-pink-300

Either method will work, as they increase the style specificity