NativeWind

https://www.nativewind.dev/docs
Admin
NativeWind allows you to use Tailwind CSS to style your React Native components, providing a...
Tokens:31,094
Snippets:355
Trust Score:8.5
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install W&B and Login

Source: https://www.nativewind.dev/docs/tailwind/typography/hyphens

Install the wandb package via pip, then login to create an API key. Alternatively, set the WANDB_API_KEY environment variable programmatically.

```bash
# Install W&B
pip install wandb

# Login (creates API key)
wandb login

# Or set API key programmatically
export WANDB_API_KEY=your_api_key_here
```

--------------------------------

### Install expo-font with bun

Source: https://www.nativewind.dev/docs/guides/custom-fonts

Install the expo-font package using the bun package manager.

```bash
bun add expo-font
```

--------------------------------

### Box Shadow Example

Source: https://www.nativewind.dev/docs/tailwind/effects/box-shadow

Example showing how to apply the shadow utility to styled components in NativeWind. Note that on native, shadows may not appear if a background color is not set.

```jsx
import { Text, View } from 'react-native';
import { styled } from 'nativewind';
 
const StyledView = styled(View)
const StyledText = styled(Text)
 
const App = () => {
  return (
    <StyledView className="flex-1 items-center justify-center">
      <StyledView className="h-[50vh] items-center justify-center shadow">
        <StyledText className="text-slate-800 shadow">Try editing me! 🎉</StyledText>
      </StyledView>
    </StyledView>
  );
}
```

--------------------------------

### Run pod-install for react-native-reanimated

Source: https://www.nativewind.dev/docs/getting-started/installation/frameworkless

Run pod-install to finish installation of react-native-reanimated.

```bash
npx pod-install
```

--------------------------------

### items-start

Source: https://www.nativewind.dev/docs/tailwind/flexbox/align-items

Supported class for aligning items to the start.

```css
items-start
```

--------------------------------

### cssInterop setup and SVG example

Source: https://www.nativewind.dev/docs/tailwind/svg/stroke

Setup for react-native-svg components with NativeWind's cssInterop to enable className styling. Use this in your native app to style SVG elements with utility classes like stroke-blue-500.

```jsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Circle, Rect } from 'react-native-svg';
import { cssInterop } from 'nativewind'
 
cssInterop(Svg, {
  className: {
    target: "style",
    nativeStyleToProp: { width: true, height: true }
  },
});
cssInterop(Circle, {
  className: {
    target: "style",
    nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
  },
});
cssInterop(Rect, {
  className: {
    target: "style",
    nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
  },
});
 
export function SvgExample () {
  return (
    <View className="inset-0 items-center content-center">
      <Svg className="h-1/2 w-1/2" viewBox="0 0 100 100" >
        <Circle cx="50" cy="50" r="45" className="stroke-blue-500 stroke-2 fill-green-500" />
        <Rect x="15" y="15" className="w-16 h-16 stroke-red-500 stroke-2 fill-yellow-500" />
      </Svg>
    </View>
  );
}

```

--------------------------------

### Install Nativewind and peer dependencies

Source: https://www.nativewind.dev/docs/getting-started/installation/frameworkless

Install nativewind@4.2.7, react-native-reanimated, react-native-safe-area-context, and dev dependencies tailwindcss@^3.4.17 and prettier-plugin-tailwindcss@^0.5.11. Nativewind v4.2.7 supports Reanimated 3 and 4; choose a compatible version and do not add Worklets to a Reanimated 3 setup.

```bash
npm install nativewind@4.2.7 react-native-reanimated react-native-safe-area-context
npm install --save-dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11
```

--------------------------------

### Verify Nativewind installation

Source: https://www.nativewind.dev/docs/getting-started/troubleshooting

Imports and calls verifyInstallation() inside a React component to confirm Nativewind is correctly installed. Do not invoke it on the global scope.

```javascript
import React from 'react';
import { verifyInstallation } from 'nativewind';
 
function App() {
    // Ensure to call inside a component, not globally
    verifyInstallation();
 
    return (
      // Your component JSX here...
    );
}
 
export default App;
```

--------------------------------

### TypeScript setup with nativewind-env.d.ts

Source: https://www.nativewind.dev/docs/getting-started/installation/frameworkless

Create a nativewind-env.d.ts file with a triple-slash directive referencing nativewind/types. Do not name the file nativewind.d.ts, the same as a file/folder in the same directory, or the same as a folder in node_modules.

```typescript
/// <reference types="nativewind/types" />
```

--------------------------------

### Import global.css in App.js

Source: https://www.nativewind.dev/docs/getting-started/installation/frameworkless

Import the global.css file in your App.js. The example shows a placeholder App component.

```javascript
import "./global.css"
 
export default App() {
  /* Your App */
}
```

--------------------------------

### Reset React Native cache

Source: https://www.nativewind.dev/docs/getting-started/troubleshooting

Starts a framework-less React Native development server with the cache reset, recommended before troubleshooting.

```bash
npx react-native start --reset-cache
```

--------------------------------

### Initialize a new Expo project with NativeWind

Source: https://www.nativewind.dev/docs/getting-started/installation

Use this command to create a new Expo project pre-configured with NativeWind and Tailwind CSS, skipping manual setup. Run it with your preferred package manager (npm, yarn, pnpm, or bun).

