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?
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} />
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);