How do you add refs to functional components using withHandlers in Recompose and call ScrollTo on a ScrollView?

Question

My specific goal is to use the ScrollTo method of a ScrollView but maintain functional component structure.

More generally this requires getting ref to the current compo

Answer 1

You can try something like this:

/* ... */

const MyView = ({ onRef, children }) => (
    
        
            {children}
        
    
)

export default compose(
    withHandlers(() => {
        let myScroll = null;

        return {
            onRef: () => (ref) => (myScroll = ref),
            scrollTo: () => (value) => myScroll.scrollTo(value)
        }
    },
    lifecycle({
        componentDidMount() {
            this.props.scrollTo({ x: 0, y: 100, animated: true })
        }
    })
)(MyView)