Estoy implementando mi propio Modal, tratando de reemplazar Alert.alert con algo más hermoso. Lo hice para que se muestre cuando sea necesario, pero no se oculta al presionar el botón, pero creo que le transfirí la función necesaria. Mi estructura modal es la siguiente:

 export const RCModal = ({ title, visible, onButtonPress }) => { return ( <Modal animationType='fade' transparent={true} visible={visible} > <View style={styles.container}> <Text style={styles.title}>{title}</Text> <Pressable style={styles.button} onPress={onButtonPress}> <Text style={styles.text}>OK</Text> </Pressable> </View> </Modal> ) };

Y se utiliza en la aplicación de la siguiente manera:

 // ... const [alertVisible, setAlertVisible] = useState(false); const [alertTitle, setAlertTitle] = useState(); const [alertOnPress, setAlertOnPress] = useState(); // ... const winner = (theWinner) => { setBlocked(true); setAlertTitle(`${theWinner} win!`); setAlertOnPress(() => setAlertVisible(!alertVisible)); setAlertVisible(true); } // ... return ( <View style={styles.container}> <RCModal title={alertTitle} visible={alertVisible} onButtonPress={alertOnPress} /> <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}> <Text style={styles.title}>Noughts and Crosses</Text> <Text style={styles.tip}>Get {winCondition()} in row, column or diagonal</Text> <View style={styles.buttonsContainer}> <Text style={styles.turnContainer}>Turn: <Text style={[styles.turn, { color: turn === 'X' ? '#2E86C1' : '#E74C3C'}]}>{turn}</Text></Text> <TouchableHighlight underlayColor="#000000" style={[styles.button, styles.newGameButton]} onPress={setInitialFieldState}> <Text style={styles.buttonText}>New game</Text> </TouchableHighlight> </View> <Field state={fieldState} size={fieldSize} onCellPress={onCellPress} /> </ScrollView> <View style={styles.settingsButtonContainer}> <TouchableHighlight underlayColor={theme.colors.secondary} style={styles.settingsButton} onPress={onSettingsPress}> <Image source={require('../img/settings.png')} style={styles.settingsIcon} /> </TouchableHighlight> </View> </View> ); };

Cuando se llama al winner() , se muestra como debería, pero cuando presiono el botón Aceptar, no se oculta. ¿Cómo puedo arreglarlo?