React Native webview redirect not working
up vote
0
down vote
favorite
I am building a react native app with webview inside.
My web, let's say https://exampleone.com
, is a view with a button inside it. When user click the button, it will goes to https://exampleone.com/clicked
. After succeed, it should redirect to https://exampletwoo.com
, but nothing happen.
This is my code so far
<WebView
source={{uri: this.state.url_after}}
ref={c => {this.WebView = c;}}
onNavigationStateChange={this.navigationStateChangedHandler} />
And
navigationStateChangedHandler = ({url}) => {
console.log(url);
};
the log showed https://exampletwoo.com
but nothing happen, webview still showing https://exampleone.com/clicked
. How to achieve my goal?
Edit
Additional information
OS : Android & IoS, but for debugging I use Android
RN version : "0.57.1",
I am using Webview from community as React Native officially suggested https://github.com/react-native-community/react-native-webview with version "^2.5.0"
note :
Webview not showing the right page although the url already changed to https://exampletwoo.com
EDIT#2
I have tried to use https://exampletwoo.com
directly to webview and it's showing nothing. So I guess, it is all because https://exampletwoo.com
is using .xhtml.
Thanks in advance!
react-native webview url-redirection
add a comment |
up vote
0
down vote
favorite
I am building a react native app with webview inside.
My web, let's say https://exampleone.com
, is a view with a button inside it. When user click the button, it will goes to https://exampleone.com/clicked
. After succeed, it should redirect to https://exampletwoo.com
, but nothing happen.
This is my code so far
<WebView
source={{uri: this.state.url_after}}
ref={c => {this.WebView = c;}}
onNavigationStateChange={this.navigationStateChangedHandler} />
And
navigationStateChangedHandler = ({url}) => {
console.log(url);
};
the log showed https://exampletwoo.com
but nothing happen, webview still showing https://exampleone.com/clicked
. How to achieve my goal?
Edit
Additional information
OS : Android & IoS, but for debugging I use Android
RN version : "0.57.1",
I am using Webview from community as React Native officially suggested https://github.com/react-native-community/react-native-webview with version "^2.5.0"
note :
Webview not showing the right page although the url already changed to https://exampletwoo.com
EDIT#2
I have tried to use https://exampletwoo.com
directly to webview and it's showing nothing. So I guess, it is all because https://exampletwoo.com
is using .xhtml.
Thanks in advance!
react-native webview url-redirection
Please add here additional info: 1) OS (android or ios?) and 2) if you use the webview from RN or the external package maintained by community. Also add 3) the RN version you are using.
– Florin Dobre
2 days ago
@FlorinDobre I have edited my question
– fajar ainul
2 days ago
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am building a react native app with webview inside.
My web, let's say https://exampleone.com
, is a view with a button inside it. When user click the button, it will goes to https://exampleone.com/clicked
. After succeed, it should redirect to https://exampletwoo.com
, but nothing happen.
This is my code so far
<WebView
source={{uri: this.state.url_after}}
ref={c => {this.WebView = c;}}
onNavigationStateChange={this.navigationStateChangedHandler} />
And
navigationStateChangedHandler = ({url}) => {
console.log(url);
};
the log showed https://exampletwoo.com
but nothing happen, webview still showing https://exampleone.com/clicked
. How to achieve my goal?
Edit
Additional information
OS : Android & IoS, but for debugging I use Android
RN version : "0.57.1",
I am using Webview from community as React Native officially suggested https://github.com/react-native-community/react-native-webview with version "^2.5.0"
note :
Webview not showing the right page although the url already changed to https://exampletwoo.com
EDIT#2
I have tried to use https://exampletwoo.com
directly to webview and it's showing nothing. So I guess, it is all because https://exampletwoo.com
is using .xhtml.
Thanks in advance!
react-native webview url-redirection
I am building a react native app with webview inside.
My web, let's say https://exampleone.com
, is a view with a button inside it. When user click the button, it will goes to https://exampleone.com/clicked
. After succeed, it should redirect to https://exampletwoo.com
, but nothing happen.
This is my code so far
<WebView
source={{uri: this.state.url_after}}
ref={c => {this.WebView = c;}}
onNavigationStateChange={this.navigationStateChangedHandler} />
And
navigationStateChangedHandler = ({url}) => {
console.log(url);
};
the log showed https://exampletwoo.com
but nothing happen, webview still showing https://exampleone.com/clicked
. How to achieve my goal?
Edit
Additional information
OS : Android & IoS, but for debugging I use Android
RN version : "0.57.1",
I am using Webview from community as React Native officially suggested https://github.com/react-native-community/react-native-webview with version "^2.5.0"
note :
Webview not showing the right page although the url already changed to https://exampletwoo.com
EDIT#2
I have tried to use https://exampletwoo.com
directly to webview and it's showing nothing. So I guess, it is all because https://exampletwoo.com
is using .xhtml.
Thanks in advance!
react-native webview url-redirection
react-native webview url-redirection
edited 6 hours ago
asked Nov 16 at 14:04
fajar ainul
281312
281312
Please add here additional info: 1) OS (android or ios?) and 2) if you use the webview from RN or the external package maintained by community. Also add 3) the RN version you are using.
– Florin Dobre
2 days ago
@FlorinDobre I have edited my question
– fajar ainul
2 days ago
add a comment |
Please add here additional info: 1) OS (android or ios?) and 2) if you use the webview from RN or the external package maintained by community. Also add 3) the RN version you are using.
– Florin Dobre
2 days ago
@FlorinDobre I have edited my question
– fajar ainul
2 days ago
Please add here additional info: 1) OS (android or ios?) and 2) if you use the webview from RN or the external package maintained by community. Also add 3) the RN version you are using.
– Florin Dobre
2 days ago
Please add here additional info: 1) OS (android or ios?) and 2) if you use the webview from RN or the external package maintained by community. Also add 3) the RN version you are using.
– Florin Dobre
2 days ago
@FlorinDobre I have edited my question
– fajar ainul
2 days ago
@FlorinDobre I have edited my question
– fajar ainul
2 days ago
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
What about using manual reloading?
navigationStateChangedHandler = ({url}) => {
this.WebView.reload()
};
Sorry for my slow response, since it is weekend. Thanks for your solution, but it is still not working. I think with this code, my webview will stack onhttps://exampleone.com/clicked
– fajar ainul
2 days ago
any other suggestion?
– fajar ainul
2 days ago
add a comment |
up vote
0
down vote
import React, {Component} from 'react';
import {
StyleSheet,
Dimensions,
Platform,
WebView,
SafeAreaView,
} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.webViewRef = null;
this.state = { currentUrl: '' }
// If the first url does the redirection I noticed webview might trigger some
// suspicious content error and might refuse it to load, you can try
// to add it here and check if it works, if not just change it in
// componentDidMount as below
}
componentDidMount() {
this.setState({ currentUrl: '<AD_THE_URL_THAT_DOES_THE_REDIRECTION_HERE'> })
}
onNavigationStateChange = (data) => {
const { url } = data;
this.setState({ currentUrl: url })
// !If you have other redirect urls when navigating you might want
// to trigger the above setState only if the url is NOT a redirection one,
// so you don't force a re-render for redirection urls!
}
render() {
if (!this.state.currentUrl) return null;
return (
<SafeAreaView style={[styles.container]}>
<WebView
ref={(element) => { this.webViewRef = element; }} // this can be used later for `onBack` and `reloads`
source={{ uri: this.state.currentUrl }}
onNavigationStateChange={this.onNavigationStateChange}
scalesPageToFit={true}
automaticallyAdjustContentInsets={true}
useWebKit={false}
startInLoadingState={true}
onError={(err)=>console.warn(err)}
onLoadStart={() => console.warn('started')}
onLoadEnd={() => console.warn('ended')}
scrollEnabled={true}
domStorageEnabled={true}
javaScriptEnabled={true}
style={styles.webView}
/>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
overflow: 'hidden',
},
webView: {
margin: 10,
flex: 0,
height: Dimensions.get('window').height,
},
});
thanks for your answer, logically your solution is almost solve my problem, but actually it is not. With your solution, my webview will callhttps://exampleone.com/clicked
twice which is not good for my apps.
– fajar ainul
2 days ago
and still my apps stack onhttps://exampleone.com/clicked
although url is already changes tohttps://exampletwoo.com
– fajar ainul
2 days ago
I edited my answer and added some missing info.
– Florin Dobre
yesterday
I also tried this way, navigationStateChangedHandler = ({url}) => { if (url.startsWith('exampletwoo.com')) { this.setState({ url_after : url }) } }; the state change successfully, but the page still won't showing the right page
– fajar ainul
yesterday
Don't change the state if that is a redirect url, just return the old state.
– Florin Dobre
yesterday
|
show 3 more comments
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
What about using manual reloading?
navigationStateChangedHandler = ({url}) => {
this.WebView.reload()
};
Sorry for my slow response, since it is weekend. Thanks for your solution, but it is still not working. I think with this code, my webview will stack onhttps://exampleone.com/clicked
– fajar ainul
2 days ago
any other suggestion?
– fajar ainul
2 days ago
add a comment |
up vote
0
down vote
What about using manual reloading?
navigationStateChangedHandler = ({url}) => {
this.WebView.reload()
};
Sorry for my slow response, since it is weekend. Thanks for your solution, but it is still not working. I think with this code, my webview will stack onhttps://exampleone.com/clicked
– fajar ainul
2 days ago
any other suggestion?
– fajar ainul
2 days ago
add a comment |
up vote
0
down vote
up vote
0
down vote
What about using manual reloading?
navigationStateChangedHandler = ({url}) => {
this.WebView.reload()
};
What about using manual reloading?
navigationStateChangedHandler = ({url}) => {
this.WebView.reload()
};
answered Nov 16 at 14:12
Łukasz Blaszyński
12
12
Sorry for my slow response, since it is weekend. Thanks for your solution, but it is still not working. I think with this code, my webview will stack onhttps://exampleone.com/clicked
– fajar ainul
2 days ago
any other suggestion?
– fajar ainul
2 days ago
add a comment |
Sorry for my slow response, since it is weekend. Thanks for your solution, but it is still not working. I think with this code, my webview will stack onhttps://exampleone.com/clicked
– fajar ainul
2 days ago
any other suggestion?
– fajar ainul
2 days ago
Sorry for my slow response, since it is weekend. Thanks for your solution, but it is still not working. I think with this code, my webview will stack on
https://exampleone.com/clicked
– fajar ainul
2 days ago
Sorry for my slow response, since it is weekend. Thanks for your solution, but it is still not working. I think with this code, my webview will stack on
https://exampleone.com/clicked
– fajar ainul
2 days ago
any other suggestion?
– fajar ainul
2 days ago
any other suggestion?
– fajar ainul
2 days ago
add a comment |
up vote
0
down vote
import React, {Component} from 'react';
import {
StyleSheet,
Dimensions,
Platform,
WebView,
SafeAreaView,
} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.webViewRef = null;
this.state = { currentUrl: '' }
// If the first url does the redirection I noticed webview might trigger some
// suspicious content error and might refuse it to load, you can try
// to add it here and check if it works, if not just change it in
// componentDidMount as below
}
componentDidMount() {
this.setState({ currentUrl: '<AD_THE_URL_THAT_DOES_THE_REDIRECTION_HERE'> })
}
onNavigationStateChange = (data) => {
const { url } = data;
this.setState({ currentUrl: url })
// !If you have other redirect urls when navigating you might want
// to trigger the above setState only if the url is NOT a redirection one,
// so you don't force a re-render for redirection urls!
}
render() {
if (!this.state.currentUrl) return null;
return (
<SafeAreaView style={[styles.container]}>
<WebView
ref={(element) => { this.webViewRef = element; }} // this can be used later for `onBack` and `reloads`
source={{ uri: this.state.currentUrl }}
onNavigationStateChange={this.onNavigationStateChange}
scalesPageToFit={true}
automaticallyAdjustContentInsets={true}
useWebKit={false}
startInLoadingState={true}
onError={(err)=>console.warn(err)}
onLoadStart={() => console.warn('started')}
onLoadEnd={() => console.warn('ended')}
scrollEnabled={true}
domStorageEnabled={true}
javaScriptEnabled={true}
style={styles.webView}
/>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
overflow: 'hidden',
},
webView: {
margin: 10,
flex: 0,
height: Dimensions.get('window').height,
},
});
thanks for your answer, logically your solution is almost solve my problem, but actually it is not. With your solution, my webview will callhttps://exampleone.com/clicked
twice which is not good for my apps.
– fajar ainul
2 days ago
and still my apps stack onhttps://exampleone.com/clicked
although url is already changes tohttps://exampletwoo.com
– fajar ainul
2 days ago
I edited my answer and added some missing info.
– Florin Dobre
yesterday
I also tried this way, navigationStateChangedHandler = ({url}) => { if (url.startsWith('exampletwoo.com')) { this.setState({ url_after : url }) } }; the state change successfully, but the page still won't showing the right page
– fajar ainul
yesterday
Don't change the state if that is a redirect url, just return the old state.
– Florin Dobre
yesterday
|
show 3 more comments
up vote
0
down vote
import React, {Component} from 'react';
import {
StyleSheet,
Dimensions,
Platform,
WebView,
SafeAreaView,
} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.webViewRef = null;
this.state = { currentUrl: '' }
// If the first url does the redirection I noticed webview might trigger some
// suspicious content error and might refuse it to load, you can try
// to add it here and check if it works, if not just change it in
// componentDidMount as below
}
componentDidMount() {
this.setState({ currentUrl: '<AD_THE_URL_THAT_DOES_THE_REDIRECTION_HERE'> })
}
onNavigationStateChange = (data) => {
const { url } = data;
this.setState({ currentUrl: url })
// !If you have other redirect urls when navigating you might want
// to trigger the above setState only if the url is NOT a redirection one,
// so you don't force a re-render for redirection urls!
}
render() {
if (!this.state.currentUrl) return null;
return (
<SafeAreaView style={[styles.container]}>
<WebView
ref={(element) => { this.webViewRef = element; }} // this can be used later for `onBack` and `reloads`
source={{ uri: this.state.currentUrl }}
onNavigationStateChange={this.onNavigationStateChange}
scalesPageToFit={true}
automaticallyAdjustContentInsets={true}
useWebKit={false}
startInLoadingState={true}
onError={(err)=>console.warn(err)}
onLoadStart={() => console.warn('started')}
onLoadEnd={() => console.warn('ended')}
scrollEnabled={true}
domStorageEnabled={true}
javaScriptEnabled={true}
style={styles.webView}
/>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
overflow: 'hidden',
},
webView: {
margin: 10,
flex: 0,
height: Dimensions.get('window').height,
},
});
thanks for your answer, logically your solution is almost solve my problem, but actually it is not. With your solution, my webview will callhttps://exampleone.com/clicked
twice which is not good for my apps.
– fajar ainul
2 days ago
and still my apps stack onhttps://exampleone.com/clicked
although url is already changes tohttps://exampletwoo.com
– fajar ainul
2 days ago
I edited my answer and added some missing info.
– Florin Dobre
yesterday
I also tried this way, navigationStateChangedHandler = ({url}) => { if (url.startsWith('exampletwoo.com')) { this.setState({ url_after : url }) } }; the state change successfully, but the page still won't showing the right page
– fajar ainul
yesterday
Don't change the state if that is a redirect url, just return the old state.
– Florin Dobre
yesterday
|
show 3 more comments
up vote
0
down vote
up vote
0
down vote
import React, {Component} from 'react';
import {
StyleSheet,
Dimensions,
Platform,
WebView,
SafeAreaView,
} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.webViewRef = null;
this.state = { currentUrl: '' }
// If the first url does the redirection I noticed webview might trigger some
// suspicious content error and might refuse it to load, you can try
// to add it here and check if it works, if not just change it in
// componentDidMount as below
}
componentDidMount() {
this.setState({ currentUrl: '<AD_THE_URL_THAT_DOES_THE_REDIRECTION_HERE'> })
}
onNavigationStateChange = (data) => {
const { url } = data;
this.setState({ currentUrl: url })
// !If you have other redirect urls when navigating you might want
// to trigger the above setState only if the url is NOT a redirection one,
// so you don't force a re-render for redirection urls!
}
render() {
if (!this.state.currentUrl) return null;
return (
<SafeAreaView style={[styles.container]}>
<WebView
ref={(element) => { this.webViewRef = element; }} // this can be used later for `onBack` and `reloads`
source={{ uri: this.state.currentUrl }}
onNavigationStateChange={this.onNavigationStateChange}
scalesPageToFit={true}
automaticallyAdjustContentInsets={true}
useWebKit={false}
startInLoadingState={true}
onError={(err)=>console.warn(err)}
onLoadStart={() => console.warn('started')}
onLoadEnd={() => console.warn('ended')}
scrollEnabled={true}
domStorageEnabled={true}
javaScriptEnabled={true}
style={styles.webView}
/>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
overflow: 'hidden',
},
webView: {
margin: 10,
flex: 0,
height: Dimensions.get('window').height,
},
});
import React, {Component} from 'react';
import {
StyleSheet,
Dimensions,
Platform,
WebView,
SafeAreaView,
} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.webViewRef = null;
this.state = { currentUrl: '' }
// If the first url does the redirection I noticed webview might trigger some
// suspicious content error and might refuse it to load, you can try
// to add it here and check if it works, if not just change it in
// componentDidMount as below
}
componentDidMount() {
this.setState({ currentUrl: '<AD_THE_URL_THAT_DOES_THE_REDIRECTION_HERE'> })
}
onNavigationStateChange = (data) => {
const { url } = data;
this.setState({ currentUrl: url })
// !If you have other redirect urls when navigating you might want
// to trigger the above setState only if the url is NOT a redirection one,
// so you don't force a re-render for redirection urls!
}
render() {
if (!this.state.currentUrl) return null;
return (
<SafeAreaView style={[styles.container]}>
<WebView
ref={(element) => { this.webViewRef = element; }} // this can be used later for `onBack` and `reloads`
source={{ uri: this.state.currentUrl }}
onNavigationStateChange={this.onNavigationStateChange}
scalesPageToFit={true}
automaticallyAdjustContentInsets={true}
useWebKit={false}
startInLoadingState={true}
onError={(err)=>console.warn(err)}
onLoadStart={() => console.warn('started')}
onLoadEnd={() => console.warn('ended')}
scrollEnabled={true}
domStorageEnabled={true}
javaScriptEnabled={true}
style={styles.webView}
/>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
overflow: 'hidden',
},
webView: {
margin: 10,
flex: 0,
height: Dimensions.get('window').height,
},
});
edited 42 mins ago
answered Nov 16 at 15:20
Florin Dobre
3,60412540
3,60412540
thanks for your answer, logically your solution is almost solve my problem, but actually it is not. With your solution, my webview will callhttps://exampleone.com/clicked
twice which is not good for my apps.
– fajar ainul
2 days ago
and still my apps stack onhttps://exampleone.com/clicked
although url is already changes tohttps://exampletwoo.com
– fajar ainul
2 days ago
I edited my answer and added some missing info.
– Florin Dobre
yesterday
I also tried this way, navigationStateChangedHandler = ({url}) => { if (url.startsWith('exampletwoo.com')) { this.setState({ url_after : url }) } }; the state change successfully, but the page still won't showing the right page
– fajar ainul
yesterday
Don't change the state if that is a redirect url, just return the old state.
– Florin Dobre
yesterday
|
show 3 more comments
thanks for your answer, logically your solution is almost solve my problem, but actually it is not. With your solution, my webview will callhttps://exampleone.com/clicked
twice which is not good for my apps.
– fajar ainul
2 days ago
and still my apps stack onhttps://exampleone.com/clicked
although url is already changes tohttps://exampletwoo.com
– fajar ainul
2 days ago
I edited my answer and added some missing info.
– Florin Dobre
yesterday
I also tried this way, navigationStateChangedHandler = ({url}) => { if (url.startsWith('exampletwoo.com')) { this.setState({ url_after : url }) } }; the state change successfully, but the page still won't showing the right page
– fajar ainul
yesterday
Don't change the state if that is a redirect url, just return the old state.
– Florin Dobre
yesterday
thanks for your answer, logically your solution is almost solve my problem, but actually it is not. With your solution, my webview will call
https://exampleone.com/clicked
twice which is not good for my apps.– fajar ainul
2 days ago
thanks for your answer, logically your solution is almost solve my problem, but actually it is not. With your solution, my webview will call
https://exampleone.com/clicked
twice which is not good for my apps.– fajar ainul
2 days ago
and still my apps stack on
https://exampleone.com/clicked
although url is already changes to https://exampletwoo.com
– fajar ainul
2 days ago
and still my apps stack on
https://exampleone.com/clicked
although url is already changes to https://exampletwoo.com
– fajar ainul
2 days ago
I edited my answer and added some missing info.
– Florin Dobre
yesterday
I edited my answer and added some missing info.
– Florin Dobre
yesterday
I also tried this way, navigationStateChangedHandler = ({url}) => { if (url.startsWith('exampletwoo.com')) { this.setState({ url_after : url }) } }; the state change successfully, but the page still won't showing the right page
– fajar ainul
yesterday
I also tried this way, navigationStateChangedHandler = ({url}) => { if (url.startsWith('exampletwoo.com')) { this.setState({ url_after : url }) } }; the state change successfully, but the page still won't showing the right page
– fajar ainul
yesterday
Don't change the state if that is a redirect url, just return the old state.
– Florin Dobre
yesterday
Don't change the state if that is a redirect url, just return the old state.
– Florin Dobre
yesterday
|
show 3 more comments
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53339394%2freact-native-webview-redirect-not-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please add here additional info: 1) OS (android or ios?) and 2) if you use the webview from RN or the external package maintained by community. Also add 3) the RN version you are using.
– Florin Dobre
2 days ago
@FlorinDobre I have edited my question
– fajar ainul
2 days ago