jameslawler / react-native-rss-parser

React Native compatible package to parse RSS feeds

react-native-rss-parser

React Native compatible RSS parser

Parse RSS data into a simple object structure. Currently supports;

• RSS 2.0 specification
• Atom 1.0 specification
• Itunes elements for both RSS 2.0 and Atom 1.0 feeds

Installation

npm install react-native-rss-parser --save

Usage example

import * as rssParser from 'react-native-rss-parser';

return fetch('http://www.nasa.gov/rss/dyn/breaking_news.rss')
  .then((response) => response.text())
  .then((responseData) => rssParser.parse(responseData))
  .then((rss) => {
    console.log(rss.title);
    console.log(rss.items.length);
  });

Parsed model

{
  type: undefined,            // either `rss-v2` or `atom-v1`
  title: undefined,           // title of the channel
  links: [{
    url: undefined,           // url of the channel
    rel: undefined            // type of url (eg. alternate)
  }],
  description: undefined,     // description of the channel
  language: undefined,        // language of the channel in `en-us`
  copyright: undefined,       // copyright information about the channel
  authors: [{
    name: undefined           // channel author names
  }],
  lastUpdated: undefined,     // last updated date for the channel
  lastPublished: undefined,   // last published date for the channel
  categories: [{
    name: undefined           // categories the channel belong too
  }],
  image: {
    url: undefined,           // channel image url
    title: undefined,         // channel image title
    description: undefined,   // channel image description
    width: undefined,         // channel image width (pixels)
    height: undefined         // channel image height (pixels)
  },
  itunes: {                   // itunes specific channel information
    author: [{
      name: undefined         // channel author names
    }],
    block: undefined,         // if `yes` then the entire podcast isn't shown in iTunes directory
    categories: [{
      name: undefined,        // channel category names
      subCategories:[{
        name: undefined       // sub category names
      }]
    }],
    image: undefined,         // channel image url
    explicit: undefined,      // `yes`/`no` to indicate if channel contains explicit content
    complete: undefined,      // `yes` indicates the feed won't publish any new items in the future
    newFeedUrl: undefined,    // a url pointing to the new feed location
    owner: {
      name: undefined,        // owner name of the channel
      email: undefined,       // owner email address of the channel
    },
    subtitle: undefined,      // sub title of the channel
    summary: undefined,       // summary of the channel
  },
  items: [{                   // list of items in the feed
    id: undefined,            // item id
    title: undefined,         // item title
    imageUrl: undefined,      // item image url
    links: [{
      url: undefined,         // item link url
      rel: undefined          // type of item link
    }],
    description: undefined,   // item description
    content: undefined,       // item HTML content
    categories: [{
      name: undefined         // categories the item belongs too
    }],
    authors: [{
      name: undefined         // item author names
    }],
    published: undefined,     // item published date
    enclosures: [{
      url: undefined,         // item media url
      length: undefined,      // item media length (bytes)
      mimeType: undefined     // item media mime type (eg audio/mpeg)
    }],
    itunes: {                 // itunes specific item information
      authors: [{
        name: undefined,      // item author names
      }],
      block: undefined,       // `yes` indicates the item won't be displayed in the iTunes directory
      duration: undefined,    // HH:MM:SS length of the item
      explicit: undefined,    // `yes`/`no` to indicate if item contains explicit content
      image: undefined,       // image url for the item
      isClosedCaptioned: undefined, // `yes` indicates if the item contains closed captioning
      order: undefined,       // item order number
      subtitle: undefined,    // item subtitle
      summary: undefined,     // item summary
    }
  }]
}

Model mappings

Top Level elements

Parsed Value	RSS v2.0	Atom v1.0
title	title	title
links	link	link
description	description	subtitle
language	language
copyright	copyright	rights
authors	managingEditor	author
published	pubDate	published
updated	lastBuildDate	updated
categories	category	category
image	image	logo
items	item	entry

Item / Entry Level elements

Parsed Value	RSS v2.0	Atom v1.0
id	guid	id
title	title	title
imageUrl		icon
links	link	link
description	description	summary
content	content:encoded	content
categories	category / dc:subject	category
authors	author / dc:creator	contributor
published	pubDate / dc:date	published
enclosures	enclosures	link

CHANGELOG

1.5.1

• Bug Fix: _this.getElementTextContentArray is not a function issue #16 (thanks to julianbragachi)

1.5.0

• Updated xmldom to version 0.3.0
• Change tests to use Jest to ensure refactoring did not break anything (using snapshot tests)
• Updated entire codebase to use up-to-date JavaScript syntax (arrow functions, const & let instead of var)
• Bug Fix: Atom v1 should return published date when no updated date available (thanks to Serra19)

Development setup

Clone this project from GitHub

npm install
npm test

