Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

InAppBrowser cancel closes the modal its in #454

Open
number1hustler opened this issue May 13, 2024 · 2 comments
Open

InAppBrowser cancel closes the modal its in #454

number1hustler opened this issue May 13, 2024 · 2 comments

Comments

@number1hustler
Copy link

number1hustler commented May 13, 2024

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
Copy link

BadLice commented May 29, 2024

the same issue occurs in my application

@number1hustler
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants