Dan Stepanov - NativeWind, NativeWind UI

{/ TAB: SHOW NOTES /} This week we talk to Dan Stepanov, a maintainer of NativeWind, the author of NativeWind UI. NativeWind is tailwind CSS for React Native, a seemingly simple way to build UI that has lots of challenges to build. On top of that he's building NativeWind UI, a component library that leverages NativeWind to build native like experiences. We also talk about the challenges of making money on top of open source. - https://www.youtube.com/watch?v=N8QvZKlnb7M - https://www.danstepanov.com/ - https://x.com/nativewindui - https://rn.new/ - https://github.com/danstepanov - https://www.nativewind.dev/ Episode sponsored By MUX (https://mux.com) Become a paid subscriber our patreon, spotify, or apple podcasts for the full episode. - https://www.patreon.com/devtoolsfm - https://podcasters.spotify.com/pod/show/devtoolsfm/subscribe - https://podcasts.apple.com/us/podcast/devtools-fm/id1566647758 - https://www.youtube.com/@devtoolsfm/membership {/ LINKS /} {/ Paste show notes /} {/ TAB: SECTIONS /} [00:00:00] Introduction [00:01:41] Dan's Journey to NativeWind [00:10:53] Ad [00:12:18] Challenges and Innovations in NativeWind [00:15:58] Performance and Optimization in NativeWind [00:20:39] Supporting Different Bundlers [00:26:56] Introduction to Native Wind UI [00:32:06] Pricing Models and Open Source Dilemmas [00:44:50] Future of React Native and Expo [00:48:48] Conclusion and Final Thoughts {/ TAB: TRANSCRIPT /} Dan: I hope we don't lose sight of the importance of that native feel. Native is no longer meaning mobile. It means native to a platform. Whether that is macOS, a watch, a TV, Android, it means so much. [00:00:20] Introduction Andrew: Hello, welcome to the DevTools FM podcast. This is a podcast about developer tools and the people who make them. I'm Andrew. And this is my cohost, Justin. Justin: Hey everyone, uh, we're really excited to have, uh, Dan Stepanov with us today. So Dan, uh, you've done some really, really interesting work on NativeWind, which we're really excited to talk about. But it sounds like you've had a pretty expensive career, worked on a lot of really cool things, been building apps for a long time. Justin: Uh, so we're really excited to talk to you. Before we dive in and start talking about NativeWind and some of the other stuff you worked on, would you like to tell our audience a little bit more about yourself? Dan: Yeah, sure. Uh, so first of all, uh, thank you for having me. Uh, I'm Dan otherwise known as only dance. Uh, I am, I guess I would call a career software developer, uh, academically chemical engineering, but decided like midway through like coding. I discovered this via hackathons. It was like coding is for me. Dan: So for about 10 years, I have been, uh, primarily focused on mobile apps and I was sort of shoehorned into working on. React native back in 2015 and have kind of been here ever since through many, many iterations, but where, you know, the first eight years we'll call it was spent largely focused on, you know, applications and stuff, the last two, maybe a little more have been focused primarily on building developer tooling. Andrew: Cool. [00:01:41] Dan's Journey to NativeWind Andrew: So how did you get to native wind? And could you like describe what native wind is for a person who has no clue what it is? Dan: Yeah, native wind is tailwind for react native. It is a glorified wrapper around the tailwind CLI, uh, and tailwind in case anyone is unclear is not unlike bootstrap from back in the day in the sense of these, these sort of shortened descriptors, right, for CSS, and you can use them to vastly simple, simplify, uh, styling, uh, in react and. Dan: So we saw that, or I guess Mark really saw that simplicity and wanted to bring it to react native. And there's a lot of nuance, you know, so you have to make something that, especially with react native going more web now as well, you have to make it work for, for just base web and then also for, for native styling, which does not work like the web. Dan: So that's what native wind is the way that I got involved with native wind is Kind of I was spending some time working, uh, on Tamagui last year. I've lost all track of time at this point, by the way, I have no idea what's going on or when I worked somewhere else, but I spent a little bit of time working on Tamagui and while that didn't work out, I, I soon after ended up at AppJS in May of this year. Dan: and. I was excited because I had been talking to Mark Lawler over voice chat and discord a lot, and I got to meet him in person for the first time. And so, here we are at, there's this like mezzanine, right, to set the scene, and it's sort of overlooking the stage. And I see him sitting there, and he is a giant person, by the way. Dan: He is, he is a mountain of a human being. Um, and I see him sitting in, in one of these lounge chairs that they have set up, and I'm like, This is it. Go talk to him. Like go say hi. And, uh, and native wind just to set the, the con the scene here is. The last major update was two years ago with a version 2. 0 version four had been announced in January of this year, I think, but had really seen no development until then. Dan: So there's this giant question mark around what's going on with it. And, and, uh, Mark had recently joined expo and no one knew, like, does that mean native when it's going to go to expo or what's going on? So I go and sit down next to him. I have a photo from this actually. Um, but. I look at him like, Hey Mark. Dan: So I re you know, you might, uh, do you need any help with native one? Cause I'd be happy to, to help out, you know, getting it across the finish line, fully expecting him to be like, no, I'm good. You know, like I'll, I'll get it out. It'll be ready when it's ready. But he actually responded. He was like, uh, no, I reckon I might, you know, and that was the beginning of this sort of, uh, this journey. Dan: I think I formally stepped in in like August and then it took up until October. When it actually launched, uh, version four, that is, um, overwhelmingly that work is Mark. Um, I might only take credit for just kind of like. Being a forcing function kind of thing. Um, yeah, but even after launch it, it has still like that, that feeling doesn't go away of, of that urgency. Dan: That like gap that you feel leading up to the launch post launch. It doesn't go away. It's still there, you know? And, uh, and I still kind of feel it. Um, yeah, so that was, that was native wind version four. Justin: That's, that's awesome and kudos for like getting involved and helping push that along. I know there's a lot of times when you hear somebody like with a bunch of enthusiasm come up to a maintainer is like, Oh, let me help you. And you're like, yes, please. And then they like disappear. You're like, what happened? Justin: Uh, so kudos for pushing that over the, Over the line, you know, this is why you're talking. I was thinking, um, back in the day, uh, I had gotten involved in, like, phone gap in Cordova, you know, way, way, way back in the day of, like, building native apps with web, uh, not native at all. I remember there was some attempts to make CSS libraries that like felt native. Justin: Because the big thing at the time then, which I remember hearing a lot, is like, people are not going to trust an app that doesn't look like a native app. It's like, I remember hearing that in those times. It's like, no, it has to look like, it has to look like the native interfaces or whatever. And I was briefly looking, I couldn't find any of the old, like, style libraries or whatever that I was seeing at the time. Justin: But it's, it's interesting that. It seems like as an industry, I'm sure that, that is still around that, that feeling of like, Oh, this needs to feel native, you know, even in react native. But like, by and large, like a lot of companies sort of moved away from that. Like, Oh, we're not trying to use like apples, like human design, you know, it's like, let's, let's like lean into it a little bit, but like do our custom branding or whatever. Justin: Do you, do you feel like that's. Changing? Are you trying to change it? Like, what is the, Justin: what is the story there? Dan: I think. I struggle with this a lot, actually. So we, I like to think of it as there's two cohorts of people and I'll actually run polls for this. Um, and the results always surprised me, but there's two cohorts of people. There's the people who want to build what I call cross platform applications. And then there's the people who want to build multi platform applications. Dan: And the difference there. For me is the cross platform is let's make it run everywhere and multi platform is let's make it feel native everywhere. And I think that a lot of the early hype about React Native was the former, and we're only now coming around to the latter, um, for a multitude of different reasons. Dan: But what I find when I poll folks in our community is that it's actually evenly split down the middle. And And that's jarring. And so I think it's really important to provide the options for people to do what they feel is the priority. For me, that native feel that you're referring to is super important because design that visual aesthetic is the way that you establish trust with strangers on the internet, right? Dan: You're not meeting people. You're not doing sales in person anymore. You have basically one opportunity when you show them something to establish that, that trust, and it'll go a pretty long way. The next chance you get is every time they use your product. And you want to try to make sure that that also is as pleasant. Dan: But for a lot of people, you know, your banks, your, your healthcare apps, it doesn't matter really. And it's important that they have the tooling to, to make things cross platform or whatever. And this is why I don't see things as like one tool versus another. I think we all have a role to play in that, that process. Dan: Yeah, and then you can just focus on your, your zone, right? Your, your fraction of the pie is like, we serve these people and by not trying to do more than that, we're going to be the best within this subcategory. Andrew: So would you say native win is in that second category where you like lean more into like the native feel or is it the opposite where you lean more into the universal feel? Dan: Well, Native Wind started before my time, Native Wind started as an attempt to be a unified styling system. So quite a bit more than it is now. And part of the version four. idea was to move away from that and just be sort of this unopinionated, so to speak, styling option. Right. And so I think, uh, I think that native wind as best it can is going to try to be not opinionated about whether you want to do cross platform or multi platform. Dan: And so you end up seeing component libraries then spawn out. Like react native reusables glue stack, right? Ones that favor more of that generic look that shad CN look or whatever, right? That base configuration while simultaneously allowing for something like native wind UI or any other library that focuses on a native look and feel. Dan: Right. Um, it's more, you think more of it as, as a foundation on the basis, like your, your core, your only assumption for people who are going to use native wind is these people. like the interface of Tailwind. They don't want to entertain something different. Ideally, they're even coming from web into native and we're just giving that to them. Dan: If you don't like that, that's fine. You should try something else. You know, Tomagoo is another great option for that. So, um, I don't think it has an opinion, Native Wind on cross platform [00:10:53] Ad Andrew: We'd like to stop and thank our sponsor for the week. MCSE. If you haven't heard of mux, mux is an amazing platform That makes adding video to your product is easy. adding a few libraries to your code. You've ever had to add video to a product. You know, there's so many different pits of failure that you can fall into along the way. Andrew: When it comes to video, you have to worry about every end of the experience. There's so many things to learn about and so many things to optimize and so many things that are going to stop you from shipping faster. So that's where monks comes in. They have an awesome set of API APIs and components that you can sprinkle throughout your code to add a seamless video playback experience. Andrew: They're a team of experts in the video field that know everything there is to know about playing video on the web And they'll have you shipping in no time. The thing I'd like to highlight this week is how many options they give you when it comes to streaming? They have three different levels. Andrew: Basic plus in premium. And with the new premium one, you can serve the highest quality video to your customers. For a multitude of new use cases. Andrew: you can stream things like, High-end sports events. And anything that needs that extra bit of quality. But they still have the rest of the range. If you don't want to pay as much all the time. Andrew: So, if you want to learn more about mux and add video to your product faster than you ever thought before. Head over to muck stock. Dot com. Andrew: And with that, let's get back to the episode. Dan: [00:12:18] Challenges and Innovations in NativeWind Justin: Let's talk a little bit about the sort of difference between NativeWend and Telwin. I mean, I think a lot of our listeners will know what Telwin is and be familiar with it, but what, you know, what are the changes that you had to make or how, I mean, why was this necessary to build when Telwin exists in the React Native world? Dan: Yeah. So Native Wind can be thought of. Largely as a giant mapping function, right? Um, you, you have the way styles are handled on mobile in general, which differs from web. Then you also have the fact that react native just sort of does things differently, uh, than say react. Uh, and so you have to account for those differences. Dan: So you have this giant mapping function. That's going to try to translate the. Web descriptors that are coming to us from Tailwind World, right? And you're trying to properly map those to their equivalents on the native level. Um, then the other side of that is addressing the edge cases. And an example of one of those edge cases is, uh, what is it? Dan: REM font sizing and stuff like that is like a very nuanced difference, but it'll throw you off because you'll go into web and the same code you've written in, you know, that's rendering on web is going to be different than on mobile and that'll initially be like, well, I, you know, something's broken here and in fact, that's just an, you know, something upstream in, in react native itself. Dan: So. You're always trying to find what subset of functionality, CSS wise, you want to include in the styling library without hindering performance too much, while simultaneously addressing these edge cases, right? Whereas if you're simply rendering on web, it's just going to serve as a one to one mapping. Dan: And there's no difference there. So working on it then for Mark and myself and any of the other contributors really just comes down to on an abstract level, this balancing act, right? Cause you can't include everything. And if you can't do that, then what do you include and to what extent? And what does that look like? Dan: You know, Justin: so, uh, the things you were talking about adding there were like CSS features, right? Because when you're using tailwind, you have like hovers and all of these other things. So you're talking about like what things you actually choose to implement because those don't exist in react Andrew: native, right? Dan: Exactly. And there's a lot of assumption on like, what does that mean? What does hover mean on native? Right? Um, further, we just included animations and trend, uh, like transitions with version four. Um, What does that look like? Like, how do people interact with animations and what are their expectations? Dan: What does it look like when they chain animations together and what are their expectations there? Are they passing by value? Are they passing by percentage? You know, uh, all of these different kinds of things. It's, it's a perpetual iterative process to try to understand more of the behavioral aspect of what is, what is the experience people are looking for. Dan: And then we double back and we make it performant, right? We make it like something you really want to use. And ideally really can't operate without, then we make it performant. You know, that's, that's kind of our, our approach. [00:15:58] Performance and Optimization in NativeWind Justin: What are the biggest performance issues here? So you've, you know, hinted to, uh, just like rendering performance, trying to replicate CSS like behaviors in a native context, which may require extra steps. But like, what is, what are the other things that are like, what was the biggest bottlenecks? What was the biggest challenges that you had to face? Dan: So I think the biggest challenge, so again, like from contrasting with like working on Tamagui stuff, right. Uh, and again, very, very loose, like I did very little there, but, um, just on a, on a surface level, there isn't really an optimized compiler with native wind yet, at least. Right. And so you're going to native wind is going to do really poorly or perform very poorly on these sort of benchmark tests where you're testing like a thousand, uh, list items or something with a GIF in them. Dan: Right. Um, and, and you can even argue the. What do you call it? The, the efficacy or something, or the, the effectiveness of testing in that way. Um, but we're, we're very much focused, like I said, on creating the proper experience and then doubling back to the performance. Uh, and a lot of that performance suffers simply because in you're including stuff that just doesn't need to be there that isn't being utilized. Dan: Uh, so, or, or perhaps even the output file that you're generating has more text in it, in some key value object than it needs to have a lot of the performance improvements included in version four stemmed from simply like changing, you know, a word starting with D to just the letter D, you know, but there was just many instances of that, you know, So there's minor things like that. Dan: There's larger changes to be had. We're currently working on a more like pure native wind variant, uh, that we see as like the first step in a much more performance library, we have a lot of plans in the coming months that now that we have version four out. We can take those risks, right? We, we have something that we can give people that's more stable that they can use so that we can really get more experimental. Dan: with that performance aspect. Andrew: What is this pure version that you're talking about? How does that change things? Dan: So to be honest, I haven't quite fully read through it. Um, Mark sort of just shared it with me and he was like, here's this thing. And, uh, it includes some of the stuff, right? It includes some of what native wind covers and it doesn't include other things. Uh, he shared it with me as a sort of precursor to something that could be utilized for folks maintaining component libraries. Dan: Right. So like glue stack, if you want it to use native wind as your underlying engine, so to speak, then you don't have to adopt the bloat that would come with it, that you're not going to utilize anyways. And so it's almost like this minified version of the project. Um, I'm pretty sure it might even be public. Dan: So if anyone wanted to look through it, I think it's published under like native wind forward slash native wind dash pure. But the goal is to kind of like dial back and where version four was sort of let's throw a bunch of stuff in here. Um, and then as we add more things, try to make everything work together. Dan: Uh, the pure version is like. Let's introduce, let's, let's introduce a minified version of it so that we can intentionally then layer in the other stuff as necessary. And that way we can control better for any performance hits that you might incur while using it for your projects. performance in React Native inherently is a pretty weird thing. Dan: Cause it already, I mean, React Native by nature is already including a lot of stuff that you just don't need. Um, yeah, it's my journey in native wind has predominantly been one of learning more about bundlers. Um, I think any, any person who jumps into dev tooling is eventually just going to get to that layer and you have a decision to make of, are you wanting, you know, do you want to go deeper into the world of ASTs? You know, I don't know. I don't know what the answer is for that, you know, for me yet, but. It's increasingly becoming like Dan: the thing. [00:20:39] Supporting Different Bundlers Andrew: Have you guys had to like grapple with a bunch of different bundlers? Does NativeWin only like support Metro out of the box or something? Dan: Yeah. Yeah. So I get this question a lot, right? Like you have, right. Cause right now everyone's like, you know, there's all these different bundlers and stuff and you got V and repack and Metro and stuff. And Metro is its own whole thing. Um, that has sort of both the human level, you know, challenge, and then there's like technical challenges. Dan: The reason it was even introduced in the first place is very different than like why the React Native community is using it kind of thing. And so. Native wind supports Metro out of the box. Um, that is our intention. We're going to continue to do that. It's not to say that native wind can't work with Vite or other bundlers for that fact, but we aren't going to offer support for it. Dan: And something that I think about pretty frequently as a maintainer is how do you not just turn people away from that? Because I get that a lot of people who are going to want to use, say, Vite. Are not going to actually be willing to put forth the work themselves in order to make that happen. But there's going to be people out there who are willing and I don't want to turn them away. Dan: Like I'd really, I'd rather this kind of tool set work for as many people as possible. So what does it look like? You know, what, what does it look like to, to empower those people, but simultaneously tell them like, look, we got a lot on our plate. Uh, we can't do all of this. And Metro, by the way. Is not great to support, you know, it's, it's flexibility comes at a tremendous cost. Dan: Um, and a lot of that cost is sweat talent and blood, which is why I respect folks like Evan Bacon as much as I do. I mean, you look at the expo team, the software engineers over there, which I very fortunately had some, you know, I, I had the opportunity to spend some time there. Um, all of us have in our work moments where we don't know what's like a task is put in front of us. Dan: We have no idea how this is going to work. But a lot of the time we do, and we're just executing on work at expo. Every single thing you do is one of those, like you have no idea, like just go figure it out. And it was a weird kind of dynamic to jump into. You know what I mean? Where it's just like, kind of just try it. Dan: Figure It out. And that's why you're here. Andrew: Yeah. It seems like native is a hard platform to develop for. Like I, myself, I'm a web developer, but anytime I've tried to dip my toe in some iOS development, like the docs are just like inscrutable. Like they're everywhere. It seems like there's not enough people tell me to go like watch videos from like keynotes. Andrew: And it just like it, like the OS is a black box and it shouldn't be, and it kind of baffles me. Dan: I struggle with this so much because people will ask me, especially cause I I've had experience. My initial experience with mobile development is native iOS, like objective C and Swift. People ask me like, Oh, what is the best way to build apps? You know? And what do you think of react native? And I'm like, it's shit. Dan: It sucks. It's not great. Like I, I think it's going to be really good in a year or two. Um, and I think that Expo fills in a lot of the gaps, right? Um, but I feel like I've been saying that for quite some time and I'm always reminded of this guy, David, uh, His last name is French and I cannot pronounce it, but he posted a gif to Twitter at one point, which was that scene where from like the Tom Cruise movie where he's in like a mech suit and he lands on the beach, you know, and he's just like trying to survive an onslaught of things that are trying to kill him. Dan: Unless you know what you're sort of stepping into react native is a really tough spot to exist in. Whereas iOS, I'll be it slow. It always felt like there was the supported way to deal with it. Okay. Like realm is better, but core data exists and it's going to exist for a while. So if you know how to use core data, then you're good to go. Dan: Um, I, I have, I experienced an enormous amount of tool fatigue in the JavaScript ecosystem, the react ecosystem and the react native ecosystem. So quickly, like Mark and I were talking about biome the other day. You know, someone on stream mentioned, Hey, have you tried biome? And I'm like, frankly, I don't care if it's better anymore because like, I've been using this stuff for so long that like, I would just be so exhausted to have to try something else. Dan: And it's why I deeply admire tools like Unistyles, if you guys have had a chance to try that at all. Um, Unistyles is really cool by its design because you don't really have to do anything beyond styling in React Native as you normally do. It just empowers you to do more, right? And if you want to rip that out, you're like, this isn't for me. Dan: It's not this whole rigmarole. It doesn't become this month long, two month long project. You just yarn uninstall Unistyles. And for the most part, that's it go use whatever you want, you know? And I, I love that. I want more people to entertain stuff like that. Native wind is not like that. I don't see it becoming like that. Dan: It truly does require you to adopt Dan: a different mode of thinking than React Native provides out of the box. And, um, to sort of circle then back around to, I think, Justin, something you were asking. Is I think one of the biggest challenges of react native in contrast, like if you came into mobile development through react native. Dan: I kind of feel bad for you because it doesn't react native. That is provide a straightforward path by which to understand how to even create that native feeling experience. Justin: Right. And I think that's so much of what is lacking and a lot of the tools that I then build. Small or large are just in an effort to bridge that gap, T [00:26:56] Introduction to Native Wind UI Justin: his is maybe a good time to transition and talk about Native Wind ui. So, uh, two projects are very similar names. Uh, native Wind being the tailwind CSS like thing for React Native and Native Wind UI being, uh, a component library that sort of like leverages native wind to build a native like component experience. Justin: So, uh, what. And was that description accurate and what sort of motivated you to build it? Dan: so there's a meme I think that I made, uh, I think a year ago, I was working on one of these like boilerplate ship fast things, you know, for react native. And as I'm going through, I realized like, Oh my goodness. There's really not a very good library like Tailwind UI to quickly get started in React Native that meets the certain requirements that a native application would have to have, right? Dan: Because it's not enough to just simply mirror Tailwind UI. Um, because the web, unlike mobile, the web has no concept of native feel, right? The entire dynamic is, is fundamentally different. And so. I couldn't find this. And so I decided to make it, but the meme that I made and posted to Twitter was the one where the guy's in bed and the girl's in bed. Dan: And he's like, I bet he's thinking of other women or something. And it's just the guy thinking like, why is there a tailwind UI, but there's no native wind UI. And then that began what I thought was going to be like, Genuinely, I thought it was going to be a three month journey. Uh, there's no way that you could spend more than three months on a component library. Dan: What goes into this stuff? Eight months later, um, not the case. Yeah. So, uh, we finally get it out. And, uh, so, so that was the sort of inspiration behind making native wind UI, um, wherever we were sort of just mapping to native functionality, which I think is if you can do it the best way to do stuff, right. Dan: Do not try to like create. Make JavaScript do stuff. It doesn't need to do just map to the native functionality and Huge credit to Fernando Rojo for sort of like really shouting that message off the top of a of a mountain But we quickly ran up into situations of the shortcomings of where those Bridges or whatever don't exist for either iOS components or just like a lot of Android And so we had to create our own. Dan: And then that spawned the journey of creating like RNPrimitives, which is, you know, an open source library that sits under the hood. Of, um, Native Wind UI and React Native Reusables. Um, and it serves more of the behavioral, right? Because native feel is two, two part. There's the visual aspect and there's the behavioral aspect. Dan: One is the more haptic, how you interact with it, how it interacts with other components. And the former, the visual, is just what it looks like. You know, components look different on iOS and Android. So a lot of our time was spent building out the behavioral layers. And then Native Wind really was filling in the visual layers of this stuff. Dan: Package that with like a theming system that makes sense. That's intuitive. Throw in a CLI that's reminiscent of ShadCN so that people can easily just drop the code in rather than import it from a library. And then just try to create the best docs that you can. And that has been the journey of native wind UI. Dan: I'm really proud of how it's turned out. I, I can think of a million things that I want to do right now to make it better. And we were implementing now like web support, which is its own beast. Um, but yeah, it's a great example of how. understand the shape of the solution that you're trying to build and understand the problem and particularly the problem being faced by people who want to use this and build that and don't try to build something that serves everybody, but just this specific group of people. Justin: I wanted to, I wanted to ask, so you, this is modeled a lot like Tailwind UI. So, um, Tailwind is like, Nortel One UI, I should say, is a phenomenally successful project. Financially phenomenally successful. Uh, and, and as you sort of alluded to building UI libraries, actually, it's a, it's a ton of work. There is really a ton of work getting the details right. Justin: And especially if you're trying to do something like mimic a platform that already exists. Um, And so you have like a monetization layer to this. And I am curious as like how that experience has developed, how it started. Was it really just like, Hey, tell when UI is like making a successful model off this, we should sort of like mirror their model and see if we can also like drive that same success. Justin: Was it like, what was the motivation? And yeah, how's it going? Dan: Yeah. [00:32:06] Pricing Models and Open Source Dilemmas Dan: I, the, the pricing model is actually the part that I probably think about the most now, because I think there's a lot of just sort of on a more abstract, to preface my answer on a more abstract level as an engineer, you go in thinking the whole thing is just build it and you're just fulfilling a task list and then once you put it out there, it'll just be. Dan: Oh, this is what I was looking for. But in fact, there is an entirely different layer to it. Uh, which is the human engineering aspect, right? How do people expect to interface with something? And they're not always going to tell you what that is. So you have to sort of have these sort of objective conversations, object, introduce objective lines of questioning about how they currently do stuff in order to get at the answer in a roundabout way. Dan: Okay. Um, and so for a while, as far as then to actually hone in on the, um, the pricing question, we mirrored the pricing options predominantly for tailwind UI. Um, and we even visually wanted to make it feel similar to those who are coming from the web, but. We can't ignore these sort of differences between mobile and web. Dan: One of them being as an example for web, there's already a million of these component kits, right? Including ShadCN UI. And while it isn't a component kit, traditionally, the maturity of that market is much further along. And so what people can get access to. It's, it's almost like a race to the bottom. You know what I mean? Dan: And so ShadCNUI is only out really then is to be acquired by Vercel, so to speak, and begin to make things like V0, right? Um, mobile just isn't there yet. Like there's not as many. And so you always have to sort of be reminded like, okay, if someone's going to have a problem with paying. What is it? Like 300 in the U. Dan: S. for a library like this. What that probably means is that they haven't really tried to do it themselves yet. And you have to have the patience to let that person go on their journey and not try to accelerate that journey for them. Because for most of the people, and especially the people who purchased the product, when they join the community and we're chatting with them, they're over the moon, you know, if anything, they think the products like cheap relative to what it is, especially on the team pricing plan. Dan: And so you're stuck between people, right. Who. are comparing you to things on the web and people who, uh, pricing wise, that is, and people who have clearly been struggling with this for quite some time, especially the native feel aspect, uh, and see this as like a very cheap, uh, Uh, way to achieve that. Um, not compromising on the quality of course, but relative to how much time they otherwise would have spent on it. Dan: So the question then becomes like, how can you give people more of a hint of what this experience is like? How can you give them a taste of the experience while not giving away too much? And that's hard. Pricing for developer tooling is inherently difficult because your band of audience is very narrow. Um, maintaining then your library is further, like, challenging. Um, I don't know, when I, when I try to think about parallels for this kind of thing, I, I can't help but just go back to the video game industry, and kind of how games used to be, where they had to get things out, you know. There's no over the air update on a PlayStation disc, on Spyro the Dragon, right? Dan: Whatever they were able to get into Spyro 1 is what they're going to get in, and that's going to be the experience, and that's what people are going to remember. Years down the line, um, or like Halo and Halo two, you know, those were not perfect, but iconic, memorable experiences. And I want to try to hang on to that as much as I can. Dan: Like I, I admire that one time purchase. I've introduced recurring subscriptions. I still don't know how I feel about that. You know, I'm kind of curious how you guys think about this, you know, like I'm, I'm very curious to hear what your perception is of all these different things, but it's something that I think about a lot. Justin: It is a conversation we tend to have very frequently on the podcast. It's like, you're doing a thing, most of your work is maybe open source, how do you Make it sustainable. Like, what do you do? Um, so Adam Watham and team have, you know, made Telwind a phenomenal success, um, by, you know, offering layers of stuff, it's, you know, very similar models, like basically give away Telwind for free and then build a lot of like high quality resources on top of that, and, you know, that's what we do. Justin: You know, you'll, you'll get two sides of this. You'll get people coming from, you know, they're used to pulling down an open source library and they get really frustrated that they can't use your thing that they probably wouldn't really stick to anyway because they're not really serious about building a product. Justin: Um, and then you get the people who like, yeah, if I tried to build this myself, it's going to be like tens of thousands of dollars and I'm really not interested in doing that. So, I mean, like you're saying, You know, three months, even if it was only three months, it's like three months of an engineer's time is, is a pretty expensive, uh, endeavor. Justin: So it's like, I'm all for more of these things existing. And I also think that, you know, one of the big things is, especially when you're engaging with an audience. One of the big challenges at open source is you get people who just like drive by and they give you a little feedback or like, they just like gripe at your thing. Justin: Uh, and getting high quality engaged feedback is, is really hard. And you can kind of see the same thing in consulting. If you charge really low prices, like you do consulting with customers who are cheap, your feedback is going to be pretty poor. They're like going to request everything. And the kind of feedback we've heard again and again, it's like, Charge what you're worth, you know, make it like effective to support your business and the interesting knock on effect is you end up getting like better quality. Justin: So, I mean, all that to say is like, I think that this is like completely a valid thing and more people should do it because it's like, You know, as someone who's like potentially thinking about using a library like this to build a product, if I'm coming to it and it's like got a paid feature that I'm more sure that it's going to be around, you know, next year and still be getting updates versus like, you know, an open source library that's maintained by one, you know, person who's like really, really burned out. Dan: Yeah. I, I have a couple of points that, that I really firmly believe and I, and I have that sort of a strong opinions loosely held kind of thing. But one thing I think regarding open source, you mentioned. I do not believe open source has a financial like I've heard a lot of discussions about this is like open source is never going to make money for you, it's, if it hasn't worked for everyone else, you're not special. Dan: Like, it's just not so don't try to make money off of open source. Um, that being said, there is a sort of mixed. Model that you can do where you can leverage open source to serve as a sort of distribution channel. Right. Uh, and, and demonstrate value. Right. Um, and what's funny too, is that you'll see folks as high up as like the, the guy who made homebrew complaining about the same exact thing is like, I didn't even get a cheeseburger or something. Dan: Right. For the work that I did. And I'm like, you did it open source. You chose to do that, you know? Um, equally on the other side of that, people who use open source libraries have a tremendous level of entitlement. Um, and I definitely see this with NativeWind is they'll post, you know, the issues and they'll just be like, how could this not work? Dan: Like this isn't working. This isn't super simple. And I just say it like it is like, look, Post a repro or I don't care, you know, and I was baffled too, because Mark, again, is. Very gentle, giant kind of thing. Like he's one of the nicest people I have ever met in person. I mean, he has that kind of Aussie, like rough around the edges kind of thing, but he's such a kind person. Dan: And, but when I see him in the GitHub comments, the man is like on fire. Like he is a savage on there. He is very harsh. And I was like, is this what like. It was like a Smeagol Gollum type of energy kind of thing. You know, I was like, is this what open source does to people? Um, and I, I feel that it's the ability to maintain a sense of humanity after maintaining a library as large as as Native Wind or more is very admirable. Dan: If you meet anyone who's like still kind and like humane, like while doing that, give that person a hug, like thank that person, cause that's amazing. So, so, so that's certainly one thing. Um, as far as then actual products, if people aren't buying your thing and you have a large enough distribution channel, move on, they don't want it. Dan: They don't want the thing and you need to be okay with that. Um, that's really hard for me still, you know, I have deep passion projects that I really admire that I think are very promising and I have a distribution channel to plug them through and then people just don't respond and I'm like. That's just it, you know? Dan: Um, and you need to have that humility. You need to, you need to sort of check that ego at the door. Uh, that's, that's something you can't even explain to a person. I'm sure you guys run into people all the time who are like, Oh, we just have to do this, like another month or two of work or something. Right. Dan: And then we'll launch. And then this'll, no, no, it won't. Cause if it hasn't popped off in the last six to 12 months, it's absolutely not going to pop off in the next month or two. Um, but marketing is hard and that's, that's really what I'm faced with right now is like, as an engineer, how do you marketing is not, uh, as what do you call it, trackable or quantifiable as engineering time is. Dan: And I can definitely see how an engine, you know, someone coming from that background might get very frustrated with, with, Dan: that dynamic, Andrew: And as engineers, we love fast feedback loops. Marketing is the opposite. It's like you throw some stuff against the wall, some stuff might stick. It probably wasn't because of you and you have to somehow use that information and go forward and like market a product. I I've failed at it many a time. Dan: I still, I mean, like today we had that video launch with Simon, right. And, uh, Simon Grimm is who I'm talking about. He does great videos on YouTube. Um, he, he made this video and I woke up today and I, you know, I got a hand, we got a handful of orders for native wind UI, and I'm still just so thankful for every single order that comes through. Dan: Like it, that's Stripe notification coming through. It has not gone away that the novelty and how much I, I, I appreciate and get excited about each thing like that. So, I, I, I'm not taking any of it for granted just yet. Uh, hopefully, I mean, like I'm, I'm hopeful to be anywhere near the success level of native wind UI or sorry, tailwind UI, that would be incredible. Dan: But I think we got a long way to go before then. And there's maybe some aspect of the formula that we could improve upon, but you know, I'm learning just like everybody else is I'm, I'm curious to see what happens between expo router and native wind, uh, what they offer there. And ultimately I just want, I want the experience of building react native applications to be not easy, but straightforward, I'm fine with painful. Dan: If it means that, you know, this framework is allowing me to do the wrong thing, but it's making it painful to do it, you know, and it'll make it like easy to do the right thing. Justin: So, maybe on that note, uh, as we wrap up, um, we, we always like to ask a, a future facing question, and I think that your lead in here is like perfect. [00:44:50] Future of React Native and Expo Justin: So as you, as you think about the next few years, uh, building apps on React Native, building mobile apps in general, uh, what does that look like in your mind? Justin: What are you excited about for the future? What do you think the big changes are going to be? Dan: I think that React Native overall is in this very interesting spot where they finally started to say what React Native isn't going to do, which in a lot of ways I think is way more significant than trying to do all the things, which is where I think React Native has been for a, for a while, like it's been a lot of time trying to catch up or fulfill a certain spec list. Dan: And they're finally starting to say what they're not going to do. And what that invites folks to do is to create things on top of that foundation in the same way that react did this and spawn things like next JS. And then it's more on companies like next JS. And in our case, like expo to create things like server side rendering, like the whole react server components. Dan: All that jazz. I love that there are people like Nate who are creating new frameworks and doing that hard work of creating different approaches on top of this foundation. Um, so I think we're going to see a lot more of that and I'm, I think a lot of them are going to fail, but they need to exist and on the other side of it. Is going to still be these like third party applications that exist even further beyond, uh, which I think is a massive strength of the react native ecosystem is, is all like the third party community support. What I hope is that we don't lose sight because again, the majority of the mobile developers have already come through, right? The next wave, if react natives community. Or the users of react native is to double is going to come from web. And what I hope we don't lose sight of in that process is the importance of that native feel. Because native is no longer meaning mobile. It means native to a platform. Whether that is macOS, a watch, a TV, Android, you know. Dan: It means so much. And, I would like these, what are currently challenging things to become a lot easier, or at least more straightforward so that people can focus on building meaningful, great applications without having to spend 80 percent of their time focused on how It would look native to its platform. Dan: And so what that's going to look like, very hard to say. I think from the expo side of things, we are going to see expo become a hosting service. They're going to start to host the ability to utilize react server components is going to, it's, it necessitates. a hosting platform alongside it. And so you're going to start to see native development, development overall shift to a different kind of dynamic. And there's not going to be nearly as many questions as there are now. I think it'll get more opinionated and there'll just be a lot of different opinionated approaches to doing this. So where native wind UI or any of the other stuff I plan to build fits into that, I have absolutely no idea. Anybody's guess yours as good as mine, Andrew: Well, every time I talk to a react native developer, I'm always so excited to go try to build something. I am one of those web developers that looks over and goes, Oh yeah, I probably should have created a mobile app for that. Uh, so I'm very excited to try out what you got. I might try it the next time I try to build an app. Andrew: Happy to hook you up with a license. Both of you, if you'd like, uh, it's, uh, always looking for the Dan: feedback. Andrew: sweet. [00:48:48] Conclusion and Final Thoughts Andrew: Well, that wraps it up for our questions, Dan. Thanks for coming on. This is a really fun, interesting conversation diving into the depths of react native. So thanks again for coming on. Justin: Thanks, Dan. Dan: yeah, thanks for having me. ​