--- name: react-native-web-styling description: Decide whether web, Electron, shared, or mobile UI should use DOM or React Native, and guide existing React Native Web and Uniwind styling, className precedence, spacing, reset, and compatibility fixes. --- # React Native Web Styling Use this skill when deciding whether web, Electron, shared, or mobile UI should use DOM or React Native, or when working on React Native Web, RNW, Uniwind, dropdown or item spacing, `className` precedence, reset behavior, and RNW-compatible styling fixes. ## Decide The Owning Platform - UI rendered only by web or an Electron renderer is DOM-first. - Existing UI also rendered by native mobile remains React Native until deliberately converted, and uses a tested platform seam when browser and native implementations differ. Newly authored shared components follow `web-first-components`: the default file is web, with `.native.tsx` overrides. - Cosmetic fixes to existing RNW do not trigger migration. Apply the smallest compatible styling repair. - Do not insert a raw DOM child directly into an RNW tree. Use a platform primitive or migrate the owning boundary separately. When Post.Build.Ship is already active, read `post-build-ship/references/react-native-web-to-dom.md` for resolver inventory, the three approved platform seams, bounded shipping exceptions, CSS ownership, verification, and Pattern Candidate handling. ## Existing RNW And Uniwind Styling - Preserve React Native Web compatibility. Avoid DOM-only assumptions unless the target is explicitly web-only. - Prefer static Uniwind/Tailwind `className` values for static styling. - Do not replace static class-based styles with inline styles unless runtime or dynamic behavior requires it. - Treat inline styles as the exception for dynamic values, measured values, or platform-specific runtime behavior. ## Spacing And Resets - React Native Web `View` reset styles can include `padding: 0`. - When spacing does not render as expected, inspect computed styles before changing the styling strategy. - If computed styles prove RNW reset or class ordering is winning, `!px-*`, `!py-*`, or `!p-*` utilities can be the correct fix. - Keep important utilities narrow. Prefer the smallest affected padding axis over broad overrides. ## Verification - Check the rendered element's computed style before concluding Uniwind is failing. - Verify dropdowns, selectable rows, list items, and touch targets at the affected viewport sizes. - Confirm the result still works through React Native primitives, not direct DOM rewrites.