Breaking News: Grepper is joining You.com. Read the official announcement!

react native package date

Sore Sardine answered on December 16, 2022 Popularity 6/10 Helpfulness 1/10

answer react native package date

react native package date

Comment

######### All Package 

##### Date Time
### npm i date-fns

## Usage

# create new file ( Component )

# ------

import React from "react";
import { Text ,View} from 'react-native';
import { parseISO, formatDistanceToNow } from 'date-fns'

type Props = {
    timeStamp: string
}
const TimeAgoComponent = ({timeStamp}: Props) => {

    let timeAgo = "";

    if (timeStamp) {
        const date = parseISO(timeStamp);
        const timePeriod = formatDistanceToNow(date);
        timeAgo = `${timePeriod} ago`; 
    }

  return (  
     <View style={[]} > 
       <Text style= {[]}> {timeAgo} </Text>
    </View>
  );
}

export default TimeAgoComponent;

# ------

## Initial Data ( postSlice.ts )


import { createSlice, nanoid, PayloadAction } from "@reduxjs/toolkit";
import { sub } from "date-fns";
import { RootState } from "../../app/store";

type PostState = {
    id: string,
    title: string,
    content: string,
    userId: string,
    date: string
};

const initialState: PostState[] = [
    { id: '1', date: sub(new Date(), {minutes: 10}).toISOString(), title: 'บอย Learning Redux Toolkit', content: 'I have heard good things', userId: "" },
    { id: '2', date: sub(new Date(), {minutes: 5}).toISOString(), title: 'กฤตบวร ทวียศศักดิ์ Slices.....', content: 'The more I say slice, the more I love it', userId: "" }
];

const postSlice = createSlice({
    name: 'posts',
    initialState,
    reducers: {
        postAdded: {
            reducer(state, action: PayloadAction<PostState>) {
                state.push(action.payload);
            },
            prepare(title: string, content: string, userId: string) {
                console.log(`User Id: ${userId}`)
                return {
                    payload: {
                        id: nanoid(),
                        title,
                        content,
                        date: new Date().toISOString(),
                        userId
                    }
                }
            }
        }
    }
});

export const selectAllPosts = (state: RootState) => state.posts;

export const { postAdded } = postSlice.actions;

export default postSlice.reducer    

### --------

## Display. 



const PostLists = () => {
    const posts = useAppSelector(selectAllPosts)
     
    const orderedPost = posts.slice().sort((a, b) => b.date.localeCompare(a.date));

    return (
        <View style={[{ flex: 1 }]} >

            <View style={[{ flex: 5, }]}>

                <PostForm />

                <ScrollView contentContainerStyle={{ flexGrow: 1, zIndex: -200}}>
                    <View style={[{ paddingVertical: sc.body,  zIndex: -1  }]}>
                        {orderedPost.map((e) => <Post key={e.id} date={e.date} title={e.title} content={e.content} userId={e.userId}/>)}
                    </View>
                </ScrollView>
            </View>
        </View>
    );
}

export default PostLists;

Popularity 6/10 Helpfulness 1/10 Language typescript

Source: Grepper

Tags: date package react-native typescript

Link to this answer
Share Copy Link

Contributed on Dec 16 2022

Sore Sardine

0 Answers Avg Quality 2/10

react native package date

Contents

More Related Answers

react native package date

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.