Skip to main content
Version: 3.x


useAnimatedRef lets you get a reference of a view. Used alongside measure, scrollTo, and useScrollViewOffset functions.

You need to pass the object defined using useAnimatedRef to the ref property of a component.


import { useAnimatedRef } from 'react-native-reanimated';

function App() {
const animatedRef = useAnimatedRef();

return <Animated.View ref={animatedRef} />;

Type definitions

function useAnimatedRef<T extends Component>(): AnimatedRef<T>;


useAnimatedRef doesn't take any arguments.


useAnimatedRef returns an object with a current property which contains an instance of a component.


export default function App() {
const animatedRef = useAnimatedRef<Animated.View>();

return (
<View style={styles.container}>
onLayout={() => {
// Returns a reference to the component
const component = animatedRef.current;


  • You can use useAnimatedRef to reference not only the Animated versions of components, but any React Native component.

  • The value stored in the current property becomes available after the component is mounted.

function App() {
const animatedRef = useAnimatedRef();

console.log(animatedRef.current); // 🚩 Returns null

useEffect(() => {
console.log(animatedRef.current); // ✅ Returns the component
}, []);

return <View ref={animatedRef} />;

Alternatively, you can get the value stored in the current in event handlers or in a onLayout property.

  • The value stored in the current property isn't available on the UI thread.

Platform compatibility