[{"data":1,"prerenderedAt":241},["ShallowReactive",2],{"project-29321748":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":43,"post_text":44,"what":45,"said":78,"maker_in_thread":152,"shape":161,"grid":163,"attempts":198,"same_week":203,"maker_shows":34,"maker_hidden":233,"reader_version":234,"card":235},"29321748","Tamagui","React design systems optimized for native and web","title","Show HN: Tamagui – React design systems optimized for native and web","https:\u002F\u002Ftamagui.dev","tamagui.dev","nwienert",1637693964,2021,88,16,589,2533,24,"notable","dev_tools","ui design system","library",[24,25,26,27],"react design system","react native web","cross-platform ui","compile-time styling","debated",-0.159,{"positive":31,"neutral":32,"mixed":33,"critical":34},3,2,1,5,11,{"design":37,"performance":39,"execution":40,"docs":42},{"positive":38,"critical":38},0,{"positive":38,"critical":33},{"positive":32,"critical":41},4,{"positive":38,"critical":38},[38,31,38,33,34,34,38,31,33,38,33,33,33,34,31,38],null,{"problem":46,"audience":44,"pricing":44,"motivation":53,"time_to_build":44,"stack":57,"openness":77,"stage":77,"team_size":77},{"value":47,"source":48,"evidence":49},"Building cross-platform React web and native apps with themes, media queries and good performance is hard","maker",[50],{"id":51,"by":11,"text":52},"29321751","Hey HN, author of Tamagui here. I've been pursuing something like Tamagui for many years now, this is technically my 3rd or 4th iteration on a compile-time optimized UI kit…",{"value":54,"source":48,"evidence":55},"Build apps with less code while keeping performance",[56],{"id":51,"by":11,"text":52},[58,62,66],{"value":59,"source":48,"evidence":60},"React",[61],{"id":51,"by":11,"text":52},{"value":63,"source":48,"evidence":64},"React Native",[65],{"id":51,"by":11,"text":52},{"value":67,"source":68,"evidence":69},"react-native-web","commenter",[70,74],{"id":71,"by":72,"text":73},"29326042","kall","RNW is pretty seamless in that sense. You can freely mix and match RNW components and html up and down the tree.",{"id":75,"by":11,"text":76},"29327078","Good, react-native-web has nice accessibility built in, and we're building off react-native-aria for upcoming components. Long run we're looking to build up a nice set of…","unknown",{"praise":79,"objections":99,"requests":122,"questions":131,"alternatives":143},[80,91],{"value":81,"source":68,"evidence":82},"Performance focus and compile-time optimization",[83,87],{"id":84,"by":85,"text":86},"29323748","bilalq","This looks really neat! Love the focus on performance for mobile. The inclusion of linear gradient is also nice, since I've had to write code that seemed stupidly complex to get…",{"id":88,"by":89,"text":90},"29326204","lab","Love the work on the webpack\u002Fbabel configuration - really streamlined the crossplatform design system process. Do you have any thought on adding animation? So far looking through…",{"value":92,"source":68,"evidence":93},"Useful cross-platform design system approach",[94,98],{"id":95,"by":96,"text":97},"29326044","jfbaro","Looks good! Thanks for making this available to everyone.",{"id":88,"by":89,"text":90},[100,107,118],{"value":101,"source":68,"evidence":102},"Gradient text not rendering in Chrome without -webkit- prefix",[103],{"id":104,"by":105,"text":106},"29323956","Sekhmet","Looks like gradient text isn't rendering properly on Chrome, because it's missing -webkit- prefix on background-clip.",{"value":108,"source":68,"evidence":109},"Client-side errors on the site (undefined value, missing SafeAreaProvider)",[110,114],{"id":111,"by":112,"text":113},"29325550","nudpiedo","not sure what it was supposed to be but by ythe first time ever I've seen this message: > Application error: a client-side exception has occurred (see the browser console for…",{"id":115,"by":116,"text":117},"29336187","danskeren","Happens for me as well when hovering the \"Universal\" text. > Error: No safe area insets value available. Make sure you are rendering `\u003CSafeAreaProvider>` at the top of your app.",{"value":119,"source":68,"evidence":120},"Skepticism about react-native-web",[121],{"id":84,"by":85,"text":86},[123,127],{"value":124,"source":68,"evidence":125},"Animation support (Moti, Reanimated)",[126],{"id":88,"by":89,"text":90},{"value":128,"source":68,"evidence":129},"Interactive component showcase",[130],{"id":84,"by":85,"text":86},[132,139],{"value":133,"source":68,"evidence":134},"How is accessibility supported",[135],{"id":136,"by":137,"text":138},"29327042","notsureifgood","how is the support for accessibility?",{"value":140,"source":68,"evidence":141},"Can DOM nodes mix with React Native nodes",[142],{"id":84,"by":85,"text":86},[144,148],{"value":145,"source":48,"evidence":146},"Dripsy and NativeBase",[147],{"id":51,"by":11,"text":52},{"value":149,"source":48,"evidence":150},"Radix",[151],{"id":75,"by":11,"text":76},{"comments":34,"answered":31,"key":153},[154,155,158],{"id":51,"text":52},{"id":156,"text":157},"29324272","Thank you! > Do you have any plans for something like that? It's a good idea, and in general I think a clear path to generally making frontend much easier so I'll think about it.…",{"id":159,"text":160},"29326224","I use reanimated in the app that Tamagui was born from and am friendly with Fernando, would love to get Moti support. Feel free to reach out to me or chat on the discord.",{"commenters":35,"max_depth":31,"maker_replies":34,"first_comment_mins":38,"lifespan_hours":162},28,[164,166,168,170,174,176,177,178,181,183,186,189,190,191,194,197],[51,38,38,165,11,33],"maker\u002Fneutral\u002Fperformance",[84,33,31,167,85,38],"project\u002Fmixed\u002Fdesign",[156,33,38,169,11,33],"maker\u002Fneutral\u002Fnone",[171,33,33,172,173,38],"29325637","project\u002Fcritical\u002Fperformance","ponyous",[71,33,34,175,72,38],"project\u002Fpositive\u002Fexecution",[88,32,34,175,89,38],[159,32,38,169,11,33],[179,32,31,180,89,38],"29326523","maker\u002Fneutral\u002Fdocs",[104,31,33,182,105,38],"project\u002Fcritical\u002Fexecution",[184,31,38,185,11,33],"29324257","maker\u002Fpositive\u002Fexecution",[187,41,33,182,188,38],"29328203","iudqnolq",[111,34,33,182,112,38],[115,34,33,182,116,38],[95,192,34,193,96,38],6,"project\u002Fpositive\u002Fnone",[136,195,31,196,137,38],7,"project\u002Fneutral\u002Fnone",[75,195,38,196,11,33],[199,200],{"id":4,"t":12,"points":14,"comments":15},{"id":201,"t":202,"points":32,"comments":38},"31470885",1653242047,[204,209,214,218,223,228],{"id":205,"name":206,"points":207,"category":208},"29278180","Pony",693,"consumer_social",{"id":210,"name":211,"points":212,"category":213},"29288618","Cleanvoice",221,"creative",{"id":215,"name":216,"points":217,"category":20},"29305643","Repl (CheerpX demo)",171,{"id":219,"name":220,"points":221,"category":222},"29329610","Ory Kratos",107,"security_privacy",{"id":224,"name":225,"points":226,"category":227},"29284296","WildCard",101,"languages",{"id":229,"name":230,"points":231,"category":232},"29313350","Retrocomputing with Clash",80,"learning_science",false,"v2",{"id":236,"name":5,"line":6,"ai":233,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":237,"top":18,"kw":238,"maker":11,"domain":10,"tier":19,"attempts":32,"strip":239,"url":9,"mix":240,"praise":81,"objection":101,"sub":21},29321748,-0.16,[24,25,26,27],"0301550310111530",[31,32,33,34],1794036613478]