nativewind v4 dropping soon, this is insane — samuel.fm

Posts Blog Repos About

Samuel

@samuel.fm

nativewind v4 dropping soon, this is insane

Animations (experimental):

NativeWind adds experimental support for Tailwind CSS animation classes, including custom key-frame animations defined in CSS.

The animation functionality is provided by the widely-used react-native-reanimated package, which integrates seamlessly with NativeWind without the need for additional configuration. Just apply an animation style, and NativeWind takes care of the rest.

// Use an existing animation class
<View className="animation-bounce" />

// Or define a custom animation in your .css
@keyframes example {
from { background-color: red; }
to { background-color: yellow; }
}

.my-animation {
animation-name: example;
animation-duration: 4s;
}

<View className="my-animation" />

There is no need to use Animated.View or Animated.Text, NativeWind will automatically create animated version of your components.

8 November 2023 at 2:08 pmView on Bluesky