How to Get Day Name in React Native

Hey, devs! Ever wondered how to retrieve the day name in your React Native app powered by Expo? Well, you're in for a treat! In this guide, we'll take a stroll through the steps to effortlessly get the day name using Expo's fantastic features.

Whether you're building a calendar app or just curious about the day, we'll make it easy for you. In this article, we'll see how to get the day name in react native using moment.js and get current day name in react native.

So, buckle up as we dive into the React Native and Expo world, unraveling the simplicity of fetching the day name.

Ready to add a touch of time-aware magic to your app? Let's dive in! 🚀🗓️

 Step-by-Step Guide: Getting Day Name in React Native with Expo

If you haven't installed Expo, run the following command:

npm install -g expo-cli

Create a new Expo project:

expo init MyProject
cd MyProject

Install the necessary packages for date manipulation:

npm install --save moment

In your React Native component, create a function to get the day name:

MyComponent.js

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().format('dddd') }</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 project:

expo start

Scan the QR code with the Expo Go app on your device or use an emulator to see the day name displayed in your React Native app.

And there you have it! You've successfully learned how to effortlessly retrieve the day name in your React Native app with Expo. Whether you're displaying schedules, creating reminders, or just satisfying your curiosity about the day, this knowledge will prove valuable.

Happy coding! 🎉📅

You might also like:

• Read Also: How to Get Current Date and Time in React Native
• Read Also: How to Add Shadow to Button in React Native
• Read Also: How to Create Autocomplete Search in React
• Read Also: Laravel 10 Import and Export CSV and Excel Files