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 }) => (
    <View>
        <ScrollView ref={onRef} /* ... */>
            {children}
        </ScrollView>
    </View>
)

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)

Answer 2

Another way is to make a class as a ref store:

const Stateless = ({ refs }) => (
  <div>
    <Foo ref={r => refs.store('myFoo', r)} />
    <div onClick={() => refs.myFoo.doSomeStuff()}>
      doSomeStuff
    </div>
  </div>
)

class RefsStore {
  store(name, value) {
    this[name] = value;
  }
}

const enhancer = compose(
  withProps({ refs: new RefsStore() }),
)(Stateless);

Answer 3

Personally I prefer to initiate Ref as a prop

  withProps(() => ({
    ref: React.createRef(),
  })),

And then just pass it to your stateless component

const MyComponent = ({ ref }) => <Foo ref={ref} />