React-Moment gives: "Invariant Violation: Text strings must be rendered within a <Text> component"

Question

I've narrowed this down to find that the error occurs only when I try to pass the <Moment /> component as described in the React-Moment documentation. So far, I haven't found any explanations specific to this package and hope someone out there has had a similar issue!

The docs spell out a usage like this:

import Moment from 'react-moment';

// then within the class component:
return (
        const dateToFormat = '1976-04-19T12:59-0500';
        <Moment>{dateToFormat}</Moment>
        );

And I'd like to take a raw date string like this:

<Text>Created {this.props.postDate}</Text>

which is stored thusly: "postDate": "2019-01-31T04:13:31.224Z"

but so far, anytime I add <Moment>{this.props.postDate}</Moment>, whether that be outside of or inside of the existing <Text /> block I get red:

Answer 1

It's in the documentation:

https://github.com/headzoo/react-moment#usage-with-react-native

<Moment element={Text}>{dateToFormat}</Moment>