Get Current Date With Month And Year in React Native Android iOS

The JavaScript’s inbuilt function Date().getDate() gives us the facility to retrieve Get Current Date With Month And Year in both android and iOS applications on button click. So in this tutorial we would going to get current date using Date().getDate() function, retrieve current month using Date().getMonth() function and current year using Date().getFullYear() function and display inside react native app using Alert dialog.

Contents in this project Get Current Date With Month And Year in React Native App:

1. Import StyleSheet, View, Alert and Button component in your project.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, View, Alert, Button } from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, View, Alert, Button } from ‘react-native’;

2. Create a function named as ShowCurrentDate(). Now we would get current date, month and year using Date() function and store each value into separate Var variable. Finally we would show all values on application screen with – (Dash) into Alert dialog.

Note : We need to +1 to month to show the correct month because by default in react native January starts from 0(Zero).

<br />
ShowCurrentDate=()=>{</p>
<p>      var date = new Date().getDate();<br />
      var month = new Date().getMonth() + 1;<br />
      var year = new Date().getFullYear();</p>
<p>      Alert.alert(date + ‘-‘ + month + ‘-‘ + year);</p>
<p>     }

ShowCurrentDate=()=>{

var date = new Date().getDate();

var month = new Date().getMonth() + 1;

var year = new Date().getFullYear();

Alert.alert(date + ‘-‘ + month + ‘-‘ + year);

}

3. Create a Parent View in render’s return block and add a Button component inside it. Now we would set onPress event on button and call the ShowCurrentDate() function on button onPress.

<br />
render() {</p>
<p>    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>          <Button title=”Show Current Date” onPress={this.ShowCurrentDate} /></p>
<p>      </View></p>
<p>    );<br />
  }

render() {

return (

</View>

);

}

4. Create Style for View.

<br />
const styles = StyleSheet.create(<br />
{<br />
  MainContainer: {</p>
<p>    justifyContent: ‘center’,<br />
    flex: 1,<br />
    backgroundColor: ‘#F5FCFF’,<br />
    margin: 10</p>
<p>  }</p>
<p>});

const styles = StyleSheet.create(

{

MainContainer: {

justifyContent: ‘center’,

flex: 1,

backgroundColor: ‘#F5FCFF’,

margin: 10

}

});

5. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, View, Alert, Button } from ‘react-native’;</p>
<p>export default class MyProject extends Component {</p>
<p>  ShowCurrentDate=()=>{</p>
<p>      var date = new Date().getDate();<br />
      var month = new Date().getMonth() + 1;<br />
      var year = new Date().getFullYear();</p>
<p>      Alert.alert(date + ‘-‘ + month + ‘-‘ + year);</p>
<p>     }</p>
<p>  render() {</p>
<p>    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>          <Button title=”Show Current Date” onPress={this.ShowCurrentDate} /></p>
<p>      </View></p>
<p>    );<br />
  }<br />
}</p>
<p>const styles = StyleSheet.create(<br />
{<br />
  MainContainer: {</p>
<p>    justifyContent: ‘center’,<br />
    flex: 1,<br />
    backgroundColor: ‘#F5FCFF’,<br />
    margin: 10</p>
<p>  }</p>
<p>});