React-Native How can I get title from WebView when loading a url

Question

I want to get title of url from webView in react-native.

For example: I can get title of url from webView in iOS

- (void)webViewDidFinishLoad:(UIWebView *)webView{
    titleLabel.text = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
｝

I did not find any solutions so far, so Is there anyone have some ideas?

Answer 1

I'm not sure whether this is the cleanest solution but you can inject some JavaScript into WebView to get some data, and then pass it back.

handleMessage(message) {
  console.log(message.nativeEvent.data);
}

render() {
  return (
    <WebView
      source={{ uri: "https://wonderloveapp.com" }}
      injectedJavaScript="window.postMessage(document.title)"
      onMessage={this.handleMessage}
    />
  )
}

References:

• https://facebook.github.io/react-native/docs/webview.html#injectedjavascript
• https://facebook.github.io/react-native/docs/webview.html#onmessage

Answer 2

You can use injectJavaScript or injectedJavaScript props to inject Javasctipt code to the URLs that you load and get title of the page. Take a look at this answer to learn how to get tile with javascript.

Then when you acquire title you can use onMessage prop to pass to react-native side.

Answer 3

There is a NativeEvent that contains a title property. https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#onloadstart

 <WebView
  source={{
    uri: route.params.url,
  }}
  onLoadStart={(event) => {
    navigation.setOptions({
      headerTitle: event.nativeEvent.title, // get webpage title
    });
  }}
></WebView>

Answer 4

Here is how you create a browser screen that puts the title and url in the header from using webview while also using react hooks.

import React from "react";
import { useEffect } from "react";
import { useState } from "react";
import { Text } from "react-native";
import { View, SafeAreaView, ActivityIndicator } from "react-native";
import { WebView } from "react-native-webview";
const BroswerScreen = ({ route, navigation }) => {
  const { url } = route.params;
  const [isLoading, setLoading] = useState(true);
  const [title, setTitle] = useState(null)
  const [urlHeader, setUrlHeader] = useState(null)

  useEffect(() => {
    console.log(title)
    console.log(urlHeader)
    console.log(isLoading)
    if(title && urlHeader){
      navigation.setOptions({
        headerStyle: { height: 100 },
        headerTitle: ()=> (
        <View>
          <Text numberOfLines={1} style={{fontSize: 16, fontWeight: "bold"}}>{title}</Text>
          <Text numberOfLines={1}>{urlHeader}</Text>
        </View>)
      });
    }

  }, [title,urlHeader, isLoading]);
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "white" }}>
      <WebView
        startInLoadingState={true}
        renderLoading={() => {
          return <Spinner />;
        }}
        style={{ flex: 1 }}
        source={{ uri: url }}
        injectedJavaScript= "window.ReactNativeWebView.postMessage(document.title)"
        onMessage={(message) => setTitle(message.nativeEvent.data)}
        onNavigationStateChange={(event) => {setTitle(event.title); setUrlHeader(event.url); setLoading(false)}}
      />
    </SafeAreaView>
  );
};
const Spinner = () => {
  return (
    <View
      style={{
        flex: 1,
        height: "100%",
        width: "100%",
      }}
    >
      <ActivityIndicator color={"blue"} size="large" />
    </View>
  );
};
export default BroswerScreen;

You would route to this screen using something like the following

        onPress(
      navigation.navigate(BROWSERSCREEN, {
        url: "https://www.mylink.com",
      })
    )