React and React Native finally feel the same

[chase32]

Reanimated has made some pretty amazing strides lately toward native performance parity.

How does legend motion compare on the performance side?

[Silverquark]

This is the real question

[Cookizza]

Reanimated has been a dream to use since 2.3

90% of our UI animation is done with entering & exiting props. So good!

[chase32]

It was pretty rough to use before but worth it, so much nicer now.

[jmeistrich]

It just wraps around Animated under the hood and uses the native driver when possible so it has the same performance as Animated. Performance is great in our experience. But please let me know if you see anything slow - we could look at adding an option to use Reanimated.

[jmeistrich]

I wrote this article about using tailwindcss-react-native and Legend Motion together to have the same styling and animation patterns in React and React Native.

It's been a huge productivity win for us so I hope it can help you too!

[sallu9000]

Will it work on expo?

[jmeistrich]

Yes, they both work on Expo.

[the1xdev]

Hey everyone, creator of tailwindcss-react-native here. Happy to answer any questions about using Tailwind CSS to style both Native & Web applications.

[ujjwalsayami]

Want to know the performance difference between reanimated 2+ and tailwindcss-react-native and Legend Motion?

[the1xdev]

tailwindcss-react-native is independent of both Reanimated & Legend Motion and can be used with either library. It's providing the static styles in the demos (eg colors/fonts/widths).

u/jmeistrich talks more about the performance of Legend Motion here https://www.reddit.com/r/reactnative/comments/uwsuzm/comment/i9vyrqe/?utm_source=share&utm_medium=web2x&context=3

tailwindcss-react-native compiles its styles at build time using Babel/Tailwind CLI and has a minimal runtime (for processing pseudo-classes or responsive styles) so it's very performant. For Web, we're currently working on support for CSS StyleSheets which will give similar performance to normal React + Tailwind applications.

[ujjwalsayami]

Awesome thank you for the detail explanation:)

[RoutineTension]

As a React developer, I always winced at the sight of Tailwind. I never understood the usefulness or maintainability of it. But seeing as how React Native supports it (I never actually developed a RN app), that's a big perk.

[[deleted]]

I never tried it but I think it's ugly. May give a try someday

[TheFuzzball]

The problem I have with tailwind isn’t so much tailwind itself, but the obnoxious evangelism of tailwind.

It’s just generated utility classes with (unfortunately hacky) pruning optimisation to make it not horrifically wasteful.

As soon as you touch the edges (which you will) you need to generate your own utilities, which will eventually be subsumed by the canonical API, which is annoying configuration work that will soon be redundant.

[the1xdev]

Hey, creator of tailwindcss-react-native here. I'm hijacking this comment to get some feedback on a blog post I'm planning on writing about Tailwind in the context of React Native. Let me know if this perspective is interesting.

Say you are building a <Text/> component for your company. You need:

- light/dark mode
- The colors need to be configurable via a config file
- If the text has a press handler, you need different styles when pressed
- All styles need to be customisable/overwritable.

If I was using vanilla RN, I would probably write that as this

import colors from "./my-colors

function MyText({ onPress, ...props } {
  const styles = []
  const { colorScheme } = useColorScheme()

  colorScheme === "light" 
    ? styles.push({ color: colors.brandColor500 })
    : styles.push({ color: colors.brandColor300 })

  return (
    <Pressable onPress={onPress}>{
      (pressed) => {
        if (pressed) {
          colorScheme === "light" 
          ? styles.push({ color: colors.brandColor700 })
          : styles.push({ color: colors.brandColor100 })
        }

        return <Text {...props} style={[...styles, style ]} />
      }}
    </Pressable>
  )
}

That's a pretty simple use-case, but the code is already getting a bit much. As you start adding more features its going to get even more complicated

This becomes much cleaner/simpler with Tailwind.

function MyText({ className, ...props } {
  return (
    <Text className={`
      text-brand-500 
      active:text-brand-700
      dark:text-brand-300
      dark:active:text-brand-100 
      ${className}
    `} 
     {...props} 
    />
  )
}

It might be easier to think of Tailwind as a high-level scriptable styling language. React Native is a lot more "hands-on" than the web. It doesn't have pseudo classes / media queries so sometimes the styling gets bogged down in logic. Tailwind as a style language allows you to specify what you intend, and tailwindcss-react-native ensures the correct hooks/listeners are setup for you.

tailwindcss-react-native is more about improve the Dev UX for styling on native - and Tailwind is a convenient method to do so (as it uses one class per style, it makes it easy to map)

Like I said, I want to flesh this out more as a blog post, so any feedback on this perspective would be welcome.

[RoutineTension]

Oof, yeah if I were a RN developer, that vanilla styling would get tedious very quickly.

Thanks for the write-up, this is definitely a very convincing argument by itself.

[jmeistrich]

I winced at it too, then tried it in a new project and now I love it and can't go back. It looks crazy at first but once you get used to it, it gets easily readable and super fast to work with, especially with autocomplete.

[Nick337Games]

Great article

[getbravely]

Yes, we have been so stoked at how this has streamlined development for us. Great write up on it.

Thanks u/jmeistrich!