I have some code that I implemented a couple of months ago that fixed the ability for a user to who was reading an article on my app and wanted to click on a hyperlink inside that article, once having done so, the user would be taken to an external browser. This is the implementation:
<View style={styles.content}>
{Boolean(this.props.article.VideoID) && (
<VimeoVideo videoId={this.props.article.VideoID.toString()} />
)}
{Boolean(this.props.article.Summary) && (
<Text style={styles.boldParragraph}>
{this.props.article.Summary}
</Text>
)}
{this.props.article.Sections.map(s => (
<WebViewAutoHeight
key={s.Body.substr(10)}
source={{
//prettier-ignore
html: `<body style="font-family: -apple-system, Roboto, sans-serif; background-color: ${lightTheme.grey2} !important; color: ${v2Colors.charcoalDarkest}; font-size: ${moderateScale(14, 0.2)}px;">${s.Body}</body>`
}}
// onNavigationStateChange={event => {
// if (event.url !== uri) {
// Linking.openURL(event.url);
// }
// }}
/>
))}
</View>
The commented out part.
It works for iOS
but on Android, as soon as the user clicks on READ MORE, it takes them to open up another browser in their phone
not sure of the connection
because onPress={mainActionButtonPress} is what the user is pressing
and mainActionButtonPress is connected to a function:
_goto = article => {
this.props.setSelectedArticle(article);
this.props.navigation.navigate("ArticleDetails", { isRead: true });
};
how is onNavigationStateChange property inside of AutoHeightWebView being triggered by the _goto function?