Bugs / feature requests

If you find any bugs or have a feature request, please create an issue in GitHub.

Contributing

1. Fork it (https://github.com/jameslawler/react-native-rss-parser)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request

License

Distributed under the MIT license. See LICENSE for more information.

react-native-rss-parser's Issues

Images on rss v2

Hi! Thank you for this module. It's really useful.

I tried to fetch a feed from https://www.iaaf.org/news/rss and I realized that this library doesn't parse the image tag of the items. Are there any plans to implement this functionality?

Support for custom tags

Hi,
I'm using your parser to parse this feed: http://rss.cnn.com/rss/edition.rss
It's working well in general, but this feed uses the media:group tag (with different media:content elements for different resolutions) for the articles' images. This tag does not seem to be supported currently. Is it in any way possible to add custom tags to get parsed additionally?

vue-native

Hi,

Can I use this parse even with vue-native?

Item's description shows unformatted symbols

Hey, thank you for your great package.

For some reason sometimes, the description returning with unformmated quatation marks as you can see here:

Is there any option without manually write more code to format the description, maybe I can upload a PR ?

Using Async/Await instead of .then

Provide 'content:encoded' element with HTML full text

Hi @jameslawler , thank for your great parser.

Im using your parser in my project but encounter a problem that many RSS feed actually did not put content in description tag anymore, instead they put their full text in a content:encoded tag. Something like https://en.blog.wordpress.com/feed/ has entries like

<item>
		<title>Introducing: A Diverse, Free Stock Photo Library</title>
		<link>https://en.blog.wordpress.com/2018/08/02/diverse-stock-photo-library-pexels/</link>
		<comments>https://en.blog.wordpress.com/2018/08/02/diverse-stock-photo-library-pexels/#comments</comments>
		<pubDate>Thu, 02 Aug 2018 13:00:05 +0000</pubDate>
		<dc:creator><![CDATA[Anne McCarthy]]></dc:creator>
				<category><![CDATA[Diversity & Inclusion]]></category>
		<category><![CDATA[New Features]]></category>
		<category><![CDATA[diversity]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[pexels]]></category>
		<category><![CDATA[photo blogging]]></category>
		<category><![CDATA[Photography]]></category>
		<category><![CDATA[stock photos]]></category>

		<guid isPermaLink="false">http://en.blog.wordpress.com/?p=40626</guid>
		<description><![CDATA[Diversity in visual representation matters.]]></description>
				<content:encoded><![CDATA[<p>As many site creators know, it’s daunting to find images to represent the message you&#8217;re trying to put out into the world &#8212; especially if you don’t have the equipment or time to make your own.</p>
<p>At WordPress.com, we’re constantly striving to make it as easy as possible to create beautiful websites that represent who you are and what you stand for. We&#8217;re excited to announce that we&#8217;ve been working hard with Pexels and other diversity-focused image-library partners so that everyone with a WordPress.com or Jetpack-connected site can realize their vision with the right stock photos.</p>
<p>To use these images, just head to your Media Library and select <strong>Free Photo Library</strong> before searching for any image you need. You can also do this from the <strong>Add Media</strong> option within a post or page:</p>
<p><img data-attachment-id="40627" data-permalink="https://en.blog.wordpress.com/2018/08/02/diverse-stock-photo-library-pexels/screen-shot-2018-08-01-at-7-28-04-pm/" data-orig-file="https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-04-pm.png?w=720" data-orig-size="1252,522" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Screen Shot 2018-08-01 at 7.28.04 PM" data-image-description="" data-medium-file="https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-04-pm.png?w=720?w=300" data-large-file="https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-04-pm.png?w=720?w=720" class="alignnone size-full wp-image-40627" src="https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-04-pm.png?w=720" alt="Screen Shot 2018-08-01 at 7.28.04 PM.png" srcset="https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-04-pm.png?w=720 720w, https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-04-pm.png?w=150 150w, https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-04-pm.png?w=300 300w, https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-04-pm.png?w=768 768w, https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-04-pm.png?w=1024 1024w, https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-04-pm.png 1252w" sizes="(max-width: 720px) 100vw, 720px"   /></p>
<h3>Free images representing a wide range of experiences</h3>
<p>In January 2018, we collaborated with Pexels to integrate their free stock-image library into WordPress.com. Since then, every user has had access to thousands of free, high-quality images at their fingertips! Knowing how diverse our community is, however, we didn’t stop there.</p>
<p>Stock-image libraries <a href="https://medium.com/@NikkyMill/where-to-find-free-stock-photos-of-people-of-color-f262b851a1b5">have historically struggled</a> to represent all experiences, and often excluded photos of people of color, people with disabilities, or non-binary individuals. Pexels is working to change that, and since partnering with them we&#8217;ve helped incorporate diversity-focused libraries to their collection. Ultimately, we believe it’s on us to help find a solution to this problem, and avoid generic stock images that often perpetuate stereotypes.</p>
<p>Our first partner in this effort was the <a href="https://www.wocintechchat.com/blog/wocintechphotos">Women of Color in Tech Stock Photos library</a> (WoCinTech for short). We were thrilled to work with them, as they were an earlier driver for these efforts. Christina Morillo, one of the project&#8217;s co-founders, had this awesome message to share:</p>
<blockquote><p>We started this collection to address the lack of visible representation of women of color engaging in technical tasks in stock images. Our mission was always twofold: Disrupt stock images and further representation of women/non-binary people in technology by making the photos accessible to all creators. We are thrilled to partner with Pexels and WordPress.com to further this mission and help creators like you represent who and what you stand for.</p></blockquote>
<p>Since adding their brilliant photos to Pexels, we’ve seen <a href="https://www.pexels.com/@divinetechygirl/stats/">their stats soar</a> with more than 70,000 downloads and 28 million image views:</p>
<p><img data-attachment-id="40628" data-permalink="https://en.blog.wordpress.com/2018/08/02/diverse-stock-photo-library-pexels/screen-shot-2018-08-01-at-7-28-59-pm/" data-orig-file="https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-59-pm.png?w=720" data-orig-size="2550,692" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Screen Shot 2018-08-01 at 7.28.59 PM" data-image-description="" data-medium-file="https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-59-pm.png?w=720?w=300" data-large-file="https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-59-pm.png?w=720?w=720" class="alignnone size-full wp-image-40628" src="https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-59-pm.png?w=720" alt="Screen Shot 2018-08-01 at 7.28.59 PM.png" srcset="https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-59-pm.png?w=720 720w, https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-59-pm.png?w=1437 1437w, https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-59-pm.png?w=150 150w, https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-59-pm.png?w=300 300w, https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-59-pm.png?w=768 768w, https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-59-pm.png?w=1024 1024w" sizes="(max-width: 720px) 100vw, 720px"   /></p>
<p>These statistics show how great the need and desire are for truly representative images online. What started out as a passion project of the <a href="https://www.wocintechchat.com/blog/wocintechphotos">WoCinTech group</a> has now reached more than 70,000 people in the span of a month. Since we introduced the free stock image library, WordPress.com users have already downloaded more than 1 million photos.</p>
<p><img data-attachment-id="40640" data-permalink="https://en.blog.wordpress.com/2018/08/02/diverse-stock-photo-library-pexels/computers-laptops-office-1181232/" data-orig-file="https://en-blog.files.wordpress.com/2018/08/computers-laptops-office-1181232.jpg?w=720" data-orig-size="6016,4016" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="computers-laptops-office-1181232" data-image-description="" data-medium-file="https://en-blog.files.wordpress.com/2018/08/computers-laptops-office-1181232.jpg?w=720?w=300" data-large-file="https://en-blog.files.wordpress.com/2018/08/computers-laptops-office-1181232.jpg?w=720?w=720" class="alignnone size-full wp-image-40640" src="https://en-blog.files.wordpress.com/2018/08/computers-laptops-office-1181232.jpg?w=720" alt="computers-laptops-office-1181232" srcset="https://en-blog.files.wordpress.com/2018/08/computers-laptops-office-1181232.jpg?w=720 720w, https://en-blog.files.wordpress.com/2018/08/computers-laptops-office-1181232.jpg?w=1440 1440w, https://en-blog.files.wordpress.com/2018/08/computers-laptops-office-1181232.jpg?w=150 150w, https://en-blog.files.wordpress.com/2018/08/computers-laptops-office-1181232.jpg?w=300 300w, https://en-blog.files.wordpress.com/2018/08/computers-laptops-office-1181232.jpg?w=768 768w, https://en-blog.files.wordpress.com/2018/08/computers-laptops-office-1181232.jpg?w=1024 1024w" sizes="(max-width: 720px) 100vw, 720px"   /></p>
<p>Going forward, we’re thrilled to work with Pexels to bring other diverse image-library partners on board, and to expand the selection of images you can access.</p>
<h3>We need your help</h3>
<p>We&#8217;re continuing to add more image libraries! This is where we could use your help:</p>
<ul>
<li>Suggest in the comments below image libraries that we should reach out to that will help expand our offerings.</li>
<li>If you’re a photoblogger, <a href="https://www.pexels.com/submit-photos/?utm_source=wordpress">upload your images to Pexels</a> and immediately have them available for other WordPress users to find.</li>
<li>Become a part of future diversity-focused photo challenges on Pexels like <a href="https://www.pexels.com/challenges/pride-challenge-2018/">this recent one from Pride Month</a>.</li>
<li>If you’re a blogger or site owner, make an effort to use more diverse images when sharing content on your site.</li>
<li>If your company provides images for customers to use, we recommend integrating with <a href="https://www.pexels.com/">Pexels</a> to give your customers access to a library dedicated to diversity in images.</li>
<li>If you run an image library offering diverse images, comment below and we’ll get in touch with you!</li>
</ul>
<p>Happy WordPress-ing! <img src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f642.png" alt="🙂" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
<p><em><a href="https://www.pexels.com/@divinetechygirl">Photos</a> by Christina Morillo of WOCinTech from Pexels</em></p>
]]></content:encoded>
			<wfw:commentRss>https://en.blog.wordpress.com/2018/08/02/diverse-stock-photo-library-pexels/feed/</wfw:commentRss>
		<slash:comments>54</slash:comments>
	
		<media:thumbnail url="https://en-blog.files.wordpress.com/2018/08/casual-computers-hands-1181210.jpg" />
		<media:content url="https://en-blog.files.wordpress.com/2018/08/casual-computers-hands-1181210.jpg" medium="image">
			<media:title type="html">casual-computers-hands-1181210</media:title>
		</media:content>

		<media:content url="https://0.gravatar.com/avatar/0e2249a7de3404bc6d5207a45e911187?s=96&#38;d=retro" medium="image">
			<media:title type="html">annezazu</media:title>
		</media:content>

		<media:content url="https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-04-pm.png" medium="image">
			<media:title type="html">Screen Shot 2018-08-01 at 7.28.04 PM.png</media:title>
		</media:content>

		<media:content url="https://en-blog.files.wordpress.com/2018/08/screen-shot-2018-08-01-at-7-28-59-pm.png" medium="image">
			<media:title type="html">Screen Shot 2018-08-01 at 7.28.59 PM.png</media:title>
		</media:content>

		<media:content url="https://en-blog.files.wordpress.com/2018/08/computers-laptops-office-1181232.jpg" medium="image">
			<media:title type="html">computers-laptops-office-1181232</media:title>
		</media:content>
	</item>

Could you provide an 'content:encoded' element with html full text?

The "authors" array is always empty

I'm currently using the library to parse this rss feed: http://www.puentes.me/feed/podcast

The problem is that the items always have their authors array empty.

HuffPost not working

Hi, I'm using this module in my React Native app and I notice that at least HuffPost RSS feed (https://www.huffpost.com/section/world-news/feed) is not working. This is the error it prints:

[xmldom error] element parse error: Error: invalid tagName:t.length;o++)r(t[o]);return
[09:20:53] @#[line:undefined,col:undefined]

