twrnc Quick Cheatsheet

Basic Usage - tw Tagged Template

import tw from 'twrnc';

// ✅ Simple classes
<View style={tw`bg-blue-500 p-4 flex-row`}>
<Text style={tw`text-white font-bold`}>Hello</Text>

// ✅ Platform-specific
<View style={tw`ios:pt-4 android:pt-2`}>

// ✅ Dark mode
<Text style={tw`text-black dark:text-white`}>

// ✅ Breakpoints
<View style={tw`flex-col lg:flex-row`}>

Conditional Classes - Use tw.style()

// ❌ DON'T use template literal interpolation
<View style={tw`bg-blue-500 ${isActive && 'bg-red-500'}`}> // Won't work!

// ✅ DO use tw.style() for conditionals
<View style={tw.style(
  'bg-blue-500 p-4',
  isActive && 'bg-red-500',
  isDisabled && 'opacity-50'
)}>

// ✅ Object syntax
<View style={tw.style({
  'bg-blue-500': !isActive,
  'bg-red-500': isActive,
  'opacity-50': isDisabled
})}>

// ✅ Mix with RN styles
<View style={tw.style('mt-4', { width: `${progress}%` })}>

Key Rule

Template literals (tw``) = static classes only** **Dynamic/conditional = use tw.style()`

That's it! For anything beyond simple static classes, reach for tw.style().