How to capitalize a Moment component in React-Native

Question

I have the following component:

<Moment element={Text}
        format="MMM DD, YYYY \at h:mma"
        style={dateStyle}
>
    {this.props.updateDate}
</Moment>

It's currently ouputting something like Jan 01, 2017 at 12:53pm , but I need it to output JAN 01, 2017 AT 12:53PM instead.

Normally you would use {string.toUppercase()} to achieve this, but I'm having issues figuring out how to get at the output.

Any help would be greatly appreciated. Thanks!

Answer 1

At the time I responded initially in 2017, I was wrong to suggest that one could simply use the CSS text-transform: uppercase . React-Native doesn't use traditional CSS, but uses JavaScript to add styles .

At the time, this was not supported by React-Native. I should have deleted the answer.

However, since then, the Text Component style property now supports:

textTransform: 'uppercase'

https://facebook.github.io/react-native/docs/text#style

Answer 2

Create your own UpperText component and pass that to Moment as element . In your UpperText component, apply toUppercase() to its string child and return Text with the uppercase text.