Actually I have a webview in react native and I am trying to open a url from that webview.Once the URL is loaded on pressing the bacǩ buttton it should navigate to previous page.How to navigate back to the webview page?
You can use reference of Webview and call goBack on that reference
<WebView
ref={ref => {
if (!ref) {
return;
}
this.webview = ref;
}}
/>
this.webview.goBack();
There's an option that you can try with is to have your webView inside a Modal that way you can control onBackPress.
Related
I am new to React native and I am trying to open my webpages(page1,page2) inside webview using react native, and my component's webview in the below example.
Here page1 contains button on clicking that button, page2 is opening in child window in external browser.
Can somebody please tell me how to open page2 inside the webview, so that the user can get a good experience?
Example: Component 1
{
<WebView
scalesPageToFit
startInLoadingState={true}
renderLoading={() => { return <Loading/> }}
**source={{uri:"url to page1"}}**
onShouldStartLoadWithRequest={request => {
return request.url.startsWith(domain);
}}
style={styles.web}
javaScriptEnabledAndroid={true}
javaScriptEnabled={true}
originWhitelist={[domain+"*"]}
/>
}
I found the below solution but was not able to implement it in my scenario.
https://github.com/facebook/react-native/pull/6886
I found the answer, this happened because of the latest react-native-webview version.
setSupportMultipleWindows={true} becomes true and in my case, it should be false.
I am using React Navigation. I created a custom header component myself. I call this component into other components. But the back button I use on the header doesn't work for other components. How can I add this to the react navigation stack.
navigation.back() or navigation.navigate('Home)
I get an error when I write.
Maybe you not transmit navigation? print console.log(navigation). And you can use navigation.goBack()
You can use this: function LeftMenu(props) { return ( <Drawer.Navigator initialRouteName={props.route} drawerContent={(props) => <Custom_Side_Menu {...props}/>} drawerContentOptions={{activeTintColor: 'rgb(219,218, 218)'}}> <Drawer.Screen name="Map" component={MapScreen}/> </Drawer.Navigator> ); }
And you can get navigation in props LeftMenu
Is it possible to add Video component into the react-native-snap-carousel? I want to try to create a carousel similar to Instagram's swipe
I was able to get swiping to work, but when I tried to add the video component from expo, it didn't show up.
const _renderItem = ({item, index}) => {
return (
<View>
<Video uri={item.uri}/>
<Text>{index} What are we trying to accomplish here {item.uri}</Text>
<ComponentVideo uri={item.uri} />
</View>
);
}
<ComponentVideo /> is another component I created, works normally. <Video /> is a component from expo that's inside ComponentVideo. I just brought it out to see if it works.
Thoughts?
Perhaps there's another package I should check out?
I am making a test with react navigaton and webview , I have 2 screens , Home and Details , at details screen I am calling / opening a webpage inside webview , let's say that I am calling stackoverflow.com (Page A) , my problem is that when user click a link of the stackoverflow page and navigate and after wants to go back to the previous page (Page A) , it doesn't go , its going or navigating to the Home screen !!!
how can I let The user go back to the previous page. ?
that 's how I am calling the page
<WebView
javaScriptEnabled
source={{uri: 'https://stackoverflow.com/'}}
style={{marginTop: 20}}
/>
As we know built in back button is not provided in iOs but it is provided in android .
So for considering both platform there is two possibility.
Android.
-> For android you have to define BackHandler so here are the step.
import it like this.
import {BackHandler } from 'react-native'.
initialize backhandler inside the life cycle methods.
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
}
handleBackPress = () => {
if (this.state.canGoBack) {
this.refWeb.goBack();
}
else{
this.props.navigation.goBack(null)
}
return true;
}
define a userdefine variable canGoBack inside the status.
constructor(props) {
super(props)
this.state = {
canGoBack: false
}
}
create a method which detect the change in navigation of the webview and bind it with the web view.
onNavigationStateChange(navState) {
this.setState({
canGoBack: navState.canGoBack
});
}
Bind it like this.
<WebView
ref={(myWeb) => this.refWeb = myWeb}
onNavigationStateChange={this.onNavigationStateChange.bind(this)}
source={{ uri: 'https://stackoverflow.com/questions/51712310/react-
native-webview-navigation-issue' }} />
And thsts it you are ready to go..
iOs
For iOs you didn't have to bother too much.
Create a button for back press above the webview or according to your design logic
Follow the above webview and navigation logic . forgot about the backhandler and set this code inside the onPress() method of your created button of backpress
if (this.state.canGoBack) {
this.refWeb.goBack();
}else{
this.props.navigation.goBack(null)
}
Note : Here I use stackNavigator for screen navigation so i used this.props.navigation.goBack(null) this code. if you didn't use it then dont consider this code and replace with your feasible navigator code in else condition
Thankyou..
it is possible to handle URL change on React Native web view.
I try to handle with onNavigationStateChange listener. But it only once time firing. When the page is load firing onNavigationStateChange. And when I navigate to another page, this event not firing.
Any idea?
With the reference to import { WebView } from 'react-native-webview' you may be using old version of webview please try updating or try following code/method to get current navigation path/url.
In your case onNavigationStateChange is not returning navigated path so you can try using onLoadProgress which return every change in url.
Instead of this
onNavigationStateChange={(state) => {
console.log("current_path",path);
}}
try this
This may get called multiple time please handle your condition accordingly.
onLoadProgress={({ path}) => {
console.log("current_path",path);
}}
This is how my WebView looks like
<WebView
source={{ uri: this.state.url }}
onLoadEnd={() => this.hideSpinner()}
onMessage={onMessage.bind(this)}
ref={WEBVIEW_REF => (this.WebViewRef = WEBVIEW_REF)}
startInLoadingState={true}
javaScriptEnabled={true}
domStorageEnabled={true}
onLoadProgress={({ nativeEvent }) => {
//your code goes here
}}
onNavigationStateChange={(state) => {
//your code goes here
}}
/>
Try upgrading your React Native (and React) version.
It should be fixed. Maybe was an old issue, because right now it's working OK.
Check this link: React Native webview get url
onNavigationStateChange={({ url, canGoBack }) => {
console.log("url>>>>>>>>",url);
}}
I load website link in react native WebView and its has button when i click that it navigate to default mobile browser.
Running application in react native android Current scenario: when i click button in website its navigate to default browser and am not getting the url i tried above suggestions.
Expected scenario: When i click that button in website it should not navigate to default browser and i want that url which is opened in default browser.
my react version: "react-native": "0.64.0",
onLoadProgress = {({ nativeEvent }) => {
//your code goes here
}}
onNavigationStateChange={navState => {
console.log("navState ", navState);
}}