_this.getElementTextContentArray is not a function

The given example:

import * as rssParser from 'react-native-rss-parser';

return fetch('http://www.nasa.gov/rss/dyn/breaking_news.rss')
  .then((response) => response.text())
  .then((responseData) => rssParser.parse(responseData))
  .then((rss) => {
    console.log(rss.title);
    console.log(rss.items.length);
  });

results in this error:

_this.getElementTextContentArray is not a function. (In '_this.getElementTextContentArray(node, tagName, namespace)', '_this.getElementTextContentArray' is undefined)
- node_modules/react-native-rss-parser/parsers/utils.js:40:32 in exports.getElementTextContent
- node_modules/react-native-rss-parser/parsers/atomv1.js:5:6 in <global>
- node_modules/react-native-rss-parser/parsers/atomv1.js:135:9 in mapChannelFields
- node_modules/react-native-rss-parser/parsers/atomv1.js:169:8 in exports.parse
* http://127.0.0.1:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:145220:35 in <unknown>
- node_modules/react-native/node_modules/promise/setimmediate/core.js:45:6 in tryCallTwo
- node_modules/react-native/node_modules/promise/setimmediate/core.js:200:22 in doResolve
- node_modules/react-native/node_modules/promise/setimmediate/core.js:66:11 in Promise
- node_modules/react-native-rss-parser/index.js:22:16 in exports.parse
- node_modules/react-native/node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
- node_modules/react-native/node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:181:14 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:441:30 in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:387:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:4 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue

Update: It's working in v1.4.0

Strict mode issue on Android

Environment details

React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
      Memory: 46.32 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.9.0 - ~/.nvm/versions/node/v11.9.0/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.5.0 - ~/.nvm/versions/node/v11.9.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 26, 27, 28
        Build Tools: 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.1
        System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5314842
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0 
      react-native: 0.57.2 => 0.57.2 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-svg: 9.3.7

Error

Expected

Application loads with no issue.

Actual

When executing the application on Android API 28 it throws an error: Strict mode does not allow function declaration in a lexically nested statement.... If any reference to react-native-rss-parser is removed from the application, it runs flawlessly.

Screenshot