Using in a render() method?

[mikelambert]

So I understand I can construct a translator object and use _ in my render() method without any problems. But I'm confused how I would go about using date/time formatting functions within a render() method, due to their asynchronous nature. I have a proposed solution below, but I believe this results in a flash of "empty data" before showing the real data (similar to the flash-of-unstyled-text in the HTML world), and am curious if there's a better way...a pure JS solution, a la one of the other libraries out there. Thanks!

class TranslatedDate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {translatedDate: null};
    this.translate();
  }

  async translate() {
    const translatedDate = await new Intl.DateTimeFormat('en-US').format(date);
    this.setState({translatedDate});
  }

  render() {
    return <Text>{this.state.translatedDate}</Text>;
  }
}

[taggon]

I think your code will work if you fix these errors:

• this.setState(translatedDate); should be this.setState( {translatedDate} ); or this.setState( {'translatedDate': translatedDate} );
• Missing } after {this.state.translatedDate

And I already showed how to use DateTimeFormat and NumberFormat object here: https://github.com/taggon/react-native-intl/blob/master/Examples/Hello/index.ios.js

Let me know if you have any further questions. :)

[mikelambert]

Sorry, it was written directly without any attempt at compiling. Fixing the syntax errors, I'm sure the code will work.

But as stated in my original message, I believe this results in a flash of "empty data" before showing the real data. The first frame (or two) will show an empty before it loads the formatted-date back from the async call and fills out the with the actual date.

In other words, this library's reliance on native date-time processing (which other i18n/l11n for RN libraries don't use) means it must operate with an async/promise API, and means it's impossible to get a formatted date in the initial render() call. Is this correct? (And perhaps it's worth listing that tradeoff in the docs)

[francisrod01]

The same problem here: https://github.com/taggon/react-native-intl/issues/8