React-native-gifted-chat: Locale prop no longer working

[jaaberg]

Issue Description

The prop locale doesn't seem to work anymore for the time separators in the chat.

Steps to Reproduce / Code Snippets

You find it here: https://snack.expo.io/SJD3c-swG

import React, { Component } from 'react';
import { View } from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat' // 0.3.0

export default class App extends Component {
  render() {
    const userId= '123';
    const messages = [{
      _id: '1',
      createdAt: 1519225196922,
      text: 'Hello',
      user: {
        _id: userId,
        name: "Name",
      },
    }]
    return (
      <View style={{flex:1}}>
        <GiftedChat
          messages={messages}
          user={{ _id: userId }}
          dateFormat={'dddd DD. MMMM'}
          locale={'nb'}
        />
      </View>
    );
  }
}

Expected Results

That the time separator should be in norwegian (according to locale prop)

Additional Information

• Nodejs version: 7.5.0
• React version: 16.2.0
• React Native version: 0.52
• react-native-gifted-chat version: 0.3.0
• Platform(s) (iOS, Android, or both?): At least on iOS (haven't tested android)

[mafiusu]

Having the same issue. But it's working if you import this

import "moment";
import "moment/locale/nb";

[jaaberg]

Doesn't seem to work for me :/

[xcarpentier]

@jaaberg
It seem you are right.
But I don't figured out why for now...

Did you try to set locale too?

import "moment/locale/nb"

// add new locale to global
moment.locale('nb')

// log locales
console.log(moment.locales())

[jaaberg]

Oh, found it,

I have used a different version of moment, 2.18.1, and react-native-gifted-chat uses ^2.19.0. This creates two different instances, so it doesn't mather if I import locales in my project. But if I change to same version in my project, it works if I just add import "moment/locale/nb".

Moment should probably be a peerDependency, or import the languages itself. Want a PR for moving it to peerDependency? :)

[xcarpentier]

Yes please :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[vandrieu]

Hello,
Here is how I fixed it in my local environment, but it's just a workaround, any "npm install" from scratch will erase your changes.

1. Open node_modules/react-native-gifted-chat/src/Day.js

2. Replace that import:

import moment from 'moment';

With that :

import moment from 'moment/min/moment-with-locales';
moment.locale('<your locale>');

1. Still in Day.js, replace

            {moment(currentMessage.createdAt)
              .locale(context.getLocale())
              .format(dateFormat)
              .toUpperCase()}

with

            {moment(currentMessage.createdAt)
              .format(dateFormat)
              .toUpperCase()}

1. Now it works (as a temporary workaround)

[r1ckyrockz]

Please reopen this issue, because it it not yet solved.

My environment:

NodeJS: 12.4.0
react: 16.8.6
react-native: 0.60.3
react-native-gifted-chat: ^0.9.11
moment: 2.19.0 || 2.24.0 // take no effect

[msqar]

Any update on this? It's still failing for me.

[xcarpentier]

1397 we will use dayjs instead