'react-native-webview href html tag not wrapping and going off screen

The long href url content inside my WebView does not go to the line and makes the view scrollable horizontally when it should break the text and make it go to the line even if it is one big chunk of text.

I was unable to find a way to fix this in the docs, see attached photo.

function fomatHTML(html: string) {
        const metaViewport = '<meta name="viewport" content="width=device-width, initial-scale=1">';
        const formatedHTML = `<html><head>${metaViewport}</head><body>${html}</body></html>`
        return formatedHTML;
    }

<WebView
    source={{html: fomatHTML(text)}}
    originWhitelist={['*']}
    />

the part causing the issue

<a href="..." target="_blank"><span style="color: blue;">...</span></a>

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source