#033 - NativeWind & React Native Styling with Mark Lawlor

Rocket Ship

Mark Lawlor, the creator of NativeWind, joins Simon on the Rocketship podcast to discuss the challenges of styling in React Native and the solutions provided by NativeWind. Mark explains the limitations of the StyleSheet API in React Native and how NativeWind addresses these limitations by bringing CSS concepts to React Native. He also highlights the benefits of using Tailwind CSS with NativeWind and the power of the NativeWind library in enabling complex styles and theming in React Native applications.

Learn React Native - https://galaxies.dev

Mark Lawlor

• Mark Twitter: https://twitter.com/mark__lawlor
• Mark Github: https://github.com/marklawlor
• NativeWind: https://www.nativewind.dev/

Links

• Nativecn-UI: https://github.com/Mobilecn-UI/nativecn-ui

Takeaways

• The StyleSheet API in React Native provides basic styling primitives but lacks support for complex styles and state-based styling.
• Styling in React Native becomes more complex as the app grows and needs to support different states, platforms, and devices.
• NativeWind is a styling system for React Native that brings CSS concepts to React Native, allowing developers to use Tailwind CSS and leverage the power of CSS variables, media queries, and other CSS features.
• NativeWind enables developers to write styles in a familiar CSS syntax and provides advanced features like transition classes, platform-specific themes, and support for CSS variables and calculations. CSS variables can be used for theming and sub-theming in Native Wind.
• Standardization and compatibility with other libraries and platforms are important goals for NativeWind.
• Future plans for NativeWind include introducing new primitives, improving animations, and supporting other styling libraries.