```bash
npx rn-new --nativewind
```

--------------------------------

### setUserComment Promise example

Source: https://www.nativewind.dev/docs/tailwind/typography/text-align

Example of using setUserComment with Promise to modify a photo's user comment. Requires phAccessHelper creation as per the referenced example. The code fetches the first asset and sets the comment, logging success or failure.

```TypeScript
import { dataSharePredicates } from '@kit.ArkData';

async function example(phAccessHelper: photoAccessHelper.PhotoAccessHelper) {
  try {
    console.info('setUserCommentDemo')
    let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();
    let fetchOptions: photoAccessHelper.FetchOptions = {
      fetchColumns: [],
      predicates: predicates
    };
    let fetchResult: photoAccessHelper.FetchResult<photoAccessHelper.PhotoAsset> = await phAccessHelper.getAssets(fetchOptions);
    let photoAsset: photoAccessHelper.PhotoAsset = await fetchResult.getFirstObject();
    let userComment = 'test_set_user_comment';
    photoAsset.setUserComment(userComment, (err) => {
      if (err === undefined) {
        console.info('setUserComment successfully');
      } else {
        console.error(`setUserComment failed with error: ${err.code}, ${err.message}`);
      }
    });
  } catch (err) {
    console.error(`setUserCommentDemoCallback failed with error: ${err.code}, ${err.message}`);
  }
}
```

--------------------------------

### snap-start class

Source: https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-align

The snap-start class is used to align the snap position to the start of the scroll container. It is marked as Web only in the compatibility table.

```css
snap-start
```

--------------------------------

### Test Nativewind setup with App.tsx

Source: https://www.nativewind.dev/docs/getting-started/installation/frameworkless

Create a simple component to test the setup. Uses className prop with Tailwind utility classes. If you see styled text centered on a white background, Nativewind is working correctly.

```tsx
import "./global.css"
import { Text, View } from "react-native";
 
export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-xl font-bold text-blue-500">
        Welcome to Nativewind!
      </Text>
    </View>
  );
}
```

--------------------------------

### Enable debug mode (Mac/Linux)

Source: https://www.nativewind.dev/docs/getting-started/troubleshooting

Sets the DEBUG environment variable to 'nativewind' before the start command to output debug information while the server runs. Run in the project root where package.json is located.

```bash
DEBUG=nativewind <start-command>
```

--------------------------------

### Grid Row Start / End Compatibility Table

Source: https://www.nativewind.dev/docs/tailwind/flexbox/grid-row

Lists all grid row start and end utility classes with their web-only support status. Each class is shown in a code block within the compatibility table.

```plaintext
row-auto
```

```plaintext
row-span-1
```

```plaintext
row-span-2
```

```plaintext
row-span-3
```

```plaintext
row-span-4
```

```plaintext
row-span-5
```

```plaintext
row-span-6
```

```plaintext
row-span-7
```

```plaintext
row-span-8
```

```plaintext
row-span-9
```

```plaintext
row-span-10
```

```plaintext
row-span-11
```

```plaintext
row-span-12
```

```plaintext
row-span-full
```

```plaintext
row-start-1
```

```plaintext
row-start-2
```

```plaintext
row-start-3
```

```plaintext
row-start-4
```

```plaintext
row-start-5
```

```plaintext
row-start-6
```

```plaintext
row-start-7
```

```plaintext
row-start-8
```

```plaintext
row-start-9
```

```plaintext
row-start-10
```

```plaintext
row-start-11
```

```plaintext
row-start-12
```

```plaintext
row-start-13
```

```plaintext
row-start-auto
```

```plaintext
row-end-1
```

```plaintext
row-end-2
```

```plaintext
row-end-3
```

```plaintext
row-end-4
```

```plaintext
row-end-5
```

```plaintext
row-end-6
```

```plaintext
row-end-7
```

```plaintext
row-end-8
```

```plaintext
row-end-9
```

```plaintext
row-end-10
```

```plaintext
row-end-11
```

```plaintext
row-end-12
```

```plaintext
row-end-13
```

```plaintext
row-end-auto
```

--------------------------------

### calc() usage examples

Source: https://www.nativewind.dev/docs/core-concepts/functions-and-directives

Demonstrates various calc() expressions supported by NativeWind, including numerical, rem, CSS variables, and inside color functions.

```css
// Numerical calc
.element {
  width: calc(10px + 100px);
}
 
// With rem units
.element {
  width: calc(2rem * 5);
}
 
// With CSS variables
.element {
  width: calc(var(--my-variable) + 20px);
}
 
// Inside color functions
.element {
  background-color: hsl(
    calc(var(--H) + 20),
    calc(var(--S) - 10%),
    calc(var(--L) + 30%)
  )
}
```

--------------------------------

### calc() with custom properties - incorrect and correct

Source: https://www.nativewind.dev/docs/core-concepts/functions-and-directives

Demonstrates that operations are not supported in custom properties. The first example is incorrect, while the second shows the correct approach by placing the operator inside the calc() expression.

```css
.element {
  // ❌ Operators cannot be in a custom property
  --width: 100% - 20%;
  width: calc(var(--width));
}
 
.element {
  // ✅  Operator is part of the calc() expression
  --width: 100%;
  width: calc(var(--width) - 20%);
}
```

