--- title: "useNativeDriving with React Native" url: "https://www.bekk.christmas/post/2018/21/usenativedriving-with-react-native" authors: ["Hannes Waller"] published: "2018-12-21" updated: "2024-11-07T13:05:28Z" language: "en-US" type: "article" tags: ["React"] --- # useNativeDriving with React Native Animations are awesome. Make sure they are as smooth as they can. ## In short `useNativeDriver` lets React Native animations run on the UI thread instead of the JS thread, which can make them smoother when the JS thread is busy. It works for non-layout properties like transforms and opacity, but not for layout-related properties such as position or flexbox styles. - **For:** React Native developers using the Animated API - **Good to know beforehand:** Basic React Native and Animated API knowledge _AI-generated_ I love React Native. It might have its flaws, but it's the most fun I've had developing. This short write up is an introduction on **how to make the most out of your animations with** **`useNativeDriver`**. If you're already a somewhat seasoned React Native developer this probably won't be news to you. Animation in React Native is usually fairly straightforward. This article is about the Animated API, which ships with React Native. There are some cool alternatives, like Reanimated from [Expo](https://github.com/expo/expo), which extends Animated. And then there's [Lottie](https://github.com/react-native-community/lottie-react-native), [Pose](https://popmotion.io/pose/) and a bunch of other exciting things. But lets get back on topic. ## How to use it? As you might know, most of the stuff going on in React Native occurs on the JS thread. While this works well most of the time, it might get clogged by things going on in your app, resulting in it being unresponsive and/or slow. That's where `useNativeDriver` might come to the rescue. In short it tells the app to run said animation on the UI thread instead of the JS thread. In other words, it runs in the world of native, which offers higher performance and you don't have to worry about the JS thread being blocked by something else. There are some limitations though. For instance, you can only use it while animating on non-layout properties. So `transforms` and `opacity` are fine, while `position` and flexbox properties aren't. The only thing you need to do to actually put your animations on the UI thread is to pass `useNativeDriver: true` to your animation properties. Like so: ``` Animated.timing(this.awesomeAnimation, { toValue: 1, duration: 250, useNativeDriver: true, }).start() ``` And that's it. ## Unsure whether or not you have a problem? Running animations on the JS thread can be perfectly fine. I tend to use `useNativeDriver` whenever I can, but you certainly don't _have_ to. An easy way to determine if you might have a problem is to bring up the developer menu in your simulator. Just press `CMD + D` for iOS or `CMD + M` for Android. If running on an actual device just shake it like a somewhat fragile maracas. If you got the developer menu showing, tap or click the `Show perf monitor` option you'll see this: ![Showing the perf monitor](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/fb5a3d563843abcce92109f33d6f809475c34456-1104x373.png) If you use your app now you might see the frames per second jumping up and down. If the JS thread keeps dropping frames you are most likely doing too heavy lifting here, something that `useNativeDriver` might help you to solve. ## Relevant resources recommended by the author - [Using Native Driver for Animated](https://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated)