React Native Compatibility
This library is still in development. This document helps track what classes are currently supported, but is not a complete list
| Icon |
Legend |
| ✔️ |
Supported |
| ✅ |
Partial support |
| ❌ |
Not supported |
| 🚧 |
Needs development |
| 💥 |
Not handled correctly |
Table of contents
Layout
Flexbox & Grid
Spacing
Sizing
Typography
Backgrounds
Borders
Effects
Filters
Tables
Transitions & Animation
Transforms
Interactivity
SVG
Accessibility
Aspect Ratio
| Class |
Supported |
| aspect-auto |
✔️ |
| aspect-square |
✔️ |
| aspect-video |
✔️ |
| aspect-{ratio} |
✔️ |
| aspect-[ratio] |
✔️ |
Container
| Class |
Supported |
| container |
✔️ |
Columns
Use a FlatList with numColumns set instead.
| Class |
Supported |
| column-{n} |
❌ |
| column-[n] |
❌ |
Break After/Before/Inside
| Class |
Supported |
| break-after-{option} |
❌ |
| break-before-{option} |
❌ |
| break-inside-{option} |
❌ |
Box Decoration Break
| Class |
Supported |
| box-decoration-clone |
❌ |
| box-decoration-slice |
❌ |
Box Sizing
React Native does not support changing the box sizing
| Class |
Supported |
| box-border |
❌ |
| box-content |
❌ |
Display
React Native only supports flex or none
| Class |
Supported |
| flex |
✔️ |
| none |
✔️ |
| block |
❌ |
| inline-block |
❌ |
| inline |
❌ |
| inline-flex |
❌ |
| table |
❌ |
| inline-table |
❌ |
| table-caption |
❌ |
| table-cell |
❌ |
| table-column |
❌ |
| table-column-group |
❌ |
| table-footer-group |
❌ |
| table-header-group |
❌ |
| table-row-group |
❌ |
| table-row |
❌ |
| flow-root |
❌ |
| grid |
❌ |
| inline-grid |
❌ |
| contents |
❌ |
| list-item |
❌ |
Floats
React Native does not support floats. Use Flexbox instead
| Class |
Supported |
| float-right |
❌ |
| float-left |
❌ |
| float-none |
❌ |
Clear
React Native does not support clearning floats. Use Flexbox instead
| Class |
Supported |
| clear-right |
❌ |
| clear-left |
❌ |
| clear-both |
❌ |
| clear-none |
❌ |
Isolation
| Class |
Supported |
| isolate |
❌ |
| isolate-auto |
❌ |
Object Fit
| Class |
Supported |
| object-contain |
❌ |
| object-cover |
❌ |
| object-fill |
❌ |
| object-none |
❌ |
| object-scale-down |
❌ |
Object Position
| Class |
Supported |
| object-bottom |
❌ |
| object-center |
❌ |
| object-left |
❌ |
| object-left-bottom |
❌ |
| object-left-top |
❌ |
| object-right |
❌ |
| object-right-bottom |
❌ |
| object-right-top |
❌ |
| object-top |
❌ |
Overflow
| Class |
Supported |
| overflow-visible |
✔️ |
| overflow-hidden |
✔️ |
| overflow-scroll |
✔️ |
| overflow-auto |
❌ |
| overflow-clip |
❌ |
| overflow-x-auto |
❌ |
| overflow-y-auto |
❌ |
| overflow-x-hidden |
❌ |
| overflow-y-hidden |
❌ |
| overflow-x-clip |
❌ |
| overflow-y-clip |
❌ |
| overflow-x-visible |
❌ |
| overflow-y-visible |
❌ |
| overflow-x-scroll |
❌ |
| overflow-y-scroll |
❌ |
Overscroll Behavior
| Class |
Supported |
| overscroll-auto |
❌ |
| overscroll-contain |
❌ |
| overscroll-none |
❌ |
| overscroll-y-auto |
❌ |
| overscroll-y-contain |
❌ |
| overscroll-y-none |
❌ |
| overscroll-x-auto |
❌ |
| overscroll-x-contain |
❌ |
| overscroll-x-none |
❌ |
Position
| Class |
Supported |
| absolute |
✔️ |
| relative |
✔️ |
| static |
❌ |
| fixed |
❌ |
| stick |
❌ |
