react-native-intl
react-native-intl copied to clipboard
Using in a render() method?
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>;
}
}