React-native-animatable: Throws cannot read property of 'getScrollableNode' of null with react-native-elements

[cihadturhan]

I'm trying to make it work with react-native-elements however it throws the following error:

Cannot read property 'getScrollableNode' of null

AnimatedComponent._attachNativeEvents
    AnimatedImplementation.js:1723:34
AnimatedComponent.componentDidMount
    AnimatedImplementation.js:1713:11
<unknown>
    ReactCompositeComponent.js:353:23
measureLifeCyclePerf
    ReactCompositeComponent.js:85:11
<unknown>
    ReactCompositeComponent.js:352:10
CallbackQueue.notifyAll
    CallbackQueue.js:73:21
ReactNativeReconcileTransaction.close
    ReactNativeReconcileTransaction.js:36:25
ReactNativeReconcileTransaction.closeAll
    Transaction.js:222:24
ReactNativeReconcileTransaction.perform
    Transaction.js:163:15
ReactUpdatesFlushTransaction.perform
    Transaction.js:149:19

I looked the code and realize this._component is assigned to null somehow. Here is the simplest code to test:

//...
import {ListItem} from 'react-native-elements';
const AnimatedListItem = Animatable.createAnimatableComponent(ListItem);
//...

class messageListItem extends Component {
    constructor(props, context) {
        super(props, context);
    }

    render() {
        let message = this.props.message;
        return (<AnimatedListItem message={message}/>);
    }
}

messageListItem.propTypes = {
    message: PropTypes.object.isRequired
};

export default messageListItem;

[oblador]

I think this is because the Animated library requires the component to be a class and not a functional component. I think you unfortunately have to wrap your ListItem with an Animatable.View.