Losing Press Events

[s1tony]

Describe the bug
I have a fairly straightforward modal with buttons. When the modal is displayed, pressing either of the buttons does not always trigger the Press event (intermittent with no clear pattern).

Expected behavior
Any button press should be registered.

Code Snippet


<Text style={StyleSheet.flatten([styles.modalHeaderText, headerStyle])}>{headerText}

{children}

{!hideButtons &&
<ButtonGroup
onPress={(selectedIdx) => {
onButtonSelect(selectedIdx);
hide('close button pressed');
}}
selectedIndex={0}
buttons={buttonNames}
containerStyle={styles.modalContainer}
buttonContainerStyle={styles.modalBottonContainer}
textStyle={styles.modalButtonText}
/>
}

Smartphone (please complete the following information):

• Device: Samsung S22+
• OS: Android

Additional context
React Native: 0.76.6
"react-native-magic-modal": "^6.0.3"

[GSTJ]

Hey - a few concerns:

Please ensure the magic modal context is positioned correctly and the buttons you used work elsewhere.

Did passing the z-index as a higher number work? If so, it could indicate the context is poorly positioned.

I'd love it if you could reproduce it on our app demo inside the repository.

[s1tony]

Yes, this code was part of my previous version, where I used the React Native Modal and the buttons worked flawlessly. As for the context:

<SafeAreaProvider> <ThemeProvider theme={customTheme}> <AuthProvider initializedUser={currentUser}> <FeatureFlagsProvider> <DataProvider> <GestureHandlerRootView style={styles.rootView}> <NavigationContainer> ... </NavigationContainer> <MagicModalPortal /> </GestureHandlerRootView> </DataProvider> </FeatureFlagsProvider> </AuthProvider> </ThemeProvider> </SafeAreaProvider>

I can try to set this up in the demo app, but this thing has a lot of moving parts.