Data Selectors

import { View } from 'react-native'

// Use your own data-* props on React Native components
<View
  data-state={isOpen ? 'open' : 'closed'}
  className="p-4 rounded border data-[state=open]:bg-muted/50 data-[state=closed]:bg-transparent"
/>

import { View } from 'react-native'

<View
  data-selected={isSelected}
  className="border border-input rounded px-3 py-2 data-[selected=true]:ring-2 data-[selected=true]:ring-ring"
/>

import { View } from 'react-native'

// Match a specific value on your own data-* prop
<View
  data-state={isOpen ? 'open' : 'closed'}
  className="data-[state=open]:bg-muted/50 data-[state=closed]:bg-transparent"
/>

import { View } from 'react-native'

<View
  data-status={status}      // 'success' | 'warning' | 'error'
  data-size={size}          // 'sm' | 'md' | 'lg'
  className="
    data-[status=success]:bg-green-500 data-[status=success]:text-white
    data-[status=warning]:bg-yellow-500 data-[status=warning]:text-black
    data-[status=error]:bg-red-500 data-[status=error]:text-white
    data-[size=sm]:px-2 data-[size=sm]:py-0.5
    data-[size=md]:px-3 data-[size=md]:py-1
    data-[size=lg]:px-4 data-[size=lg]:py-1.5
  "
/>

import { Pressable, Text } from 'react-native'

<Pressable
  data-selected={route.key === current}
  className="
    px-4 py-2 rounded-md text-foreground/60
    data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground
  "
>
  <Text>{route.title}</Text>
</Pressable>

import { Pressable, View } from 'react-native'

<Pressable
  data-checked={enabled}
  className="
    h-6 w-10 rounded-full bg-muted
    data-[checked=true]:bg-primary
  "
>
  <View
    className="h-5 w-5 rounded-full bg-background translate-x-0 data-[checked=true]:translate-x-4"
  />
</Pressable>