I want to inject javascript codes to injectedJavaScript method of react native web view. I could inject one javascript code working fine but multiple can't. Is there any trick to do that?
injectedJavaScript={`document.querySelector('.header-wrapper').style.display='none' ` }
this works.
But i want something like this to inject multiple javasript things but not work.
let jsCode = `(
function() {
document.querySelector('.footer').style.display='none' ;
document.querySelector('.tabs').style.display='none' ;
document.querySelector('.header-wrapper').style.display='none' ;
document.querySelector('.wrapper').style.margin-top=-70px ;
})();`;
render() {
return (
<WebView
source={{uri: 'blabla.com'}}
style={{marginTop: 20}}
injectJavaScript={jsCode}
javaScriptEnabledAndroid={true}
/>
);
}
When i try this i am getting unexpected token etc. How could i inject multiple javascripts to react native web view ? Thanks in advance.
Full code :
import React from 'react';
import { StyleSheet, Text, View,WebView } from 'react-native';
export default class App extends React.Component {
render() {
return (
<WebView
source={{uri: 'https://trends.google.com/trends/trendingsearches/daily?geo=TR'}}
injectedJavaScript={`document.querySelector('.trending-searches-footer').style.display='none';`
+ ` document.querySelector('.content-header-buttons daily-header-buttons').style.display='none'; `
+ ` document.querySelector('.trending-feed-tabs').style.display='none'; `
+ ` document.querySelector('.header-wrapper').style.display='none'; `
+ ` document.querySelector('.trending-feed-page-wrapper').style.marginTop='-70px'; `
}
javaScriptEnabled={true}
ref="WEBVIEW_REF"
/>
);
}
}
You have an error in your javascript, this would cause the script to fail:
document.querySelector('.wrapper').style.margin-top=-70px; // this is wrong syntax
try this
document.querySelector('.wrapper').style.marginTop='-70px';
To use it with injectedJavascript write your script as you would if it was one line, it doesn't make any difference, but you should make sure that your javascript doesn't have any errors:
let jsCode = `
document.querySelector('.footer').style.display='none';
document.querySelector('.tabs').style.display='none';
document.querySelector('.header-wrapper').style.display='none';
document.querySelector('.wrapper').style.marginTop='-70px';
`;
And the use injectedJavaScript and not injectJavaScript to use it.
<WebView
source={{uri: 'blabla.com'}}
style={{marginTop: 20}}
injectedJavaScript={jsCode}
javaScriptEnabledAndroid={true}
/>
Related
I have an image slider component to display images from my Firebase database as follows ,
import React from 'react';
import Swiper from 'react-native-swiper';
import { View, StyleSheet, Image } from 'react-native'
const ImageSlider = ({images}) => {
return (
<Swiper autoplayTimeout={5}
style={styles.wrapper}
showsButtons={false}
loadMinimal={true}
showsPagination={true}
paginationStyle={styles.paginationStyle}
activeDotStyle={styles.activeDotStyle}
dotStyle={styles.dotStyle}
loop={true} autoplay={true}
>
{images.map((data, index) => {
return (
<View key={index} style={styles.slider}>
<Image style={styles.itemImage} source={{ uri: data }} />
</View>
)
})}
</Swiper>
)
}
For test above component I used follwing test file ,
import React from 'react';
import renderer from 'react-test-renderer';
import ImageSlider from '../../../src/components/imageSlider/ImageSlider';
test('renders correctly', () => {
const tree = renderer.create(<ImageSlider />).toJSON();
expect(tree).toMatchSnapshot();
});
When I'm run npm test command and after I got following error
TypeError: Cannot read property 'map' of undefined
Can anyone help me to slove this problem , Thank you
In your test, you're creating an ImageSlider without any parameters:
<ImageSlider />
In ImageSlider, you try to map the property images:
images.map( //etc
Because you didn't pass in an images parameter/property, images is undefined when you try to map it. To solve, this pass in value for images in your test:
<ImageSlider images={YOUR_TEST_IMAGES_DATA}/>
The other option is to redesign ImageSlider so that it fails gracefully if images is undefined. But, then there wouldn't be much a point in doing the test (unless the test was to see what happens if no parameter is passed in)
I have below webview component, I wanted the link to be opened in a mobile browser app rather than in inside current webview in my app.
return() {
<WebView source={{ html: `Google`}} />
}
This worked for me.
import { WebView, Linking, NavState } from 'react-native';
const html = `
Google
Twitter
`
class WebViewWrapper extends Component {
private webview;
handleNavigationStateChange = (event: NavState) => {
if (event.url) {
this.webview.stopLoading();
Linking.openURL(event.url);
}
};
render() {
return (
<WebView
originWhitelist={['*']}
ref={ref => {
this.webview = ref;
}}
source={{ html }}
onNavigationStateChange={this.handleNavigationStateChange}
/>
);
}
}
you can do this:
import { Linking } from 'react-native';
on you launch function
Linking.openURL( some_url );
For more details, follow this full example: Just what you want
Calling stopLoading freezes the WebView and links may stop working after pressing them once. Better to use onShouldStartLoadWithRequest (API Reference).
So the code could look something like this:
import { Linking } from 'react-native';
import { WebView } from 'react-native-webview';
const html = `
Google
Twitter
`;
const shouldStartLoadWithRequest = (req) => {
// open the link in native browser
Linking.openURL(req.url);
// returning false prevents WebView to navigate to new URL
return false;
};
const MyComponent = () => (
<WebView
originWhitelist={['*']}
source={{ html }}
onShouldStartLoadWithRequest={shouldStartLoadWithRequest}
/>
);
export default MyComponent;
Note that onShouldStartLoadWithRequest behaves a bit differently on iOS.
Try this one. This will save your time and patience :)
import HTML from 'react-native-render-html';
<HTML
html={this.state.content.description}
// imagesMaxWidth={Dimensions.get('window').width}
onLinkPress={(evt, href) => { Linking.openURL(href) }}
/>
Fully supportive of android, ios and Expo too. And has some cool customisations you can try with.
https://www.npmjs.com/package/react-native-render-html
I want to use external web page in my React Native App . I have button on my app and want to open external web page onPress button in my app not on browser.
I have tried WEBVIEW but not helped me.
now I have Tried this :
<HTMLView
value={this.props.html}
onLinkPress={(url) => alert('clicked link: ', url)}
/>
how can i do this ?
I have tried this and its working for me.
install react-native-custom-tabs using this command
npm install react-native-custom-tabs --save
and than link custom tabs package using
react-native link react-native-custom-tabs
and than call it
import {CustomTabs,ANIMATIONS_SLIDE,ANIMATIONS_FADE} from 'react-native-custom-tabs';
openCustomizedCustomTabs() {
this.openGoogle({
toolbarColor: '#607D8B',
enableUrlBarHiding: true,
showPageTitle: true,
enableDefaultShare: true,
animations: ANIMATIONS_SLIDE
});
}
errorOccur() {
this.openGoogle({
//toolbarColor: '607D8B', // <--- Invalid toolbar color.
enableUrlBarHiding: '#607D8B', // <-- Type Error.
})
}
openGoogle(option) {
CustomTabs.openURL('https://www.google.com', option).then((launched: boolean) => {
console.log(`Launched custom tabs: ${launched}`);
}).catch(err => {
console.error(err)
});
}
render(){
return <Button marginTop={10} onPress={() => this.openCustomizedCustomTabs()}>
Custom Tab
</Button>
}
and run app.
function renderNode(node, index, siblings, parent, defaultRenderer) {
if (node.name == 'iframe') {
const a = node.attribs;
const iframeHtml = `<iframe src="${a.src}"></iframe>`;
return (
<View key={index} style={{width: Number(a.width), height: Number(a.height)}}>
<WebView source={{html: iframeHtml}} />
</View>
);
}
}
class Page extends React.Component {
render() {
const htmlContent = `
<div>
<iframe src={this.props.utl} width="360" height="300" />
</div>
return (
<HTMLView value={htmlContent} renderNode={renderNode} />
);
}
}
then use it like:
<Page url="the url here..." />
React Native WebView Component has been Added in new Release to Documentation .
https://facebook.github.io/react-native/docs/webview.html
import React, { Component } from 'react';
import { WebView } from 'react-native';
class MyWeb extends Component {
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/>
);
}
}
I don't really clear how to implement onMessage and postMessage, can I get whole web page but only from react native side.
I mean, I will inject this code using injectedJavaScript
var markup = document.documentElement.innerHTML
window.postMessage(markup)
and I will receive the result using onMessage. Is it posible cause so far I can't do that
yes you can do this all you to have to do is use window.postMessage("message") from your web-page that is going to load in WebView and you can see that message in onMessage prop.
Example:
class Test extends React.Component{
constructor(props){
super(props);
this.state:{
html:''
}
}
componentWillMount(){
this.setState({
html : `<html>
<head>
<script>
window.postMessage("Messga from webView")
</script>
</head>
<body><h1>Hello from webView</h1></body>
</html>`
})
}
render(){
return (
<View style={{flex: 1}}>
<WebView
ref={(reff) => {
this.webView = reff;
}}
source={{html: this.state.html}}
style={[styles.flex1, styles.padding5]}
onMessage={(event)=>{
let message = event.nativeEvent.data;
/* event.nativeEvent.data must be string, i.e. window.postMessage
should send only string.
* */
}}
onNavigationStateChange={(evt)=>{}}
onError={(e) => {
console.warn('error occured', e)
}}/>
</View>
)
}
}
I just added a sample html and rendered it in WebView, you can do the same in your page that you are going to load in WebView.
Or another solution is:
You can use injectedJavaScript or injectJavaScript props of WebView as described here.
postMessage is deprecated :: and now you have to use window.ReactNativeWebView.postMessage(data)
const injectedJavascript = `(function() {
window.postMessage = function(data) {
window.ReactNativeWebView.postMessage(data);
};
})()`;
for a full imagination of a component will be:
export const WebViewComponent = (props) => {
const webViewScript = `
setTimeout(function() {
window.ReactNativeWebView.postMessage(/*your pushed data back to onMessage 'event.nativeEvent.data'*/);
}, 2500);
true; // note: this is required, or you'll sometimes get silent failures
`;
return (
<WebView
source={{
uri: `https://example.com`,
}}
automaticallyAdjustContentInsets={false}
scrollEnabled={false}
onMessage={(event) => {
// do something with `event.nativeEvent.data`
}}
javaScriptEnabled={true}
injectedJavaScript={webViewScript}
domStorageEnabled={true}
style={{ width: "100%", height: /*webViewHeight*/ }}
/>
);
};
Actually
i was looking at the documentation since i use the injectJavascript function of the react native´s webview. And in here https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage , it says that for extensions we need to use a "*" as a property .
So it wouldn´t be like this "window.postMessage("Messga from webView")"
Instead it will need to be window.postMessage("Messga from webView","*") to work.
I can see my Text: I am HomeScreen as well when i compile the project. My problem is when adding a Image , it shows the error HomeScreen.js: Unexpected token .
I can't see my code has any problem . Is any one can tell me what step i miss it ? That would be appreciated.
Here is my HomeScreen.js:
import React, { Component } from 'react';
import { View, Text, Image } from 'react-native';
class HomeScreen extends Component {
static navigationOptions = {
title: 'Home'
};
// When i add Image , i will get a error.
render(){
return (
<View>
<Image
source={require(../img/home.png)}
fadeDuration={0}
style={{width: 20, height: 20}}
/>
<Text>I am HomeScreen</Text>
</View>
);
}
};
export default HomeScreen;
Here is my root:
source={require(../img/home.png) should be source={require('../img/home.png') however whenever u add images u need to restart web server .just restart by react-native start
For your webpack to run I think all of your js files should be in components folder try replacing your HomeScreen.js file into components folder and run it again .Hope it works
It is because you missed single quote
source={require('../img/home.png')}