Styling Third Party Components

Components that forward className to a supported React Native component can use Nativewind directly. Components that consume only a style prop or require individual style values as props need an explicit styled wrapper.

Map className to styles

import { styled } from "nativewind";
import { ThirdPartyView } from "third-party-library";
 
const StyledView = styled(ThirdPartyView, { className: "style" });
 
<StyledView className="bg-blue-500 p-4" />;

Render StyledView, the returned component. The original component is unchanged. Define wrappers outside your render function to preserve component identity.

Map styles to component props

The following component reads a color prop rather than forwarding className:

import { View } from "react-native";
import { styled } from "nativewind";
 
function GaugeBase({ color }: { color?: string }) {
  return <View style={{ backgroundColor: color, width: 32, height: 32 }} />;
}
 
const Gauge = styled(GaugeBase, {
  className: {
    target: false,
    nativeStyleMapping: { color: true },
  },
});
 
<Gauge className="text-blue-500" />;

target: false omits a style destination. color: true sends the resolved color to the component's color prop. A string destination can rename it, for example nativeStyleMapping: { color: "labelColor" } for a component that accepts labelColor.

Explicit meaningful props can take precedence over generated props. Check both class derived values and explicit overrides in your application.

Components with multiple style props

Map each class prop to the corresponding supported style prop:

const StyledList = styled(ThirdPartyList, {
  className: "style",
  contentContainerClassName: "contentContainerStyle",
});

For components that forward styles to another styled consumer, the optional third argument { passThrough: true } can defer resolution. Verify the downstream consumer supports it before using it.

TypeScript and migration

Use the typed wrapper returned by styled. Adding a declaration for an unsupported prop does not implement its runtime mapping. In RC0, props such as indicatorClassName and presentationClassName are not built in mappings. Use the underlying native prop or an explicitly supported wrapper.

The v4 cssInterop and remapProps exports are not available from Nativewind RC0. nativeStyleToProp remains a deprecated alias for nativeStyleMapping, but there is no global option. Preserve component identity, verify nested destinations and test native and browser behavior when migrating.