Flash of previous page while navigating between pages in react js application - ios

Question

I am developing a react js application for ios and android. In my application while navigating from one page to another,a flash of previous page is displaying for 1 second and then my next page is loading.This issue is prevalent only in ios app.
Issue does not appear while checking in browser safari,chrome.Only in app
Please provide solution.

Answer 1

We are not using react native and react router.
Few pages are developed in reactjs and integrated in to an existing mobile app.
In the above code:
else {
console.log('clicked');
window.location.href = path + '?id=' + id + '&time=' `window.sessionStorage.getItem('time') + '&prodId=' + productId + '&qty=' + `qty + '&storeCall=true';
}
here we are navigating to another jsx page with window.location.href
While navigating a getting issues in ios app.Flash of previous page showing up for a second

Answer 2

import React from 'react';
import Copyright from './Copyright.jsx';
import { browserHistory } from 'react-router';
import axios from 'axios';
import envConstant from '../../../../../config/labelConstants.js';
import { ClipLoader } from 'react-spinners';
var x=0;
let submitOrder, flag = "false", footerBtn = '', vendor;
let closeFunc;
class Footer extends React.Component {
constructor(props) {
super(props);
this.orderSubmit = this.orderSubmit.bind(this);
this.validateSubmit = this.validateSubmit.bind(this);
this.validateNetwork = this.validateNetwork.bind(this);
this.disableBtn = this.disableBtn.bind(this);
this.state = {
data: 'Initial data....',
price: 'total',
loading:false
}
this.propTypes = {
alertFunc: React.PropTypes.func,
couponAvail: React.PropTypes.func,
alertClose:React.PropTypes.func
};
};
validateSubmit() {
const react = this;
var submit = false;
var phoneNum;
var fname = this.props.UserDetails.refs.fname.value;
var lname = this.props.UserDetails.refs.lname.value;
var phone = this.props.UserDetails.refs.phone.value.replace(/[-.]/gi, '');
if (phone != null) {
phoneNum = phone.toString();
}
var email = this.props.UserDetails.refs.email.value;
var agree = window.sessionStorage.getItem('agree');
submitOrder = {};
let prodId, qty;
if (null == window.sessionStorage.getItem('prodID') && null == window.sessionStorage.getItem('qty')) {
prodId = window.sessionStorage.getItem('initprodID');
qty = 1;
} else {
prodId = window.sessionStorage.getItem('prodID');
qty = window.sessionStorage.getItem('qty');
}
submitOrder = {
fname: this.props.UserDetails.refs.fname.value,
lname: this.props.UserDetails.refs.lname.value,
coupon: window.sessionStorage.getItem('successCoupon'),
email: this.props.UserDetails.refs.email.value,
phoneNum: this.props.UserDetails.refs.phone.value.replace(/[-.]/gi, ''),
id: window.sessionStorage.getItem('id'),
qty: qty,
prodID: prodId,
emailOptIn: window.sessionStorage.getItem('emailOptIn'),
smsOptIn: window.sessionStorage.getItem('smsOptIn'),
time: window.sessionStorage.getItem('time')
};
if (fname == null || fname == '') {
this.props.alertFunc(envConstant.enterDetails,react.props.UserDetails.refs.fname);
submit = false;
return false;
}
if (lname == null || lname == '') {
this.props.alertFunc(envConstant.enterDetails,react.props.UserDetails.refs.lname);
submit = false;
return false;
}
if (phoneNum == null || phoneNum == '') {
this.props.alertFunc(envConstant.enterDetails,react.props.UserDetails.refs.phone);
submit = false;
return false;
}
if (email == null || email == '') {
this.props.alertFunc(envConstant.enterDetails,react.props.UserDetails.refs.email);
submit = false;
return false;
}
if ('' != fname || null != fname || '' == lname || null != lname) {
submit = true;
}
if (null != fname || '' != fname) {
const re = /^[a-zA-Z\ ]*$/;
if (!re.test(fname)) {
this.props.alertFunc(envConstant.invalidName,react.props.UserDetails.refs.fname);
submit = false;
return false;
} else {
submit = true;
}
}
if (null != lname || '' != lname) {
const re = /^[a-zA-Z\'\-\. ]*$/;
if (!re.test(lname)) {
this.props.alertFunc(envConstant.invalidName,react.props.UserDetails.refs.lname);
submit = false;
return false;
} else {
submit = true;
}
}
if (null != phoneNum || '' != phoneNum) {
if (vendor == "boots") {
if (phoneNum.length != "11") {
this.props.alertFunc(envConstant.invalidPhnum,react.props.UserDetails.refs.phone);
submit = false;
return false;
} else {
submit = true;
}
} else if (vendor == "roi") {
const re = /^[0]+[0-9]*$/;
if (phoneNum.length != "11" || !re.test(phoneNum)) {
this.props.alertFunc(envConstant.invalidPhnum,react.props.UserDetails.refs.phone);
submit = false;
return false;
} else {
submit = true;
}
} else {
if (phoneNum.length != "10") {
this.props.alertFunc(envConstant.invalidPhnum,react.props.UserDetails.refs.phone);
submit = false;
return false;
} else {
submit = true;
}
}
}
if (null != email || '' != email) {
const re = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!re.test(email)) {
this.props.alertFunc(envConstant.invalidEmail,react.props.UserDetails.refs.email);
submit = false;
return false;
} else {
submit = true;
}
}
if (agree == "false" || null == agree) {
this.props.alertFunc(envConstant.agreeTerms);
submit = false;
return false;
}
if (submit == true) {
return true;
}
}
validateNetwork() {
var hasConn = window.navigator.onLine;
if (hasConn) {
return hasConn;
}
else {
this.props.alertFunc(envConstant.networkFailure);
}
}
orderSubmit(e) {
const react = this;
if (this.props.footer == envConstant.submitFoot) {
window.sessionStorage.setItem('id', this.props.id);
if (this.validateNetwork()) {
if (this.validateSubmit()) {
axios({
method: 'post',
url: react.props.urlValue + '/inputFields',
data: submitOrder
}).then((response) => {
this.setState({loading:true});
window.location.href = react.props.path;
});
}
}
}
if (this.props.footer == envConstant.orderInfoFoot) {
if (this.validateNetwork()) {
let qty, productId;
this.setState({loading:true});
if (null == window.sessionStorage.getItem('qty') || 'null' == `window.sessionStorage.getItem('qty')) {`
qty = 1;
productId = window.sessionStorage.getItem('initprodID');
} else {
qty = window.sessionStorage.getItem('qty');
productId = window.sessionStorage.getItem('prodID');
}
let path = this.props.path;
let id = this.props.id;
if (null != window.sessionStorage.getItem('coupon') && "null" != `window.sessionStorage.getItem('coupon')) {`
if (window.sessionStorage.getItem('errorcode') == '' && null != `window.sessionStorage.getItem('coupon') &&` `window.sessionStorage.getItem('couponApplied') == "true") {`
setTimeout(function () {
if (window.sessionStorage.getItem('status1') != 'failure') {
window.location.href = path + '?id=' + id + '&time=' + `window.sessionStorage.getItem('time') + '&prodId=' + productId + '&qty=' +` `qty + '&storeCall=true';`
}
},1500);
}
}
else {
console.log('clicked');
window.location.href = path + '?id=' + id + '&time=' + `window.sessionStorage.getItem('time') + '&prodId=' + productId + '&qty=' +` `qty + '&storeCall=true';`
}
}
}
if (this.props.footer == envConstant.ThankyouFoot) {
let callBackUrl = this.props.callBackUrl;
if (window.navigator.userAgent.includes("iPhone")) {
window.location = "QP_DONE:DONE";
} else {
try {
window.quickprint.onCheckoutComplete();
} catch (e) {
if (undefined != callBackUrl && '' != callBackUrl && null != callBackUrl) {
if (callBackUrl.includes('?')) {
window.location = callBackUrl + '?action=done';
} else {
window.location = callBackUrl + '&action=done';
}
}
}
}
}
}
componentDidMount() {
let footerHeight = this.refs.footerHeight.clientHeight;
window.sessionStorage.setItem('footerHeight', footerHeight);
}
disableBtn(id) {
window.sessionStorage.setItem('disable', "true");
if(window.sessionStorage.getItem('alert1'+id)=="0" || `window.sessionStorage.getItem('alert1'+id)=="1" || `window.sessionStorage.getItem('alert1'+id)==1){
alert(envConstant.priceInvalid);
}else{
x=0;
window.sessionStorage.setItem('alert1'+id,x++);
}
//this.props.alertFunc(envConstant.priceInvalid)
}
render() {
vendor = this.props.vendor;
let copyrightsWrapper;
if (vendor != "ts" && vendor != "roi") {
copyrightsWrapper = (
<Copyright copyRightMessage={this.props.copyRightMessage} />
);
}
if (typeof window !== 'undefined') {
window.sessionStorage.setItem('callBackUrl',this.props.callBackUrl);
if (window.sessionStorage.getItem('status') == "success" || `window.sessionStorage.getItem('status') == "") {`
if ((window.sessionStorage.getItem('status1') != "failure" || `window.sessionStorage.getItem('couponApplied') == "false") && `window.sessionStorage.getItem('flagDrop') != "true" &&` `window.sessionStorage.getItem('couponFocus') != "true") {
var discTotal = `window.sessionStorage.getItem('discount').split(this.props.currency);`
if (parseInt(discTotal[1]) > 998) {
window.sessionStorage.setItem('alert1'+this.props.id,x++);
this.disableBtn(this.props.id);
} else {
window.sessionStorage.setItem('disable', "false");
}
}
}
if (window.sessionStorage.getItem('status') == null) {
if (window.sessionStorage.getItem('invalid') != 'true') {
if (null == window.sessionStorage.getItem('total')) {
var initTotal = `window.sessionStorage.getItem('inittotal').split(this.props.currency);`
if (parseInt(initTotal[1]) > 998) {
window.sessionStorage.setItem('alert1'+this.props.id,1);
this.disableBtn(this.props.id);
} else {
window.sessionStorage.setItem('disable', "false");
}
} else {
var prodTotal = `window.sessionStorage.getItem('total').split(this.props.currency);`
if (parseInt(prodTotal[1]) > 998) {
window.sessionStorage.setItem('alert1'+this.props.id,1);
this.disableBtn(this.props.id);
} else {
window.sessionStorage.setItem('disable', "false");
}
}
}
}
if (window.sessionStorage.getItem('disable') == "true") {
footerBtn = (
<button type="button"
className="btn-off supp-color btn-w1" `disabled="disabled"> {this.props.footer}</button>`
);
} else {
footerBtn = (
<button ref="footerBtn" type="button" className="btn-on supp-color btn-`w1" onClick={this.orderSubmit}>{this.props.footer}</button>`
);
}
}else{
footerBtn = (
<button ref="footerBtn" type="button" className="btn-on supp-color btn-w1" >{this.props.footer}</button>
);
}
return (
<div className="op-footer footer_height" ref="footerHeight" id="footerValue">
{copyrightsWrapper}
<div className="background-white">
<div className={'sweet-loading '+ this.state.loading}>
<ClipLoader color={'#a0a0a0'} loading={this.state.loading}/>
</div>
{footerBtn}
</div>
</div>
);
}
}
export default Footer;