proyecto26 / react-native-inappbrowser

📱InAppBrowser for React Native (Android & iOS) 🤘
https://www.npmjs.com/package/react-native-inappbrowser-reborn
MIT License
1.32k stars 225 forks source link

InAppBrowser cancel closes the modal its in #454

Open number1hustler opened 4 months ago

number1hustler commented 4 months ago

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>
  );
};
BadLice commented 4 months ago

the same issue occurs in my application

number1hustler commented 4 months ago

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

thuongtv-vn commented 3 months ago

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.

BadLice commented 3 months ago

Hi @thuongtv-vn,

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