Mark Lawlor
@mark__lawlor
Followers
1,432
Following
178
Media
35
Statuses
419
Explore trending content on Musk Viewer
Ricardo
• 343532 Tweets
Mariana
• 283895 Tweets
Arath
• 247067 Tweets
#LaCasaDeLosFamososMexico
• 187895 Tweets
#RakshaBandhan
• 128661 Tweets
#रक्षाबंधन
• 82963 Tweets
Mayito
• 59558 Tweets
連休明け
• 53489 Tweets
休み明け
• 52432 Tweets
Sian
• 28413 Tweets
青森山田
• 26343 Tweets
小林鷹之氏
• 26110 Tweets
神村学園
• 18239 Tweets
Happy New Week
• 16543 Tweets
PRABOWOkerja UNTUKrakyat
• 15520 Tweets
Carlyn
• 15355 Tweets
京都国際
• 14880 Tweets
KOMPAKbersama BANGUNbangsa
• 14783 Tweets
Mildom
• 13863 Tweets
ハッピーセット
• 13706 Tweets
カミガタ
• 12541 Tweets
セブン&アイ
• 12449 Tweets
セブン買収
• 12266 Tweets
大社の応援
• 10409 Tweets
買収提案
• 10085 Tweets
🔥CSS powered animations in React Native 🔥
A glimpse into a possible future where cross-platform animations are this simple!
Running in Expo Go. Powered by Reanimated
20
41
306
I'm super excited to announce that I've joined
@expo
! 🎉🎉🎉I'll be focusing on the web platform and ensuring that Expo users have the best multi-platform development experience!
I can't wait for everyone to see what we have planned, make sure you checkout App.js Conf!😉
26
11
272
Coming soon, NativeWind v4 brings a significant enhancement to the native styling experience. With CSS variables, media and container queries your applications can now be more dynamic and responsive.
Demo:
Explore the new features and capabilities👇
15
22
234
tailwindcss-react-native is a preprocessor that brings the utility of Tailwind to React Native. Styles are compiled at build time w/ small runtime resolving dynamic styles.
Works with both
@expo
and vanilla RN!
Star on Github & try it out:
#reactnative
8
30
162
Meta's StyleX is coming soon, so I tried the preview release - but doesn't have full React Native support! 😢
Luckily that was an easy fix 😜
Congrats
@naman34
on the library - I'm looking forward to the full release.
2
8
145
In NativeWind v4 this is simply:
<Pressable className="active:opacity-80 ripple-[
#333
] ripple-borderless" />
Have you created your own cross platform PressableOpacity component?
9
1
58
15
10
137
Just finished a huge NativeWind v4 refactor to remove the last React 'hacks'. This has taken much longer than I expected.
Fingers crossed the testing goes well and I can get a release our shortly.
11
1
121
Welcome to my new tailwindcss-react-native enthusiast followers 👋
Since I've started with RN I've wished for two things
⚡️Fast development/prototyping
🌐Universal applications
I hope my lib makes these things a reality for you.
Keep an eye here for more news and updates!
3
5
63
NativeWind looks🔥with "react-strict-dom"
🚀 This is universal React with the new "react-strict-dom" by
@Meta
(experimental):
◆ Light-weight, web-first API
◆ Truly native components on each platform
◆ No div-soup on web
◆ Fully accessible/indexable primitives
◆ Can be used with Tailwind CSS
40
170
1K
3
0
70
This year has been wild and I still can't believe I'm on the team making this happen 🔥🔥🔥
5
3
57
Just a heads up that NativeWind isn't part of the
@expo
event. A release is on the way and I'll have details soon.
5
0
54
Want to blow people's minds?🤯
Have different duration & easing for the in/out😉
`duration-500 ease-out active:duration-200 active:ease-in-out`
15
33
338
4
2
51
Testing other styling frameworks with React Native. This time its
@panda__css
!
No video, only the basics are working. I need to update the CSS parser to support CSS imports & layers, and fast-refresh isn't great.
But I'm happy its possible - what other frameworks should I test?
3
3
42
Great video demonstrating API routes. API routes are not just about giving your app a back-end, they give SaaS companies a uniform interface for their React SDKs. And chat immediately mention tRPC😀API routes give more freedom to RN devs to pick the best tool for their needs
2
1
41
Bikeshedding on the name: <native.div /> would have been nice, or even just <react.div />.
I do think 'html' is going to turn away unaware developers
i don’t envy anyone trying to explain to iOS-only/Android-only developers that the <html.div> they’re seeing in the code is ACTUALLY native 🥲
5
1
148
4
1
38
React Native 🤝 vanilla-extract
4
1
33
tailwindcss-react-native now has (basic) support in Expo Snack 🎉🎉🎉
The TW compiler doesn't work inside snacks, so I've published a set of precompiled styles. Only base TW styles are available right now but I'll be adding more soon!
Happy prototyping
2
4
32
Some insight into new NativeWind runtime (v2 of tailwindcss-react-native, it's getting a rename!)
Our big feature is that we compile TW to native styles, but what does that actually mean? Let's take a deep dive... 🧵
3
3
29
Important Update: In NativeWind v4, 'className' is no longer altered at compile time but is instead passed down as a prop. This enhancement allows for compatibility with any className management library, such as CVA, providing you with greater flexibility and control.
3
1
28
This one is simply:
<Pressable className="active:opacity-80 transition duration-[50ms]" />
2
1
28
Tailwind CSS is not required, its simply my preference. Writing raw CSS is a placeholder API until we develop a better interface.
This is a technical proof-of-concept still under development🙂
2
0
27
I've revamped the tailwindcss-react-native compiler with dynamic theme values and runtime classes 🎉
Coming soon:
- Extending TW config per platform
- platformColor() theme values
- vw/vh units
Do you wish RN had simpler styling? Let me know what features you'd like to see!
3
1
21
There's a subtle difference between this example and the NativeWind className one. If there is a 3rd party library you like but you wish it was animated - just pass it the animated className. This inversion of control allows NativeWind's styling to be very flexible
1
0
21
Full code using Tailwind. Tailwind is the "placeholder" API, but this is also designed to work for component libraries using props and/or StyleSheet.create-like APIs
3
0
19
Expo Router🤝NativeWind. They now seamlessly integrate making the creation of universal applications simpler and more efficient. Build for web and your ready-to-deploy! Static rendering + CSS styling, controllable via CSS variables 😍
2
0
18
Variant support in NativeWind 3.0
Still testing this idea, let me know what you think!
3
0
18
Playing around with modern CSS features in RN!
Demo is ios/android only & very experimental
1
0
17
Catching up on
@appjsconf
this morning. The talks about the new RN architecture & Native Modules have given me a💡moment on performance improvements for tailwindcss-react-native.
Going to prototype a new runtime that takes full advantage of these features.
1
0
17
If I understand this correctly, it should already work with NativeWind🤔
You will just need to ensure the typewind babel plugin runs before the NativeWind one.
Introducing a library to make tailwind DX so much better...
typewind ✨
The magic of Tailwind combined with the safety of Typescript
72
176
2K
3
0
16
If people are not familiar with universal react:
@swyx
has an article on it's advantages
And recently the tooling has been greatly improved by
@expo
and
@FernandoTheRojo
's
0
5
16
There's actually a lot to process with "react-strict-dom" 🤯
I'm going to be focusing on releasing v4, but afterwards I'll improve the strict-dom support (e.g removing unneeded polyfills)
2
0
19
Flex Gap & Pointer events!
React Native 0.71 is now available!
This is a feature packed release 👇
43
387
2K
1
0
16
@jamonholmgren
You can also create the context with a default value of your store.
const StoreContext = createContext(initializedStore)
const useStore = () => useContext(StoreContext)
Has the same output, but also provides the option to override with a custom store using StoreContext.Provider
3
0
14
Do people like this API? Ignore the `useStyles()` hook you could just use the className obj directly.
This is possible now, the helper just isn't exported.
@whichqudus
I like using Tailwind and I've even used it on my blog. It really speeds up the development process. But, I've never used NativeWind.
Looking at the docs, it seems like it combines Restyle and Styled Components. With a Babel plugin, it looks cleaner.
However, I'm not a fan of
1
0
1
11
0
16
@FernandoTheRojo
casually dropping hints about a coming-soon collaboration
A common question: How does tailwindcss-react-native work with Solito
The answer: You should watch
@FernandoTheRojo
talk today at
@appjsconf
😉
1
0
15
And a whole bunch more. Over the next couple of days I'm going to be talking about these features in more depth and talking about what they fix and now allow. Reply here if you've got any questions
1
0
15
Back home with some some new bling💍- ready to get back to work
6
0
14
@gabimoncha
My goal is to give RN better core concepts like style variables, a Stylesheet API that allowed for media/container queries, better units (viewport, calc, env(), etc). If these primatives are established, then component authors no longer need to write both components& styling.
2
0
13
We'll flesh out documentation for this👍This isn't a new issue, its the same specificity issue that Next.js users may encounter.
Tailwind-to-stylex is a great alternative to twnrc. If you only use a subset of Tailwind CSS, this could be a great fit
Using Tailwind would break some of the styles in RN.
Tailwind-to-stylex can help!
3
1
9
1
0
14
Style specificity now changes the ordering of styles, making native & web consistent. Modifiers now work as expected and the important modifier allows you to override inline-styles.
1
0
12
Thank you
@LegendAppHQ
for the shout-out in their latest blog post! Check out their demos to see clean universal components - styled by tailwindcss-react-native 🌟
Writing an app that runs on both Native & Web has never been easier 🎉🎉🎉
1
1
12
Correction: this will be in the next release. Turns out it was a minor change to get working 🎉
0
0
13
@wcandillon
@sebastienlorber
@natebirdman
@mo__javad
@JNYBGR
Idea prototype:
Covers some basic scenarios:
2
0
12
Folding phones, split-screen apps, app clips, and native apps running on desktops and TVs🤯Responsiveness is crucial. Container Queries style components based on the dimensions of a parent container, ensuring adaptive and elegant designs across all devices and screen sizes.
1
0
11
Thank you
@danscan
and the team at
@genesisxyz
for sponsoring NativeWind! A small gesture like this means the world to me. Love this community🥰
2
0
11
We don't yet support arbitrary groups, but a limited version using a className or attribute selector is on the roadmap.
1
0
12
The "How can we improve React Native" survey is becoming very split between "improve RN features" and "improve RN styles"
2
0
10
@jpudysz
Just like CSS-in-js on the web, RNW libraries should preprocess their styles into static CSS files. RWN v20 has a new rendering system where StyleSheet.create is a noop, so apps with 100% preprocessed styles can skip shipping the RNW runtime compiler.
2
2
10
Back home! I escaped the Brissie storms & floods by road trippin into central NSW. Now to catch up on everything I planned to do over the break...
1
0
10
Thank you
@sebastienlorber
for the mention in This Week In React!
If your not already subscribed, I highly recommend it. It's a great source of React + React Native news.
@remix_run
@ryanflorence
@kentcdodds
@eggheadio
@nickjsiii
@mattgperry
@seancdavis29
@remotion_dev
@storybookjs
@mshilman
@LocatorJS
@_MichaelMusil
@tannerlinsley
@GatsbyJS
🧵 TailwindCSS-React-Native by
@mark__lawlor
Great cross-platform styling integration 👌
- mobile: use a Babel plugin (optional)
- web: just forward className to React-Native-Web element
Looking forward to try this
2
5
34
1
0
9
NativeWind got⭐1.5k in < a year, but didn't make the list. They only tracked NativeWind since Oct, so any project added in the second half of the year is just ignored 🫤
The 2022 JavaScript Rising Stars have just been released!
The success story of the year is Bun, congratulations
@jarredsumner
Special thanks to our guest writers:
@antfu7
@sebastienlorber
and
@leeerob
0
17
71
1
0
9
this is valid code...👀
(I don't expect people to write CSS for React Native, but it does work...)
2
0
9
@MasoDev4u
That will be supported by the end of the week. I'll publish a new package that you can import once that will give className support to the Expo Router navigators.
2
0
9
Tailwind docs on `group`, including giving them explicit names
1
0
9
What do people think about
@expo
experimenting with Metro for React Native Web? Most web projects end up customising their build tool with extra plugins, but web libraries have zero support for Metro.
I would prefer Expo supporting Webpack 5 over Metro.
1
0
8
@dan_abramov2
@DanStepanov
Repeating what I said to Dan, NativeWind is in the "make it work" stage after which comes the "make it fast". This will involve up-streaming work and/or rethinking solutions. I'd like to solve these problems for all of RN, not just NativeWind. Just need to take one step at a time
1
0
8
How are people debugging React Server Components? Are you using two inspectors, or is there someway to unify the debugging experience?
2
1
8
@wcandillon
@Baconbrix
@FernandoTheRojo
Conceptually I like the idea however I see html.div as an escape hatch for web and not View 2.0
0
0
7
This is a ~30min hack w/ just the dev-server implemented. It doesn't have production or Metro web bundling
StyleX currently code for RN support but its missing advanced features such as animations/pseudo classes/etc. I'm unsure if these are planned.
0
0
8
Does anyone have an example of a good React Native component benchmark suite? I'm looking for some inspiration for what people consider good benchmarks, especially for
#reactnative
0
1
8
Got a NativeWind question or just want to say hi 👋
Join us @
0
0
7
@jacobmparis
@jamonholmgren
@housecor
These are not proper examples, but .catch() returns a new promise with its returned value. Now result can either be the resolved value of getThing() OR undefined
When mixing await with catch(), you always need to be mindful of the return value of catch()
1
1
7
@axeldelafosse
from
@Showtime_xyz
literally open sourcing the Universal Design System while on stage at
@appjsconf
🤯
Checkout the repo here:
So how are they able to create their universal components? Maybe this screenshot can reveal the secret sauce 😉
1
0
7
@Brunowgarcia
There's a pinned issue on the project status and the v4 branch is actively being worked on
1
0
7
@necolas
If RN wants to grow to more platforms, people need to be educated now to develop components that are accessible on different platforms.
Additionally component frameworks need to embrace the growing platforms and support them as well.
0
0
7
@natebirdman
Or the benchmark only tests rendering 1000 views and never tests rerendering or user interaction 🤷♂️
0
0
7
@natebirdman
@kudochien
For the curious: NW uses different style resolution between web & native. Native styles resolve right to left while web uses CSS priority, 'm-5 m-3' will resolve differently. This is niche, as tools (eg prettier) will fix this. Next version of NW you can customise the behaviour
2
0
7
@natebirdman
@axeldelafosse
@tamagui_js
@Antonwester5
@magnemg
@FernandoTheRojo
Would you be open to talking about it in DMs or on discord? I won't argue against your views or anything - I would actually just like to receive the feedback
1
0
7
Coming back from Christmas break, here's a sneak peak at work I'm working on 🫣
1
0
7
@anshnanda_
Initial release will intentionally be missing some performance related code, just aiming for a release right now. Aiming for slightly better performance than current NativeWind.
2
0
6
@sebastienlorber
@wcandillon
@natebirdman
@mo__javad
@JNYBGR
Maybe just wait a little bit, I'm working on an improved version and I also want to do some benchmarks to prove it works as claimed.
1
0
6
Static styles: The simplest styles.
People often say there are no perf benefits to StyleSheet.create, but this only applies to ios/android! Community platforms do provide StyleSheet optimisations. I still believe in the 'Many Platform Vision'.
1
0
5
@iannery_
Something new. This doesn't need Tailwind as its transforming the raw CSS.
Transforming raw CSS is placeholder for now. We won't support the entire CSS spec so after the runtime has stabilised we need to develop a new API (CSS-in-JS?) or DSL (new language like SASS?)
0
1
6
Hopefully that explains some of the magic behind NativeWind. The runtime is simply enforcing these rules and caching results.
Lets a lot more work to be done, but I hope to have a release candidate soon, stay tuned!
0
0
5
I'm thinking of adding a hook to NativeWind which works similar to the 'tw' function from other libraries. However this hook cannot accept every Tailwind class. eg. no modifiers / group / state
What would you call this hook? useTailwindSubset?
4
0
6
I'm not sure if this is because more web developers are moving to RN or because RN is stable enough that people are focusing on more DX/styling featuresy
0
0
5
@janaagaard
Lets see if I can explain in one tweet 😄
- Parent View turn into Pressable
- GroupContext.Provider is inserted
- Child View adds a listener to the parent onPress handler
- Child View -> Animated.View
- style -> useAnimatedStyle()
- Child View keeps track of opacity sharedValue
1
0
5
@jullerino
@Baconbrix
@Meta
RSD implements a new layer of style inheritance
So if you use `cssInterop(html.div)`, then the styles should cascade
0
0
5
@jmeistrich
@nishanbende
Yep I saw this. Might pick up 1-2 tasks if I get the time. Altho I'm really waiting for the flex gap PR to be merged...
1
0
5
@natebirdman
@kpmdev
@Baconbrix
React Native would need to implement this during the style-flattening stage otherwise animated components wouldn't work as expected. You also need React Context to track subtrees. I believe you have to process this in JS. How do you see this working otherwise?
1
0
5
@realRobSchilder
@zag_js
@ark_ui_
@tamagui_js
NativeWind is a styling library and is unrelated to the topic of behavioral libraries. I'm simply saying that tamagui headless mode could be a bit more headless. This is a preference and not a critique
1
0
5
@andrioid
@jamonholmgren
Turns out the web improved a lot in the (nearly) 9 years since the View/Text API was released.
The DOM apis are clean & people have moved away from CSS-in-JS, as plain CSS is now good enough.
3
0
5
@astahmer_dev
@panda__css
Its using the same compiler & runtime as NativeWind v4
Its undocumented and frequently changing, so not quite ready for public use yet.
1
0
5
@cedric_dev
@robertherber
@Baconbrix
@expo
Our first goal is to ensure popular libraries like tRPC work correctly. Later we can start exploring options such as types for fetch().
0
0
5
2
0
5