--------------------------------

### Reset Expo cache

Source: https://www.nativewind.dev/docs/getting-started/troubleshooting

Starts an Expo development server with the cache cleared, which is recommended before troubleshooting any issue.

```bash
npx expo start --clear
```

--------------------------------

### Record debug output to file (Mac/Linux)

Source: https://www.nativewind.dev/docs/getting-started/troubleshooting

Redirects the debug output to a log file while running the start command with DEBUG=nativewind. Useful for reporting issues on GitHub.

```bash
DEBUG=nativewind script output.log <start-command>
```

--------------------------------

### Example usage of stroke width with react-native-svg and cssInterop

Source: https://www.nativewind.dev/docs/tailwind/svg/stroke-width

Shows how to set up `cssInterop()` for `Svg`, `Circle`, and `Rect` components to enable className styling, including stroke width. The example renders a circle and rectangle with stroke width classes like `stroke-2`.

```jsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Circle, Rect } from 'react-native-svg';
import { cssInterop } from 'nativewind'
 
cssInterop(Svg, {
  className: {
    target: "style",
    nativeStyleToProp: { width: true, height: true }
  },
});
cssInterop(Circle, {
  className: {
    target: "style",
    nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
  },
});
cssInterop(Rect, {
  className: {
    target: "style",
    nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
  },
});
 
export function SvgExample () {
  return (
    <View className="inset-0 items-center content-center">
      <Svg className="h-1/2 w-1/2" viewBox="0 0 100 100" >
        <Circle cx="50" cy="50" r="45" className="stroke-blue-500 stroke-2 fill-green-500" />
        <Rect x="15" y="15" className="w-16 h-16 stroke-red-500 stroke-2 fill-yellow-500" />
      </Svg>
    </View>
  );
}
```

--------------------------------

### Using cssInterop for components with style attribute props

Source: https://www.nativewind.dev/docs/guides/third-party-components

Shows a component that accesses style attributes directly and will not work with Nativewind without `cssInterop`. The example demonstrates a component that uses `borderColor` and `backgroundColor` based on the `style` prop. Note that enabling `cssInterop` has a performance cost.

```javascript
/*
 * This component will not work as expected with Nativewind
 *   - borderColor will not work as it is a prop
 *   - backgroundColor will not work as it is based on the style.color value
 */
function ThirdPartyComponent({ borderColor, style, ...props }) {
  // The background color is based on the style prop
  const backgroundColor = style.color === "white" ? "black" : "white";
  return (
    <View
      style={{
        ...style,
        borderColor,
        backgroundColor,
      }}
    />
  );
}
```

--------------------------------

### calc() mixing unit types - incorrect and correct

Source: https://www.nativewind.dev/docs/core-concepts/functions-and-directives

Shows the limitation of mixing numerical and percentage units in calc(). The first example is incorrect, while the second and third show correct usage with consistent unit types.

```css
.element {
  // ❌ This mixes numerical and percentage units
  width: calc(100% - 20px);
}
 
.element {
  // ✅  This only uses numerical units
  --width: 100rem;
  width: calc(var(--width) - 20px);
}
 
.element {
  // ✅  This only uses percentage units
  --width: 100%;
  width: calc(var(--width) - 20%);
}
```

--------------------------------

### Using var() with className and vars()

Source: https://www.nativewind.dev/docs/core-concepts/functions-and-directives

Shows how to use var() with the text-custom class and the vars() helper to set custom properties. The first example sets the custom property inline, while the second uses the vars() function.

```jsx
// style: { color: "red" }
<Text className="text-custom [--my-custom-color:red]">
 
// style: { color: "green" }
<View style={vars({ "--my-custom-color": "green" })}>
  <Text className="text-custom">
</View>
```

--------------------------------

### Web: CSS env() and Chrome -webkit-fill-available workaround

Source: https://www.nativewind.dev/docs/tailwind/new-concepts/safe-area-insets

On web, safe area insets use CSS env() and need no extra setup. However, the h-screen-safe and min-h-screen-safe utilities may not work as expected in Google Chrome; add height: -webkit-fill-available on parent nodes as shown.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  html {
    height: -webkit-fill-available;
  }
 
  body {
    height: -webkit-fill-available;
  }
 
  #root {
    height: -webkit-fill-available;
  }
}
```

--------------------------------

### Using remapProps to map className to multiple style props

Source: https://www.nativewind.dev/docs/guides/third-party-components

Shows how to use `remapProps` to create new `className` props for a component with multiple style props, such as React Native's `FlatList` which has `style` and `contentContainerStyle`. The example includes a component definition, the `remapProps` call, and usage with Nativewind classes.

```javascript
// This component has two 'style' props
function ThirdPartyComponent({ style, contentContainerStyle, ...props }) {
  return (
    <FlatList
      style={style}
      contentContainerStyle={contentContainerStyle}
      {...props}
    />
  );
}
 
// Call this once at the entry point of your app
remapProps(ThirdPartyComponent, {
  className: "style",
  contentContainerClassName: "contentContainerStyle",
});
 
