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,
},
});