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? So I looked into this further and my best guess is that when _goto triggers this.props.navigation.navigate("ArticleDetails", { isRead: true });, JavaScript executes everything inside of there including onNavigationStateChange even though it should only do so when event.url !== uri.
I was able to find a solution with:
onShouldStartLoadWithRequest={request => {
if (Platform.OS === "android") {
const url = request.url;
console.log(request);
if (url !== uri) {
Linking.openURL(url);
}
// return false;
}
}}
but then this somehow cancels out the iOS solution. So this is not working:
<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>`
}}
// onShouldStartLoadWithRequest={request => {
// if (Platform.OS === "android") {
// const url = request.url;
// console.log(request);
// if (url !== uri) {
// Linking.openURL(url);
// }
// // return false;
// }
// }}
onNavigationStateChange={event => {
if (Platform.OS === "ios") {
if (event.url !== uri) {
Linking.openURL(event.url);
}
}
}}
/>
I tried a ternary operator, but I got syntax errors all over the place. I need some help in getting these working on their respective platforms.
I tried to see if I could just use onShouldStartLoadWithRequest for both platforms, but iOS does not seem to recognize this property, because when I tested it, the articles on iOS do not show up at all in the WebView I just get a blank screen.