// Now you can use the component with Nativewind
<ThirdPartyComponent className="p-5" contentContainerClassName="p-2" />;
```

--------------------------------

### Dynamic mapping modifier with dot notation

Source: https://www.nativewind.dev/docs/guides/third-party-components

Demonstrates using dot notation in the dynamic mapping modifier to access nested properties. The example shows how `{}-[screenOptions.tabBarTintColor]/color:color-red-500` outputs an object with nested `screenOptions` and `tabBarTintColor` properties.

```jsx
//This class
{}-[screenOptions.tabBarTintColor]/color:color-red-500
// Will output
{ screenOptions: { tabBarTintColor: 'color-red-500' } }
```

--------------------------------

### Native: Wrap App with SafeAreaProvider and use p-safe

Source: https://www.nativewind.dev/docs/tailwind/new-concepts/safe-area-insets

On native, safe area measurements come from react-native-safe-area-context. Wrap your app root with SafeAreaProvider and use the p-safe utility on a View to apply safe area padding. This setup is not needed if using Expo Router, which already adds SafeAreaProvider to every route.

```jsx
import { View } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
 
export function MyApp(props) {
  // Make sure you have the SafeAreaProvider at the root of your app
  return (
    <SafeAreaProvider>
      <View className="p-safe" {...props} />
    </SafeAreaProvider>
  );
}
```

--------------------------------

### Basic Experiment Tracking with wandb.init and wandb.log

Source: https://www.nativewind.dev/docs/tailwind/typography/hyphens

Initialize a W&B run with a project name and configuration, then log metrics during a training loop. Use wandb.finish() to end the run.

```python
import wandb

# Initialize a run
run = wandb.init(
    project="my-project",
    config={
        "learning_rate": 0.001,
        "epochs": 10,
        "batch_size": 32,
        "architecture": "ResNet50"
    }
)

# Training loop
for epoch in range(run.config.epochs):
    # Your training code
    train_loss = train_epoch()
    val_loss = validate()

    # Log metrics
    wandb.log({
        "epoch": epoch,
        "train/loss": train_loss,
        "val/loss": val_loss,
        "train/accuracy": train_acc,
        "val/accuracy": val_acc
    })

# Finish the run
wandb.finish()
```

--------------------------------

### PyTorch Integration with wandb.init and wandb.log

Source: https://www.nativewind.dev/docs/tailwind/typography/hyphens

Initialize W&B with a PyTorch project, access configuration via wandb.config, log metrics every 100 batches, and save the model with wandb.save.

```python
import torch
import wandb

# Initialize
wandb.init(project="pytorch-demo", config={
    "lr": 0.001,
    "epochs": 10
})

# Access config
config = wandb.config

# Training loop
for epoch in range(config.epochs):
    for batch_idx, (data, target) in enumerate(train_loader):
        # Forward pass
        output = model(data)
        loss = criterion(output, target)

        # Backward pass
        optimizer.zero_grad()
        loss.backward()
        optimizer.step()

        # Log every 100 batches
        if batch_idx % 100 == 0:
            wandb.log({
                "loss": loss.item(),
                "epoch": epoch,
                "batch": batch_idx
            })

# Save model
torch.save(model.state_dict(), "model.pth")
wandb.save("model.pth")  # Upload to W&B

wandb.finish()
```

--------------------------------

### place-content-start

Source: https://www.nativewind.dev/docs/tailwind/flexbox/place-items

Web-only support for the place-content-start utility class.

```css
place-content-start
```

--------------------------------

### justify-items-start

Source: https://www.nativewind.dev/docs/tailwind/flexbox/justify-items

Web only. Applies the justify-items-start utility class.

```css
justify-items-start
```

--------------------------------

### List style image utility class

Source: https://www.nativewind.dev/docs/tailwind/typography/list-style-image

The list-image-none utility class is supported.

```text
list-image-none
```

--------------------------------

### Mapping multiple props with cssInterop

Source: https://www.nativewind.dev/docs/guides/third-party-components

Shows the verbose approach of creating separate className mappings for each prop using `cssInterop` and `cva`. Requires creating a new className for each prop, which can be cumbersome to manage.

```jsx
// This is possible
cssInterop(ThirdPartyComponent, {
  labelColorClassName: {
    target: false
    nativeStyleToProps: { color: 'labelColor' }
  }
  inputColorClassName: {
    target: false
    nativeStyleToProps: { color: 'inputColor' }
  }
})
 
function Wrapper() {
  // Need to create a new className for each prop
  const labelStyle = cva('color-black')
  const inputStyle = cva('color-black')
 
  return (
    <ThirdPartyComponent
      labelColorClassName={labelStyle}
      inputColorClassName={inputStyle}
    />
  )
}
```

--------------------------------

### platformColor with platformSelect in tailwind.config.js

Source: https://www.nativewind.dev/docs/customization/theme

Use platformColor to reference system colors, typically combined with platformSelect. The example sets platformRed to systemRed on Android and red on web.

```javascript
const { platformColor } = require("nativewind/theme");
 
