How to write custom components
This guide is about writing your own components. If you are looking for a guide on how to use Nativewind with third-party components, see the third-party components guide.
Unless you are styling a custom native component, you should never have to use cssInterop
or remapProps
when writing your own components. These are only used when working with third-party components.
Your first component
Nativewind works by passing class names to components. This is the same pattern as Tailwind CSS, which uses utility classes to style elements.
To create a component with default styles, simply merge the className string.
You can expand this pattern to create more complex components. For example, you can create a Button
component with different variants.
Creating your own variants can quickly become complex. We recommend using a class name management library to simplify the process.
Merging with inline styles
Nativewind will automatically merge with inline-styles. Read more about style specificity documentation.
Handling components with multiple style props
Custom components can have multiple style props. For example, a Button
component may have an outerClassName
and an innerClassName
.