react-native-inappbrowser icon indicating copy to clipboard operation
react-native-inappbrowser copied to clipboard

InAppBrowser cancel closes the modal its in

Open number1hustler opened this issue 1 year ago • 4 comments

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>
  );
};

number1hustler avatar May 13 '24 21:05 number1hustler

the same issue occurs in my application

BadLice avatar May 29 '24 09:05 BadLice

@BadLice Let me know if you ever find a resolution please!

number1hustler avatar May 30 '24 17:05 number1hustler

Solution: Remove these lines of code:

UIViewController *ctrl = RCTPresentedViewController();
  NSString* animationKey = @"dismissInAppBrowser";
  [ctrl.view.layer addAnimation:transition forKey:animationKey];
  [ctrl dismissViewControllerAnimated:NO completion:^{
    [ctrl.view.layer removeAnimationForKey:animationKey];
  }];

From this method: - (void)dismissWithoutAnimation:(SFSafariViewController *)controller

Because at this time the presentedController is not Safari controller anymore.

thuongtv-vn avatar Jun 10 '24 10:06 thuongtv-vn

Hi @thuongtv-vn,

Thank you for your response, your patch resolved my issue! Do you plan to open a PR?

BadLice avatar Jul 01 '24 13:07 BadLice