module.exports = {
  theme: {
    extend: {
      colors: {
        platformRed: platformSelect({
          android: platformColor("systemRed"),
          web: "red",
        }),
      },
    },
  },
};
```

--------------------------------

### tailwind.config.js with Nativewind preset

Source: https://www.nativewind.dev/docs/getting-started/installation/frameworkless

Create tailwind.config.js with content paths to all files containing Nativewind classes and include the nativewind/preset.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all files that contain Nativewind classes.
  content: ["./App.tsx", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

--------------------------------

### Padding utility classes support

Source: https://www.nativewind.dev/docs/tailwind/spacing/padding

A list of supported padding utility classes including standard theme-based values and arbitrary values.

```text
p-{n}
```

```text
p-[n]
```

```text
px-{n}
```

```text
px-[n]
```

```text
py-{n}
```

```text
py-[n]
```

```text
pt-{n}
```

```text
pt-[n]
```

```text
pr-{n}
```

```text
pr-[n]
```

```text
pb-{n}
```

```text
pb-[n]
```

```text
pl-{n}
```

```text
pl-[n]
```

```text
p-auto
```

```text
px-auto
```

```text
py-auto
```

```text
pt-auto
```

```text
pr-auto
```

```text
pb-auto
```

```text
pl-auto
```

--------------------------------

### platformSelect in tailwind.config.js

Source: https://www.nativewind.dev/docs/customization/theme

Use platformSelect to define platform-specific theme values, equivalent to Platform.select(). The example sets the error color to red on iOS, blue on Android, and green by default.

```javascript
// tailwind.config.js
 
const { platformSelect } = require("nativewind/theme");
 
module.exports = {
  theme: {
    extend: {
      colors: {
        error: platformSelect({
          ios: "red",
          android: "blue",
          default: "green",
        }),
      },
    },
  },
};
```

--------------------------------

### ThirdPartyComponent with multiple color props

Source: https://www.nativewind.dev/docs/guides/third-party-components

Defines a third-party component that accepts `labelColor` and `inputColor` props to style text and input elements. Used as the base component for the examples that follow.

```jsx
function ThirdPartyComponent({ labelColor, inputColor, ...props }) {
  return (
    <>
      <Text style={color: labelColor}>Label</Text>
      <TextInput style={color: labelColor} />
    </>
  );
}
```

--------------------------------

### Place Self Class Compatibility Table

Source: https://www.nativewind.dev/docs/tailwind/flexbox/place-self

Lists the place-self utility classes and their platform support. All classes are marked as web-only.

```html
place-self-auto
```

```html
place-self-start
```

```html
place-self-end
```

```html
place-self-center
```

```html
place-self-stretch
```

--------------------------------

### Example of a component that picks props and fails with aria-label

Source: https://www.nativewind.dev/docs/guides/third-party-components

This component picks the style prop, so it won't pass the aria-label prop added in React Native 0.71, preventing its use.

```jsx
function ThirdPartyComponent({ style }) {
  return <View style={style} />;
}
 
// aria-label was added in 0.71, but this component will not work with it!
<ThirdPartyComponent aria-label="My Label" />;
```

--------------------------------

### remapProps options: create new prop or override existing

Source: https://www.nativewind.dev/docs/api/remap-props

Shows the two ways to use remapProps: mapping a new prop to an existing one, or overriding an existing prop by setting its value to true.

```jsx
// 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 });
```

--------------------------------

### TypeScript Declarations for React Native FlatList

Source: https://www.nativewind.dev/docs/guides/third-party-components

Example of global type declarations for React Native's FlatList, which uses multiple interfaces across multiple packages. The declarations extend existing props with className properties.

```typescript
import {
  ScrollViewProps,
  ScrollViewPropsAndroid,
  ScrollViewPropsIOS,
  Touchable,
  VirtualizedListProps,
} from "react-native";
 
declare module "@react-native/virtualized-lists" {
  export interface VirtualizedListWithoutRenderItemProps<ItemT>
    extends ScrollViewProps {
    ListFooterComponentClassName?: string;
    ListHeaderComponentClassName?: string;
  }
}
 
declare module "react-native" {
  interface ScrollViewProps
    extends ViewProps,
      ScrollViewPropsIOS,
      ScrollViewPropsAndroid,
      Touchable {
    contentContainerClassName?: string;
    indicatorClassName?: string;
  }
  interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
    columnWrapperClassName?: string;
  }
  interface ViewProps {
    className?: string;
  }
}
```

--------------------------------

### Colors not working example

Source: https://www.nativewind.dev/docs/getting-started/troubleshooting

Shows a React Native component that applies text-red-500 to a View, which works on the web but not in React Native because View does not accept a color style and does not cascade styles. Move color classes to the Text element instead.

```javascript
export function App() {
  return (
    <View className="text-red-500">
      <Text>Hello, World!</Text>
    </View>
  );
}
```

--------------------------------

### global.css with Tailwind directives

Source: https://www.nativewind.dev/docs/getting-started/installation/frameworkless

Create a CSS file with Tailwind directives. Replace './global.css' with the relative path to this file in subsequent steps.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

--------------------------------

### Font file structure for custom fonts

Source: https://www.nativewind.dev/docs/guides/custom-fonts

Place static font files in your project, for example under assets/fonts/. The file name must match the PostScript name of the font; otherwise the font silently fails to load on iOS while appearing to work on Android.

```text
assets/
  fonts/
    Inter-Regular.otf
    Inter-Bold.otf
    Inter-Italic.otf
    Inter-BoldItalic.otf
    Inter-Medium.otf
    Inter-SemiBold.otf

