---
# System prepended metadata

title: 'Parsing HTML to native views - Mon 21st September, 2020'
tags: [C+, blogs, programmingjournal, '2020', sendingflow, renderhtml, htmltonativeview]

---

# Parsing HTML to native views - Mon 21st September, 2020

I had a session with A where I continued to help her with testing her new React Native components.

The team and I also had another longish meeting planning the new app sending flows v2. It's again complicated by the user segmentation that some clients have setup.

I got to work on adding view blog functionality in C+. I get back a big chunk of HTML from the endpoint for each blog post. The old app then handled it with a web view. I would like to avoid that whereever possible for accessibility reasons, so I am using the excellent [react-native-render-html](https://github.com/archriss/react-native-render-html) library to parse the HTML to proper native views.

It's actually a very impressive library - very easy to get up and running with and very flexible.

```typescript=
import HTML from 'react-native-render-html'
// ....
<HTML
    html={feedContent}
    imagesMaxWidth={Dimensions.get('window').width - Number(space.lg)}
    containerStyle={{ backgroundColor: colors.white, padding: space.md }}
    baseFontStyle={{ color: colors.greyDark, textAlign: 'left' }}
    allowedStyles={[]}
    tagsStyles={{
        a: {
            textDecorationLine: 'none',
        },
    }}
    onLinkPress={async (_event, href) => {
        try {
            const canOpen = await Linking.canOpenURL(href)
            if (canOpen) {
                Linking.openURL(href)
            }
        } catch (error) {
            // eslint-disable-next-line no-console
            console.error('Cannot open this href: ', error)
        }
    }}
/>
```

Now I need to create a blog post with all possible elements (eg. videos, tags, @mentions) and make sure to handle them all properly, even if this just means using the user's browser a lot of the time.

###### tags: `programmingjournal` `2020` `C+` `blogs` `htmltonativeview` `sendingflow` `renderhtml`