Hello friends, In today’s tutorial we would learn about React Native Moment NPM package. Many of us heard about this package before or maybe you are hearing about this package now. But this is a very important package and comes with many date format regarding facilities. Now the main purpose of this package is to managing data and time formats in multiple ways, converting data and time to many formats even in the yesterday and tomorrow format. So in this tutorial we would learn about Example of React Native Moment NPM Yarn Package.
Contents in this project Example of React Native Moment NPM Yarn Package :-
1. First of all we have to install React Native Moment package in our react native project. So open your project’s main Root directory in Command Prompt or Terminal and execute below command.
|
1 |
npm install —save moment react–moment |
OR
|
1 |
yarn add react–moment |
Screenshot :-
2. Now we have to install moment-timezone package with moment package. It is used to control Time zone related functions. So again Open your react native project Root directory in CMD or Terminal and execute below command.
|
1 |
npm install —save moment–timezone |
OR
|
1 |
yarn add moment–timezone |
Screenshot :-
3. Now it’s time to start coding for the App. Open your project’s main App.js file and put below code inside it.
Explanation :- In below source code, We’re using Moment package to convert date into multiple formats.
- In first text component we are showing the current date from our mobile system into Month – Date – Year – Hour – Minute – Seconds with AM and PM format.
- In the Second text component we are showing the current Day name like Monday, Tuesday ETC.
- In the third text component we are showing current Date in Month – Date – Year format.
- In the forth text component we are showing current date in Date – Month – Year format.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import React from “react”; import { SafeAreaView, StyleSheet, Text, View } from ‘react-native’; import moment from “moment-timezone”; export default function App() { return ( <SafeAreaView style={{ flex: 1 }}> <View style={styleSheet.MainContainer}> <Text style={styleSheet.text}> {moment().format(‘MMMM Do YYYY, h:mm:ss a’)} </Text> <Text style={styleSheet.text}> {moment().format(‘dddd’)} </Text> <Text style={styleSheet.text}> {moment().format(“MMM Do YY”)} </Text> <Text style={styleSheet.text}> {moment().format(‘DD-MM-YYYY’)} </Text> </View> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 10, alignItems: ‘center’, }, text: { fontSize: 28, textAlign: ‘center’, color: ‘black’, padding: 10 } }); |
4. Now it’s time to explore more of Moment functions. Using the Moment we can easily convert one date format into another date format.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from “react”; import { SafeAreaView, StyleSheet, Text, View } from ‘react-native’; import moment from “moment-timezone”; export default function App() { return ( <SafeAreaView style={{ flex: 1 }}> <View style={styleSheet.MainContainer}> <Text style={styleSheet.text}> {moment(“29MARCH2022”, ‘DDMMMYYYY’).format(‘YYYY-MM-DD’)} </Text> </View> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 10, alignItems: ‘center’, }, text: { fontSize: 28, textAlign: ‘center’, color: ‘black’, padding: 10 } }); |
5. If you’re creating a CHAT based application then this might help you show previous year chats using these formats.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import React from “react”; import { SafeAreaView, StyleSheet, Text, View } from ‘react-native’; import moment from “moment-timezone”; export default function App() { return ( <SafeAreaView style={{ flex: 1 }}> <View style={styleSheet.MainContainer}> <Text style={styleSheet.text}> {moment().startOf(‘day’).fromNow()} </Text> <Text style={styleSheet.text}> {moment().endOf(‘day’).fromNow()} </Text> <Text style={styleSheet.text}> {moment(“20180507”, “YYYYMMDD”).fromNow()} </Text> </View> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 10, alignItems: ‘center’, }, text: { fontSize: 28, textAlign: ‘center’, color: ‘black’, padding: 10 } }); |
6. Now we can use Calendar method to retrieve the Date of previous day, next day and more. See the code example below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import React from “react”; import { SafeAreaView, StyleSheet, Text, View } from ‘react-native’; import moment from “moment-timezone”; export default function App() { return ( <SafeAreaView style={{ flex: 1 }}> <View style={styleSheet.MainContainer}> <Text style={styleSheet.text}> {moment().calendar()} </Text> <Text style={styleSheet.text}> {moment().add(1, ‘days’).calendar()} </Text> <Text style={styleSheet.text}> {moment().subtract(1, ‘days’).calendar()} </Text> <Text style={styleSheet.text}> {moment().add(4, ‘days’).calendar()} </Text> <Text style={styleSheet.text}> {moment().subtract(4, ‘days’).calendar()} </Text> </View> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 10, alignItems: ‘center’, }, text: { fontSize: 28, textAlign: ‘center’, color: ‘black’, padding: 10 } }); |
We have cover most of Moment functions in our this tutorial. But there are a lot more on their official page. You can read them about HERE.