```

--------------------------------

### useColorScheme() hook usage in React Native

Source: https://www.nativewind.dev/docs/api/use-color-scheme

Use this hook to access and modify the device's color scheme. The example shows how to display the current color scheme and toggle it between light and dark on press. The setColorScheme function accepts 'light', 'dark', or 'system'.

```jsx
import { useColorScheme } from "nativewind";
import { Text } from "react-native";
 
function MyComponent() {
  const { colorScheme, setColorScheme } = useColorScheme();
 
  return (
    <Text
      onPress={() => setColorScheme(colorScheme === "light" ? "dark" : "light")}
    >
      {`The color scheme is ${colorScheme}`}
    </Text>
  );
}
```

--------------------------------

### Object Fit Compatibility Classes

Source: https://www.nativewind.dev/docs/tailwind/layout/object-fit

Lists the object-fit utility classes and their compatibility. All classes are marked as web-only, meaning they are not supported on native platforms.

```html
object-contain
```

```html
object-cover
```

```html
object-fill
```

```html
object-none
```

```html
object-scale-down
```

--------------------------------

### Display utility classes compatibility table

Source: https://www.nativewind.dev/docs/tailwind/layout/display

Lists the display utility classes and their platform support. Classes like flex and hidden are fully supported on native, while others like block, inline, and grid are web-only.

```html
flex
```

```html
hidden
```

```html
block
```

```html
inline-block
```

```html
inline
```

```html
inline-flex
```

```html
table
```

```html
inline-table
```

```html
table-caption
```

```html
table-cell
```

```html
table-column
```

```html
table-column-group
```

```html
table-footer-group
```

```html
table-header-group
```

```html
table-row-group
```

```html
table-row
```

```html
flow-root
```

```html
grid
```

```html
inline-grid
```

```html
contents
```

```html
list-item
```

--------------------------------

### Enable backgroundOpacity core plugin in tailwind.config.js

Source: https://www.nativewind.dev/docs/tailwind/backgrounds/background-color

Add the corePlugins configuration to your tailwind.config.js file to enable the backgroundOpacity plugin, which allows dynamic opacity changes via the --tw-background-opacity variable. This is disabled by default for performance reasons.

```javascript
module.exports = {
  /* ...  */
  corePlugins: {
    backgroundOpacity: true,
  },
};
```

--------------------------------

### place-content-center

Source: https://www.nativewind.dev/docs/tailwind/flexbox/place-items

Web-only support for the place-content-center utility class.

```css
place-content-center
```

--------------------------------

### useColorScheme()

Source: https://www.nativewind.dev/docs/api/use-color-scheme

Hook that provides access to the device's color scheme, with methods to override and toggle it.

```APIDOC
## useColorScheme()

### Description
Provides access to the device's color scheme, including the current scheme and methods to override or toggle it.

### Returns
- **colorScheme** (string) - The current device colorScheme.
- **setColorScheme** (function) - Override the current colorScheme with a different scheme. Accepted values are `light`, `dark`, and `system`.
- **toggleColorScheme** (function) - Toggle the color scheme between `light` and `dark`.

### Usage Example
```jsx
import { useColorScheme } from "nativewind";
import { Text } from "react-native";

function MyComponent() {
  const { colorScheme, setColorScheme } = useColorScheme();

  return (
    <Text
      onPress={() => setColorScheme(colorScheme === "light" ? "dark" : "light")}
    >
      {`The color scheme is ${colorScheme}`}
    </Text>
  );
}
```

