In my React Native app, I am utilizing the react-native-webview component to display blog posts. The code I have implemented is straightforward, but my goal is to restrict the webview to only show content from the blog section of the website, preventing users from exploring other parts of the site.
const BlogScreen = () => {
const runFirst = `
document.querySelector(".mobile-bottom-nav-menu").style.display = "none";
document.querySelector(".header, .js-sticky-header, .fixed-top").style.display = "none";
true`;
return (
<SafeAreaView>
<View>
<WebView
originWhitelist={['*']}
source={{
uri: 'https://www.****.com',
}}
onMessage={(event) => {}}
injectedJavaScript={runFirst}
/>
</View>
</SafeAreaView>
);
};
export default BlogScreen;