Moment: How to change locale in momentJS in React Native?

[VanessaChu]

This is what I have but it does not work.

import moment from 'moment' 
import 'moment/min/moment-with-locales' 
import 'moment-duration-format' // used by moment  

componentDidMount () {  
 console.log(moment.locale())   
 console.log(moment.locale('zh-cn'))    
 console.log(moment.locale())  
} 

console log outputs: en, en, en
expected console log output: en, zh-cn, zh-cn

When I tried changing import moment from 'moment' to import moment from 'moment/min/moment-with-locales' but it throws an error on this line:

const total = moment.duration(this.props.stoveUsage.total, 'seconds').format('H:mm', { trim: false })

error: momentWithLocales2.default.duration(...).format is not a function

[rudyryk]

Confirming that, moment.locale('es') has no effect for me in React Native.

[rudyryk]

import 'moment/min/moment-with-locales'

does the trick!

moment.locale('fr'); moment().format("ll");

results in "1 févr. 2018" as expected.

[benadamstyles]

If you don't want to use moment-with-locales, which loads all locale data, rolling back to moment v2.18 fixed this for me. There is definitely a bug with moment v2.20 and setting the locale in react native.

[msevestre]

@Leeds-eBooks Could you explain how you import moment? I rolled back to 2.18 and yet I need to import moment from moment-with-locales in to get local to work properly in react-native

Thanks

[benadamstyles]

@msevestre Yeah of course, although I think my solution may be out of date now, I made it work in my code and moved on, I think a later version of moment might have fixed it. Nevertheless, my fix is:

• install https://github.com/tqc/moment.git#no-dynamic-import from git, instead of moment directly from npm
• then:

import moment from 'moment'

import 'moment/src/locale/en-gb'
import 'moment/src/locale/es'
import 'moment/src/locale/fr'
import 'moment/src/locale/pl'
import 'moment/src/locale/pt'
// ...etc

// bonus trick!
import DeviceInfo from 'react-native-device-info'
const deviceLocale = DeviceInfo.getDeviceLocale()
moment.locale([deviceLocale, 'en'])

This is what I'm doing, and it's working for me, but as I say it may no longer be necessary.

[msevestre]

@Leeds-eBooks Awesome. Thanks for your quick feedback. Really helped

[wstan77]

This worked to me,
https://momentjs.com/docs/#/i18n/instance-locale/

You must instance on App.js all words to language than you want, this will work in all your application.

[marwahaha]

@VanessaChu - do you still have a problem?

[jeffhtli]

This solution works for me

[MayeuldP]

Hey peoples, import 'moment/locale/fr'; works for me, but if I want to do a dynamical one, like not have to import all the exisiting languages, do you know any tricks to do something like import 'moment/locale/[variable]' where variable is the needed language ?
So that it works with every country... :/

[ichernev]

I hope most discussion participants got their problems sorted out :) Thank you @Leeds-eBooks

For 3.x we might have more versions of moment with/without the dynamic import/es6 so this is less of an issue.

[stenrdj]

Hello @MayeuldP ,
i don't know if you arrive to fix using variable languages of moments in Reactjs / ReactNative , but i want to share the solution it may help somebody .
you don't have to import culture by culture instead just add :import 'moment/min/locales' only and later you can set your moment.local('') with your favorite culture.

[KashifAhmed]

I'm using v2.18 and this method works.

import moment from 'moment';
import momentFR from 'moment/src/locale/fr' 
moment.locale('fr',momentFR );

[fructurj]

Hi, @KashifAhmed In v.2.22.2 you should use moment.updateLocale('fr',momentFR)

Deprecation warning: use moment.updateLocale(localeName, config) to change an existing locale. moment.defineLocale(localeName, config) should only be used for creating a new locale See http://momentjs.com/guides/#/warnings/define-locale/ for more info.

[RicardoBer]

Check this:

import moment from "moment";
import 'moment/min/locales'

This include all languajes configurations from moment, it's js, so no problem with size.

I had problem before when some one install the app with an mobile with different languaje.

From this you can set any locale defined by moment without any problem,

moment.locale('es');

Or using device locale without worries about it is out of your languajes specs as example from @benadamstyles

[euharrison]

In my case, import the locale wasn't enough, so I used the imported dictionary and remove the first character that is an underscore _

import moment from 'moment';
import momentPTBR from 'moment/src/locale/pt-br';

function prepareLocale(locale) {
  for (const key in locale) {
    if (locale.hasOwnProperty(key)) {
      // remove first character underscore fom key, i.e. '_calendar' => 'calendar'
      locale[key.substring(1)] = locale[key];
    }
  }
  return locale;
}

moment.defineLocale('pt-br', prepareLocale(momentPTBR));

[Asday]

import 'moment/src/locale/en-gb' didn't work for me, but import 'moment/locale/en-gb' did.

  "dependencies": {
    "expo": "32.0.0",
    "moment": "2.24.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
  },

In the upper-most file in the tree, here's how my code looks:

import moment from 'moment'

import 'moment/locale/en-gb'

const momentLocale = moment.locale('en-gb')
if (momentLocale !== 'en-gb') {
  throw new Error(`Moment fell back to locale ${momentLocale}`)
}

export default () => null

[karthikeyan110798]

I'm using v2.18 and this method works.

` import moment from 'moment'; import momentFR from 'moment/src/locale/fr' moment.locale('fr',momentFR );
could you please give some examples.
thanks a lot!

[thinklinux]

I changed my version from 2.24 to 2.18 and it works now. There is a bug somewhere after 2.20.

[juliovieceli]

its work for me

import moment from 'moment'
import 'moment/locale/pt-br'
moment.locale('pt-br')

[Asday]

its work for me

import moment from 'moment'
import 'moment/locale/pt-br'
moment.locale('pt-br')

Make sure you're checking that what you get back from .locale() is what you set. It falls back silently.