{"type":"rich","version":"1.0","provider_name":"Transistor","provider_url":"https://transistor.fm","author_name":"Rocket Ship","title":"#033 - NativeWind & React Native Styling with Mark Lawlor","html":"<iframe width=\"100%\" height=\"180\" frameborder=\"no\" scrolling=\"no\" seamless src=\"https://share.transistor.fm/e/243c9d3a\"></iframe>","width":"100%","height":180,"duration":4294,"description":"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.\nLearn React Native - https://galaxies.dev\nMark Lawlor\nMark Twitter: https://twitter.com/mark__lawlor\nMark Github: https://github.com/marklawlor\nNativeWind: https://www.nativewind.dev/\n\nLinks\nNativecn-UI: https://github.com/Mobilecn-UI/nativecn-ui\n\nTakeaways\nThe StyleSheet API in React Native provides basic styling primitives but lacks support for complex styles and state-based styling.\nStyling in React Native becomes more complex as the app grows and needs to support different states, platforms, and devices.\nNativeWind 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.\nNativeWind 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.\nStandardization and compatibility with other libraries and platforms are important goals for NativeWind.\nFuture plans for NativeWind include introducing new primitives, improving animations, and supporting other styling libraries.","thumbnail_url":"https://img.transistorcdn.com/1mTgnNUxqgj8QDkI4V51oojxwjdNqhjuAp7rEDt2W1s/rs:fill:0:0:1/w:400/h:400/q:60/mb:500000/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9zaG93/LzQzNTgzLzE2OTAz/ODE4NzktYXJ0d29y/ay5qcGc.webp","thumbnail_width":300,"thumbnail_height":300}