I am working on a React Native application where I need the post_date
that I am getting back from a third-party API to not show up as: 2019-05-10 11:26:39
, but instead display: x many days ago
.
I tried installing React-Intl and then implementing it in App.js
like so:
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import {
createBottomTabNavigator,
createStackNavigator,
createAppContainer
} from "react-navigation";
import { Provider } from "react-redux";
import { IntlProvider } from "react-intl";
import store from "./store";
import AuthScreen from "./screens/AuthScreen";
import WelcomeScreen from "./screens/WelcomeScreen";
import MapScreen from "./screens/MapScreen";
import DeckScreen from "./screens/DeckScreen";
import SettingsScreen from "./screens/SettingsScreen";
import ReviewScreen from "./screens/ReviewScreen";
const MainNavigator = createAppContainer(
createBottomTabNavigator({
welcome: WelcomeScreen,
auth: AuthScreen,
main: {
screen: createBottomTabNavigator({
map: MapScreen,
deck: DeckScreen,
review: {
screen: createStackNavigator({
review: ReviewScreen,
settings: SettingsScreen
})
}
})
}
})
);
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<View style={styles.container}>
<IntlProvider locale="en">
<MainNavigator />
</IntlProvider>
</View>
</Provider>
);
}
}
And in my DeckScreen.js
like so:
import React, { Component } from "react";
import { View, Text, Platform } from "react-native";
import { MapView } from "expo";
import { connect } from "react-redux";
import { Card, Button } from "react-native-elements";
// import Moment from "react-moment";
import { FormattedRelative } from "react-intl";
import Swipe from "../components/Swipe";
import * as actions from "../actions";
class DeckScreen extends Component {
renderCard(job) {
return (
<Card title={job.title}>
<View style={{ height: 300 }}>
<MapView
scrollEnabled={false}
style={{ flex: 1 }}
cacheEnabled={Platform.OS === "android" ? true : false}
/>
</View>
<View style={styles.detailWrapper}>
<Text>{job.company.id}</Text>
<FormattedRelative value={job.post_date.toString()} />
</View>
<Text>
{job.description.replace(/<span>/g, "").replace(/<\/span>/g, "")}
</Text>
</Card>
);
}
I feel like I am closer to getting what I want with React-Intl than with Momentjs, but I am getting this error:
console.error: "[React Intl] Error formatting relative time. RangeError: The date value provided to IntlRelativeFormat#format() is not in valid range."
Is my code not formatted properly? Anyone have experience with how to implement FormattedRelative
from React-Intl?
I know I can use toDateString()
to get rid of the timestamp portion 2019-05-10 11:26:39
but when I try to implement it via <FormattedRelative value={job.post_date.toDateString()} />
, I continue to get the same error message.