Open
Description
IOS/Android/Both
"react-native-inappbrowser-reborn": "^3.7.0",
When the cancel/dismiss button is called the modal where inAppBrowser is launched from is closed -- the state of modalVisible doenst change in anyway and remains true
const ProductDetailsModal = ({
modalVisible,
setModalVisible,
selectedId,
}: {
modalVisible: boolean;
setModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
selectedId: string;
}) => {
const openInAppBrowser = async () => {
try {
await InAppBrowser.open(details?.productUrl, {
dismissButtonStyle: 'close',
preferredBarTintColor: colorTokens.light.purple.purple8,
preferredControlTintColor: colorTokens.light.purple.purple10,
modalEnabled: true,
// Android Properties
showTitle: true,
toolbarColor: '#6200EE',
secondaryToolbarColor: 'black',
enableUrlBarHiding: true,
enableDefaultShare: true,
forceCloseOnRedirection: true,
});
} catch (error) {
console.error('Failed to open in-app browser due to: ', error);
} finally {
// TODO this is more of a bug fix than a feature, the inAppBrowser closing turns the modal off and doesnt update state causing a bugged state
setModalVisible(false);
}
};
return (
<Modal animationType="slide" transparent={false} visible={modalVisible}>
<View style={styles.fullScreenView}>
<ScrollView>
<Pressable style={styles.closeButton} onPress={() => setModalVisible(false)}>
<Text>Close</Text>
</Pressable>
{details?.images?.length > 0 && (
<ImageCarousel images={prepareImagesForCarousel(details.images)} />
)}
<View style={styles.contentView}>
<Text>{details?.title}</Text>
<Text>{details?.description}</Text>
<Text>{details?.price}</Text>
</View>
{/* Open in an app browser to the booking page */}
<Button style={styles.bookButton} onPress={() => openInAppBrowser()}>
Book Now
</Button>
</ScrollView>
</View>
</Modal>
);
};
Metadata
Metadata
Assignees
Labels
No labels