Skip to main content
Version: v4

remapProps

NativeWind provides the remapProps utility to simplify working with third-party components with multiple "style" props.

import { remapProps } from "nativewind";

/**
ThirdPartyButton is a component with two "style" props, buttonStyle & labelStyle.
We can use remapProps to create new props that accept Tailwind CSS's classNames.
*/
const CustomizedButton = remapProps(ThirdPartyButton, {
buttonClass: "buttonStyle",
labelClass: "labelStyle",
});

<CustomizedButton buttonClass="bg-blue-500" labelClass="text-white" />;

remapProps can be used with the following options

// Create a new prop and map it to an existing prop
remapProps(component, { "new-prop": "existing-prop" });

// Override an existing prop.
remapProps(component, { prop: true });