react-native-inappbrowser
react-native-inappbrowser copied to clipboard
For android, always returning "chrome tabs activity destroyed"
Works fine in iOS devices but for android (tested on both Emulator and real Device), the response always returns as dismiss where I am expecting a successful response:
{
"message": "chrome tabs activity destroyed",
"type": "dismiss"
}
I debugged may app and Deep Linking and all the other stuffs works perfectly. SO No issue in my implementation.
My versions:
"react": "18.3.1",
"react-native": "0.75.4",
"react-native-inappbrowser-reborn": "^3.7.0",
Implemementation
import {ActivityIndicator, Linking, Modal, View} from 'react-native';
import InAppBrowser from 'react-native-inappbrowser-reborn';
import env from '../../utils/env';
import {bindActionCreators} from '@reduxjs/toolkit';
import {
customerSessionDetails,
loginResponseLoading,
loginUser,
removeCutomerSessionDetails,
} from '../../redux/actions/customer/auth';
import {connect} from 'react-redux';
import {useEffect, useState} from 'react';
import {
getLoginPageScreen,
setLoginPageScreen,
} from '../../asyncStorage/dataStore';
interface LoginComponentProps {
nonce: any;
sessionId: any;
isloginResponseLoading: boolean;
navigation: any;
removeCutomerSessionDetails: () => any;
loginResponseLoading: (payload: any) => void;
loginUser: (payload: any) => any;
customerSessionDetails: (data: any) => any;
navigationScreen: string;
}
const LoginComponent = (props: LoginComponentProps, ref: any) => {
const [currentPage, setCurrentPage] = useState('');
useEffect(() => {
getLoginPageScreen().then((res: any) => {
setCurrentPage(res);
});
if (
props.sessionId &&
props.nonce != undefined &&
currentPage === props.navigationScreen
) {
browserDetails();
}
}, [props.sessionId, props.nonce, currentPage, props.navigationScreen]);
const browserDetails = async () => {
const scimAuthGet = env.SCIM_AUTH_GET;
const authEndpoint =
scimAuthGet +
`?clientId=${env.LOGIN_CLIENT_ID}` +
`&nonce=${props.nonce}` +
`&redirectUri=${env.NEW_BASE_URL}/api/login/openurl` +
`&url=${env.DOMAIN_URL}/scim/Auth` +
`&state=${props.sessionId}`;
const deeplink = `${env.PROD_DEEPLINK_URL}myAppLogin/openurl`;
const options = {
// iOS Properties
ephemeralWebSession: true,
forceCloseOnRedirection: false,
showInRecents: true,
};
try {
if (await InAppBrowser.isAvailable()) {
InAppBrowser.openAuth(authEndpoint, deeplink, options)
.then(event => {
props.removeCutomerSessionDetails();
props.loginResponseLoading(false);
handleDeeplinkingListener(event);
})
.catch(error => {
console.error('ERROR AUTH', error);
});
} else {
Linking.openURL(authEndpoint);
}
} catch (error) {
console.error('ERROR BROWSER', error);
}
};
const handleDeeplinkingListener = async (event: any) => {
const eventUrl = event?.url;
if (!eventUrl?.includes('openurl')) {
return;
}
const {sessionId, navigation} = props;
const reqCodeRe = /reqcode=([^&]+)/g;
const [, reqCode] = reqCodeRe.exec(eventUrl) || [];
const data = {
sessionId,
reqCode,
};
const navigationScreen = props.navigationScreen;
setLoginPageScreen('');
props.loginUser({
data,
navigation,
navigationScreen,
});
};
return (
<View>
{props.isloginResponseLoading &&
currentPage === props.navigationScreen && (
<Modal
transparent
visible={props.isloginResponseLoading}
animationType="fade">
<View
style={{
flex: 1,
backgroundColor: 'rgba(0,0,0,0.5)',
justifyContent: 'center',
alignItems: 'center',
}}>
<ActivityIndicator size="large" color="#c72d21" />
</View>
</Modal>
)}
</View>
);
};
const mapStateToProps = (state: any) => {
return {
sessionId:
state.customerReducer.authReducer.loginReducer.sessionDetails.sessionId,
nonce: state.customerReducer.authReducer.loginReducer.sessionDetails.nonce,
isloginResponseLoading:
state.customerReducer.authReducer.loginReducer.loginResponseLoading,
};
};
const mapDispatchToProps = (dispatch: any) =>
bindActionCreators(
{
loginUser,
customerSessionDetails,
removeCutomerSessionDetails,
loginResponseLoading,
},
dispatch,
);
export default connect(mapStateToProps, mapDispatchToProps)(LoginComponent);