I'm trying to get started with React Native and I believe I've found a bug, but in the hope that I'm just dumb I am asking here first. Thanks in advance for any help!
Using the keyboard to dismiss an alert that contains OK and/or Cancel buttons in the iOS simulator throws an exception like this one (the IDs change with each build):
Invariant Violation: No callback found with cbID 243 and callID 121 for AlertManager.alertWithArgs - most likely the callback was already invoked. Args: '["0"]'
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
To trigger the "OK" button you press return on the keyboard while the app is running and the simulator has focus. To trigger the "Cancel" button you press esc. If there is only an "OK" button, esc does nothing. If there is only a "Cancel" button then esc and return do the same thing. If there are multiple non-cancel buttons then return does nothing; but if there is a "Cancel" in the mix then esc will trigger it.
The correct callback for the button is called before the exception is thrown. The argument sent to the missing callback corresponds to the button, i.e. "0" for Cancel and "1" for OK in a Cancel/OK alert, or say "3" if you have a "Cancel" at the end of a four-button stack.
I am using the simple Expo boilerplate with App.tsx changed to the following:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button, Alert } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Hello World!</Text>
<Button
onPress={onPressDoSomething}
title="Press It"
accessibilityLabel="Learn more about this purple button"
/>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
const onPressDoSomething = function() {
Alert.alert(
"A Lert!", // Title
"It was pressed!", // Message
[ // Buttons:
{
text: "OK",
onPress: () => console.log("--> ok"),
style: "ok",
},
{
text: "Cancel",
onPress: () => console.log("--> cancel"),
style: "cancel",
},
],
);
}
These are legitimate ways to respond to an Alert in iOS, so I need to handle them, and I would really prefer to not do something ugly like trap the exception.
Any ideas? Should I just report this as a bug?