### Notes
- Nativewind v4.2.7 handles the React Native Appearance `unspecified` value internally. Continue using `setColorScheme("system")` with the v4 Nativewind hook to restore system preference.
```

--------------------------------

### list-inside Class Compatibility

Source: https://www.nativewind.dev/docs/tailwind/typography/list-style-position

Indicates that the list-inside utility class is supported.

```plaintext
list-inside
```

--------------------------------

### outline

Source: https://www.nativewind.dev/docs/tailwind/borders/outline-style

Web only. Sets the outline style to solid.

```css
outline
```

--------------------------------

### Compatibility table class names

Source: https://www.nativewind.dev/docs/tailwind/layout/top-right-bottom-left

These are the utility class names listed in the compatibility table, showing the supported classes for inset, top, bottom, left, and right positioning. The table indicates which classes are supported on native and which are web-only.

```text
inset-{n}
```

```text
inset-[n]
```

```text
inset-x-{n}
```

```text
inset-y-[n]
```

```text
top-{n}
```

```text
top-[n]
```

```text
bottom-{n}
```

```text
bottom-[n]
```

```text
left-{n}
```

```text
left-[n]
```

```text
right-{n}
```

```text
right-[n]
```

```text
inset-auto
```

```text
inset-x-auto
```

```text
inset-y-auto
```

```text
top-auto
```

```text
bottom-auto
```

```text
left-auto
```

```text
right-auto
```

--------------------------------

### snap-both class

Source: https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-type

Web only. Enables scroll snapping on both axes.

```html
snap-both
```

--------------------------------

### Flex Wrap Compatibility Classes

Source: https://www.nativewind.dev/docs/tailwind/flexbox/flex-wrap

Lists the flex-wrap utility classes and their support status in NativeWind. All three classes are fully supported.

```plaintext
flex-wrap
```

```plaintext
flex-wrap-reverse
```

```plaintext
flex-nowrap
```

--------------------------------

### Using remapProps to map multiple style props

Source: https://www.nativewind.dev/docs/api/remap-props

Creates a customized component by mapping new props (buttonClass, labelClass) to existing style props (buttonStyle, labelStyle) of a third-party component, allowing Tailwind CSS classNames to be passed.

```jsx
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" />;
```

--------------------------------

### border-solid class

Source: https://www.nativewind.dev/docs/tailwind/borders/border-style

Supported on native. Use to apply a solid border style.

```css
border-solid
```

--------------------------------

### Divide Width Compatibility Classes

Source: https://www.nativewind.dev/docs/tailwind/borders/divide-width

Compatibility table listing divide width utility classes. All are web-only in NativeWind v4.

```html
divide-x-{n}
```

```html
divide-x-[n]
```

```html
divide-y-{n}
```

```html
divide-y-[n]
```

--------------------------------

### list-outside Class Compatibility

Source: https://www.nativewind.dev/docs/tailwind/typography/list-style-position

Indicates that the list-outside utility class is supported.

```plaintext
list-outside
```

--------------------------------

### Z-Index class compatibility

Source: https://www.nativewind.dev/docs/tailwind/layout/z-index

Compatibility table for Z-Index classes. z-{n} and z-[n] are supported on native, while z-auto is web only.

```html
z-{n}
```

```html
z-[n]
```

```html
z-auto
```

--------------------------------

### Compatibility table for stroke width classes

Source: https://www.nativewind.dev/docs/tailwind/svg/stroke-width

Lists the supported stroke width classes: `stroke-{n}` and `stroke-[n]` are both marked as supported.

```markdown
stroke-{n}
```

```markdown
stroke-[n]
```

--------------------------------

### Mapping className to style props with remapProps

Source: https://www.nativewind.dev/docs

Shows how to use remapProps to map className and related props to style props for complex components like FlatList, enabling Tailwind classes on native and web.

```jsx
remapProps(FlatList, {
  className: "style",
  ListFooterComponentClassName: "ListFooterComponentStyle",
  ListHeaderComponentClassName: "ListHeaderComponentStyle",
  columnWrapperClassName: "columnWrapperStyle",
  contentContainerClassName: "contentContainerStyle",
});
 
<FlatList
  {...}
  className="bg-black"
  ListHeaderComponentClassName="bg-black text-white"
  ListFooterComponentClassName="bg-black text-white"
  columnWrapperClassName="bg-black"
  contentContainerClassName="bg-black"
  indicatorClassName="bg-black"
/>
```

--------------------------------

### Aspect Ratio Compatibility Classes

Source: https://www.nativewind.dev/docs/tailwind/layout/aspect-ratio

Lists the aspect ratio utility classes and their support status in NativeWind. All listed classes are fully supported.

```css
aspect-auto
```

```css
aspect-video
```

```css
aspect-square
```

```css
aspect-[n]
```

```css
aspect-{n}
```

--------------------------------

### delay-{n} class

Source: https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-delay

Class for setting transition delay with a value from the theme. Marked as experimental support on native.

```html
delay-{n}
```

--------------------------------

### place-content-baseline

Source: https://www.nativewind.dev/docs/tailwind/flexbox/place-items

Web-only support for the place-content-baseline utility class.

```css
place-content-baseline
```

--------------------------------

### withNativeWind Metro configuration

Source: https://www.nativewind.dev/docs/api/with-nativewind

Wrap your Metro config with withNativeWind, providing the relative path to your CSS file as the `input` option. This is the only required option.

```javascript
import { withNativeWind } from "nativewind/metro";
 
module.exports = withNativeWind(config, {
  input: "<relative path to your .css file>",
});
```

--------------------------------

### Flex Direction Compatibility Classes

Source: https://www.nativewind.dev/docs/tailwind/flexbox/flex-direction

Lists the supported flex-direction utility classes and their support status. The classes are flex-row, flex-row-reverse, flex-col, and flex-col-reverse, all marked as fully supported.

```plaintext
flex-row
```

```plaintext
flex-row-reverse
```

```plaintext
flex-col
```

```plaintext
flex-col-reverse
```

--------------------------------

### Test Tailwind CLI compilation

Source: https://www.nativewind.dev/docs/getting-started/troubleshooting

Runs the Tailwind CLI to generate an output.css file from the project's main CSS file, which should contain the Tailwind directives. Use this to verify Tailwind compilation before troubleshooting Nativewind.

```bash
npx tailwindcss --input ./global.css --output output.css
```

--------------------------------

### place-content-end

Source: https://www.nativewind.dev/docs/tailwind/flexbox/place-items

Web-only support for the place-content-end utility class.

```css
place-content-end
```

--------------------------------

### env() supported safe area insets

Source: https://www.nativewind.dev/docs/core-concepts/functions-and-directives

Lists the env() functions supported by NativeWind for accessing device-specific safe area insets.

```css
env(safe-area-inset-top);
env(safe-area-inset-bottom);
env(safe-area-inset-left);
env(safe-area-inset-right);
```

--------------------------------

### getPixelSizeForLayoutSize() in tailwind.config.js

Source: https://www.nativewind.dev/docs/guides/themes

Equivalent of PixelRatio.getPixelSizeForLayoutSize().

```javascript
const { getPixelSizeForLayoutSize } = require("nativewind/theme");
 
