react-nativereact-native-reanimatedreact-native-paper

How to get ref from Button by Paper for Reanimated?


How to get ref from Button by Paper for Reanimated?

My code:

import { Button } from 'react-native-paper';
import Animated from 'react-native-reanimated';
    
    ...
    
    const MyView = React.forwardRef((props, ref) => {
        return <Button ref={ref} {...props} />;
    });

    const MyAnimatedView = Animated.createAnimatedComponent(MyView);

I get an error: Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?


Solution

  • Edit: This is not a direct solution to the problem, but I haven't found any other way.

    Well, I had to write my own component from scratch.

    Something like this:

    import { Pressable, Text } from "react-native";
    import Animated from "react-native-reanimated";
    
    ...
    
    <Pressable>
        <Animated.View style={animatedViewStyle}>
            <Text>Button</Text>
        </Animated.View>
    </Pressable>