Skip to content

Instantly share code, notes, and snippets.

@faustoct1
Last active May 14, 2019 06:35
Show Gist options
  • Save faustoct1/db27c06b65be6f13bcba1c5ac4353999 to your computer and use it in GitHub Desktop.
Save faustoct1/db27c06b65be6f13bcba1c5ac4353999 to your computer and use it in GitHub Desktop.
react native component example
import React, { Component } from 'react';
import { Text, View } from 'react-native';
let moment = null
class Date extends Component {
initAsync = async () => {
moment = require('moment')
}
constructor(props) {
super(props)
this.initAsync()
this.date = props.date
this.state = {
day : null,
month : null
}
}
componentWillUnmount = async () => {
}
componentWillMount = async () => {
}
componentDidMount = async () => {
if(this.date){
try{
let d = moment(this.date)
let whenHappening = d.fromNow()
let date = d.format('D-MMM').split('-')
this.setState({day: date[0], month: date[1].toUpperCase()})
}catch(e){
//silent here.. just doesnt render it
}
}
}
render = () => {
if(!this.state.day||!this.state.month)return null
return (
<View style={this.props.style}>
<View style={{padding:5,backgroundColor: '#f13a59',borderRadius: 0,alignItems: 'center'}}>
<Text style={{color:'#fff',fontWeight: 'bold'}}>{this.state.day}</Text>
<Text style={{color: '#fff',fontSize: 18}}>{this.state.month}</Text>
</View>
</View>
)
}
}
export default Date;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment