How can I use javascript library such as moment.js in react native

React Native

React Native Problem Overview


What is the recommended way to use native javascript libraries in react native? Are there any specific restrictions?

React Native Solutions


Solution 1 - React Native

Easy peasy! From the root of your project just run:

npm install moment --save

Then you can import it in your code:

import moment from 'moment';
var now = moment().format();

The restrictions would be anything that tries to "reach out" to the browser (which doesn't exist in this context). That's why there's polyfills for things like XHR.

The official documentation has examples on how to use the moment library

Solution 2 - React Native

Some of the moment methods work in React Native and others don't. I suspect it has to do with listeners.

I can use moment for formatting:

moment(new Date()).format("YYYY-MM-DD hh:mm:ss")

But not for active formatting:

moment(new Date()).format("YYYY-MM-DD hh:mm:ss").fromNow()

Solution 3 - React Native

to use a npm library just use this command with the respective library name

npm install moment --save

eg.) npm install {your library name here} --save

then just import in your class and use

import moment from 'moment';
 

Solution 4 - React Native

If you specifically want to use moment.js in react or react native, have a look at react-moment, a react component for the moment library, at https://github.com/headzoo/react-moment.

To use react-moment in react native, run:

npm install --save moment react-moment

Then in the file you want to use moment:

import Moment from 'react-moment';

Finally, use it as desired, for example:

<Moment element={Text} fromNow>
    { post.datePublished }
</Moment>

The prop element={Text} is specifically for react native. It ensures that the resulting string is rendered in a Text component. Without this, react native would throw an error.

Solution 5 - React Native

It looks like as of right now, some npm modules are not compatible with the packager. Haven't really dug into why yet, but what I've been resorting to doing is having a vendor folder and copying over the web version but at the top specifically putting

/**
 * @providesModule moment
 */

And at the bottom changing it up to:

module.exports = moment;

Not sure if this is the correct way yet, but the packaging is still pretty new to everyone.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionnomnombuntyView Question on Stackoverflow
Solution 1 - React NativeColin RamsayView Answer on Stackoverflow
Solution 2 - React NativeReuven EtzionView Answer on Stackoverflow
Solution 3 - React NativeSachinView Answer on Stackoverflow
Solution 4 - React NativeBenView Answer on Stackoverflow
Solution 5 - React NativeJacobView Answer on Stackoverflow