module.exports = {
  theme: {
    extend: {
      size: {
        custom: getPixelSizeForLayoutSize(2),
      },
    },
  },
};
```

--------------------------------

### babel.config.js with nativewind/babel preset

Source: https://www.nativewind.dev/docs/getting-started/installation/frameworkless

Add 'nativewind/babel' to the presets array in babel.config.js. The diff shows adding the preset to existing presets.

```javascript
module.exports = {
- presets: ['<existing presets>'],
+ presets: ['<existing presets>', 'nativewind/babel'],
};
```

--------------------------------

### duration-[n] class

Source: https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-duration

This class is used to set an arbitrary transition duration. It supports arbitrary values. It has experimental support on native.

```html
duration-[n]
```

--------------------------------

### items-baseline

Source: https://www.nativewind.dev/docs/tailwind/flexbox/align-items

Supported class for aligning items to the baseline.

```css
items-baseline
```

--------------------------------

### place-content-stretch

Source: https://www.nativewind.dev/docs/tailwind/flexbox/place-items

Web-only support for the place-content-stretch utility class.

```css
place-content-stretch
```

--------------------------------

### Configure expo-font plugin in app.json

Source: https://www.nativewind.dev/docs/guides/custom-fonts

Add the expo-font config plugin to app.json to load fonts at build time. Fonts are available immediately without a loading state.

```json
{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "fonts": [
            "./assets/fonts/Inter-Regular.otf",
            "./assets/fonts/Inter-Bold.otf",
            "./assets/fonts/Inter-Italic.otf",
            "./assets/fonts/Inter-BoldItalic.otf",
            "./assets/fonts/Inter-Medium.otf",
            "./assets/fonts/Inter-SemiBold.otf"
          ]
        }
      ]
    ]
  }
}
```

--------------------------------

### snap-x class

Source: https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-type

Web only. Enables horizontal scroll snapping.

```html
snap-x
```

--------------------------------

### Will Change Class Compatibility Table

Source: https://www.nativewind.dev/docs/tailwind/interactivity/will-change

Lists the will-change utility classes and their platform support. All classes are marked as web-only.

```html
will-change-auto
```

```html
will-change-scroll
```

```html
will-change-contents
```

```html
will-change-transform
```

--------------------------------

### border-dashed class

Source: https://www.nativewind.dev/docs/tailwind/borders/border-style

Supported on native. Use to apply a dashed border style.

```css
border-dashed
```

--------------------------------

### pixelRatio() in tailwind.config.js

Source: https://www.nativewind.dev/docs/guides/themes

Equivalent of PixelRatio.get(). If a number is provided, returns PixelRatio.get() * <value>; otherwise returns the PixelRatio value.

```javascript
const { pixelRatio } = require("nativewind/theme");
 
module.exports = {
  theme: {
    extend: {
      borderWidth: {
        number: pixelRatio(2),
      },
    },
  },
};
```

--------------------------------

### Gradient color stop classes table

Source: https://www.nativewind.dev/docs/tailwind/backgrounds/gradient-color-stops

Lists all gradient color stop utility classes (from-, via-, to-) with their platform support. All classes are marked as web only (🌐 Web only).

```html
from-inherit
```

```html
from-current
```

```html
from-transparent
```

```html
from-black
```

```html
from-white
```

```html
from-{n}
```

```html
from-[n]
```

```html
via-inherit
```

```html
via-current
```

```html
via-transparent
```

```html
via-black
```

```html
via-white
```

```html
via-{n}
```

```html
via-[n]
```

```html
to-inherit
```

```html
to-current
```

```html
to-transparent
```

```html
to-black
```

```html
to-white
```

```html
to-{n}
```

```html
to-[n]
```

--------------------------------

### User Select Classes

Source: https://www.nativewind.dev/docs/tailwind/interactivity/user-select

Lists the User Select utility classes supported by NativeWind. All classes are web-only and correspond to the CSS user-select property.

```plaintext
select-none
```

```plaintext
select-text
```

```plaintext
select-all
```

```plaintext
select-auto
```

--------------------------------

### Caret Color Compatibility Table

Source: https://www.nativewind.dev/docs/tailwind/interactivity/caret-color

Lists the caret color classes and their support status. Classes like caret-{n}, caret-[n], caret-black, caret-white, and caret-transparent are supported on native, while caret-inherit and caret-current are web-only.

```html
caret-{n}
```

```html
caret-[n]
```

```html
caret-black
```

```html
caret-white
```

```html
caret-transparent
```

```html
caret-inherit
```

```html
caret-current
```

--------------------------------

### outline-none

Source: https://www.nativewind.dev/docs/tailwind/borders/outline-style

Web only. Sets the outline style to none.

```css
outline-none
```

--------------------------------

### bg-clip-content class

Source: https://www.nativewind.dev/docs/tailwind/backgrounds/background-clip

Web only utility class for background clipping to the content box.

```plaintext
bg-clip-content
```

--------------------------------

### Verify font loading with inline style

Source: https://www.nativewind.dev/docs/guides/custom-fonts

Use an inline style with fontFamily to verify that fonts are loaded. If this does not work, the issue is with font loading, not Nativewind.

```tsx
<Text style={{ fontFamily: "Inter-Regular" }}>
  This should render in Inter
</Text>
```
Tokens:
Raw