cssInterop

Last updated on May 30th, 2025

This function "tags" components so that when its rendered, the runtime will know to resolve the className strings into styles. You should only use this when:

You have a custom native component
You are using a third party component that needs the style prop to be resolved
You are using a third party component that does not pass all its props to its children

Usage

import { cssInterop } from 'nativewind';
 
// Create a new prop and map it to an existing prop
cssInterop(component, { "new-prop": "existing-prop" });
 
// Override an existing prop.
cssInterop(component, { "new-prop": true });
 
// Override an existing prop.
cssInterop(component, {
  "new-prop": {
    target: "existing-prop", // string or boolean
    nativeStyleToProp: {
      "style-attribute": "existing-prop",
    }
    }
  }
});

Examples

Here is the mapping using the core component, <TextInput />

cssInterop(TextInput, {
  className: {
    target: "style", // map className->style
    nativeStyleToProp: {
      textAlign: true, // extract `textAlign` styles and pass them to the `textAlign` prop
    },
  },
  placeholderClassName: {
    target: false, // Don't pass this as a prop
    nativeStyleToProp: {
      color: "placeholderTextColor", // extract `color` and pass it to the `placeholderTextColor`prop
    },
  },
  selectionClassName: {
    target: false, // Don't pass this as a prop
    nativeStyleToProp: {
      color: "selectionColor", // extract `color` and pass it to the `selectionColor`prop
    },
  },
});

cssInterop

Usage

Examples

On this page