Dark theme does not get apply to webview for react native android app

See more:

Mobile

Android

application

, +

Dark theme is setted up correctly for React Native expo app and works correctly everywhere but when I switch it on the theme changes to dark everything works perfectly except the web view.

How to make the webview part convert into dark theme on button switch.

Here is my code for is there any if condition applied to the code to let jscode ?

Bit New to React Native... let me know if unclear with the explaination

What I have tried:

/** @format */

import React, { PureComponent } from "react";
import { View } from "react-native";
import { WebView } from "react-native-webview";
import { Color, Styles, withTheme } from "@common";
import { CustomPage } from "@containers";
import { Menu, NavBarLogo, Back } from "./IconNav";

@withTheme
export default class CustomPageScreen extends PureComponent {
  static navigationOptions = ({ navigation }) => {
    const headerStyle = navigation.getParam(
      "headerStyle",
      Styles.Common.toolbar()
    );
    const dark = navigation.getParam("dark", false);
    const isBack = navigation.getParam("isBack", false);
    return {
      headerTitle: NavBarLogo({ navigation }),
      headerLeft: isBack ? Back(navigation) : Menu(dark),

      headerTintColor: Color.headerTintColor,
      headerStyle,
      headerTitleStyle: Styles.Common.headerStyle,
    };
  };

  UNSAFE_componentWillMount() {
    const {
      theme: {
        colors: { background },
        dark,
      },
    } = this.props;

    this.props.navigation.setParams({
      headerStyle: Styles.Common.toolbar(background, dark),
      dark,
    });
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.theme.dark !== nextProps.theme.dark) {
      const {
        theme: {
          colors: { background },
          dark,
        },
      } = nextProps;
      this.props.navigation.setParams({
        headerStyle: Styles.Common.toolbar(background, dark),
        dark,
      });
    }
  }

  render() {
    const { state } = this.props.navigation;
    if (typeof state.params === "undefined") {
      return <View />;
    }
let jsCode = `
            document.querySelector('header').style.display = 'none';
            document.querySelector('footer').style.display = 'none';
            document.querySelector('#back_to_top').style.display = 'none';
            document.querySelector('ul.heateor_sss_sharing_ul').style.display = 'none';
            document.querySelector('.default_template_holder').style.marginTop = '-30px';
            document.querySelector('.default_template_holder').style.marginBottom = '-50px';
            document.querySelector('#qlwapp').style.display = 'none';
            document.querySelector('div#onesignal-bell-container').style.display = 'none';
        `;
    if (typeof state.params.url !== "undefined") {
      return (
        <View style={{ flex: 1 }}>
          <WebView startInLoadingState source={{ uri: state.params.url }} injectedJavaScript={jsCode}/>

        </View>
      );
    }

    return (
      <View style={{ flex: 1 }}>
        <CustomPage id={state.params.id} />
      </View>
    );
  }
}