Skip to content

InAppBrowser cancel closes the modal its in #454

Open
@number1hustler

Description

@number1hustler

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions