Navigate back to the homepage

How to get current month name in react native?

Infinitbility
React Native
October 23rd, 2021 · 1 min read
How to get current month name in react native?

Hello Friends 👋,

Welcome To Infinitbility! ❤️

this tutorial will help you to get month name in react native, here we learn to show month name using javascript current date or using moment.js package.

Let’s start today tutorial How to get current month name in react native?

Show month name using months constants

javascript date object provide getMonth() function to get month index number and now we will use this index in months array and show Month name based on date.

1// show month using javascript code
2const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
3const d = new Date();
4let monthName = months[d.getMonth()];

Show month name using moment

For using moment, first we have to install moment package in our react native project. use Below command to install package

1npm install moment --save

Moment provide format functinality to convert current date to show month name.

1moment().format("MMMM");

Show Month name example

On Below example, i have store both ways to get month in state and showing in screen.

1import React, { Component } from 'react';
2import {
3 StyleSheet,
4 View,
5 Text,
6 SafeAreaView,
7} from 'react-native';
8import moment from 'moment';
9
10class App extends Component {
11
12 constructor(props) {
13 super(props);
14
15 this.state = {
16 monthName: null,
17 momentMonthName: null
18 }
19 }
20
21
22 componentDidMount(){
23 // show month using javascript code
24 const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
25 const d = new Date();
26 let monthName = months[d.getMonth()];
27 this.setState({monthName: monthName});
28
29 // show month name using moment
30 let momentMonthName = moment().format("MMMM");
31 this.setState({momentMonthName: momentMonthName});
32 }
33
34
35
36 render() {
37 const { monthName, momentMonthName } = this.state;
38 return (
39 <SafeAreaView style={{ flex: 1 }}>
40 <View style={styles.container}>
41 <Text>Showing month name using javascript code</Text>
42 <Text>{`${monthName}`}</Text>
43 <Text>Showing month name using moment</Text>
44 <Text>{`${momentMonthName}`}</Text>
45 </View>
46 </SafeAreaView>
47 );
48 }
49}
50
51const styles = StyleSheet.create({
52 container: {
53 flex: 1,
54 alignItems: 'center',
55 marginTop: 20,
56 backgroundColor: '#ffffff',
57 },
58});
59
60export default App;

Output

React Native, month name, moment, Example

Thanks for Reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to check array is empty or not in react native?

How to check array is empty or not in react native?

Example check array is empty or not in react native

October 20th, 2021 · 1 min read
How to add object in array Javascript?

How to add object in array Javascript?

Example of add object in array, in javascript, React, React Native, vue, node, deno, typescript and all javascript framework.

October 19th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]