How do you add refs to functional components using

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 component which isn't possible with naked react native.

In Dec 2016 recompose added Allows handlers property of withHandlers to be a factory function but I can't quite figure out how to use it correctly.

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

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} />