How to Get Time using Moment JS React Native

Hello, React Native enthusiasts! Today, let's dive into the world of timekeeping in our mobile apps. I recently discovered a fantastic tool that made time manipulation a breeze in React Native – Moment.js.

In this step-by-step guide, I'll walk you through how to harness the power of Moment.js to easily get the current time in your Expo project.

In this article, we'll get time to use moment js in react native. Also, we will implement a react native to get the current date time. To get time we'll use the fromNow method in react native.

Let's make our apps time-savvy together to implement react native and get time with human readable time.

Assuming you've got Expo installed, kick off your new project with:

expo init TimeDemo
cd TimeDemo

Moment.js is a lifesaver for handling time-related tasks. Install it with:

npm install moment

In your component file, import Moment.js and use it to get the current time:

import React,{useState} from 'react';
import { StyleSheet, Text, View} from 'react-native';
import moment from 'moment'

export default function App() {
    return (
      <View style={styles.container}>
        <Text style={styles.date}>{moment("20201115", "YYYYMMDD").fromNow() }</Text>
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

  text: {
    fontSize: 24,
  },

  date: {
    fontSize: 24,
    fontWeight: 'bold',
    padding: 15
  }

});

Run your Expo app with the following command:

expo start

And just like that, you've mastered the art of fetching and displaying the current time in your React Native app using Moment.js. This library proves to be a handy companion for any time-related functionalities.

You might also like:

• Read Also: How to Get First and Last Day of Month in React Native
• Read Also: How to Add Days in Date in React Native Calendar
• Read Also: How to Create Autocomplete Search in React
• Read Also: Laravel 10 AJAX CRUD Operations With Popup Modal