My Jekyll-built website creates a feed.xml file for the ‘news’ section of the site using jekyll-feed/Atom. I’d like to feature the stories directly inside my app.
I can use fast-xml-parser to parse the feed.xml file and get the stories converted into an array of JSONs containing html.
How do I parse the html into React Native elements? I’ve searched without success. I thought the WebView component might be the answer, but this seems to be for displaying whole websites rather than mapping through an array of html snippets - it only seems to work if one WebView component is returned.
Okay, I found and tried a couple of html => React Native modules, but without much success. So I decided to write my own parsing code.
First, I use .match() to extract <p>, <ul>, <iframe>, and <figure> elements (these are all the ones generated from my markdown files). And then I loop through and deal with each element, converting it into React Native components. I use the react-string-replace module for some of it.
It’s certainly not a full-blown parser, but it does a pretty nice job of rendering the news stories inside the app.
Just one styling issue. For some reason, the text inside the <TouchableOpacity> component is not aligned with the other text, on the bottom - it kind of floats. Any ideas?
<Text>this text is okay, but <TouchableOpacity><Text>this text is raised up a bit!</Text></TouchableOpacity></Text>