Javascript querySelector "onclick" does not trigger inside Template literals function

Viewed 97

I am using react native for my app. I am using react-native-webview for my app. I am using one url which have one feedback form, after submitting the form It display one toogle "Thank you for submitting" display. I want, After submitting the form when it will display "Thank you" after 3 second it will go back my previous screen.

For navigate to go back I am using React native navigation. React-native-webview have one props name injectedJavaScript props where user can inject custom javascript styling. I made one variable name jsCode where I made the styling and pass it to the injectedJavaScript props. I track the submit button by query selector then made onclick but it does not trigger the set-timeout function. I don't get what I am making mistake. or javascript onclick does not work on React native

import * as React from "react";
import { Text, View, StyleSheet, ActivityIndicator } from "react-native";
import { WebView } from "react-native-webview";
import { useNavigation } from "@react-navigation/native";

const url = "https://s-feedback.herokuapp.com/";

export default function App() {
  const navigation = useNavigation();
  const jsCode = `
  document.querySelector('#vue-root').style.paddingTop = 20;
  document.getElementsByTagName('h3')[0].style.display = 'none';
  document.getElementsByTagName('img')[0].style.display = 'none';
  ${setTimeout(() => { // this logic works and it go back to previous screen
    navigation.goBack();
  }, 3000)}
  document.querySelector('.btn-block').onclick= ${function onSubmit() { // this logic does not work
    setTimeout(() => {
      navigation.goBack();
    }, 3000);
  }};
`;

  return (
    <View style={styles.container}>
      <WebView
        source={{
          uri: url,
        }}
        startInLoadingState={true}
        renderLoading={() => <ActivityIndicator />}
        // injectedJavaScript require passing onMessage function
        onMessage={() => {}}
        injectedJavaScript={jsCode} // In here I am passing the javascript styling
        javaScriptEnabled={true}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: 200,
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
});
0 Answers
Related