How to do responsive design like twitter does?

[lifeiscontent]

I saw your post on how you have 0 media queries in twitter @necolas

I was wondering if you could give an example of how that works.

[necolas]

Sure. You can rely on onLayout to respond to changes in the layout of individual elements; this is more like "element queries": https://codesandbox.io/s/l5mxv6v59z. Or you can listen to viewport dimension changes using Dimensions which is much more like media queries. And even use matchMedia in JS if you want to rely on CSS media queries for web for whatever reason.

[lifeiscontent]

@necolas and what about for hover/active/focus/etc styles?

or for example, I have a Nav, and a NavLink and I'd like to do something like

<Nav variant="primary">
  <NavLink to="/something">Something</NavLink>
</Nav>

with the following features

• being able to switch between light/dark modes
• having NavLink receiving the variant from its parent

how is something like this done at twitter? I'd imagine you have similar requirements

[necolas]

Switching between themes is an unrelated problem. You can do that using React context, or CSS variables, or other equivalent mechanisms.

Having NavLink receive a variant from its parent also seems like something you can do with props or context. Depends on what you're trying to do.

Active states are provided by the Touchable* components. Hover can be done using the hover recipe linked to in the README docs. Eventually we'll have a single component that provides a convenient way to customize styles and render tree in response to hover/focus/press.

[lifeiscontent]

@necolas ok great, just out of curiosity at twitter, do you use variants? how do you handle styling sub-components in this case? The product you've been building is very impressive and rather than fumbling around in the technology to find something that works for all these different cases I'd love to hear more about your learnings / how-tos.

[necolas]

What do you mean by "variant"? This is all just React so nothing there has changed. (And I don't work at Twitter anymore)

[lifeiscontent]

@necolas variant meaning a (Primary / Secondary) Tweet Component. So for example maybe the primary has blue author text so if I say something like

<Tweet variant="primary">
   <TweetAuthor>@necolas</TweetAuthor>
</Tweet>

<Tweet variant="secondary">
   <TweetAuthor>@necolas</TweetAuthor>
</Tweet>

the TweetAuthor might get styled differently depending on the variant applied to the Root Component.

[necolas]

You mean by CSS and some magic selector that breaks the encapsulation of your components? No, that's not possible. Stick to idiomatic react patterns and do it via props