I’m working on a React Native application where users can respond to questions in a modal. The app works perfectly on Android, but it hangs on iOS when I click the “No” button.
When the “No” button is pressed, the Failed function is called, which updates the state and opens a modal. This works fine on Android but causes the app to hang on iOS.
Below are the relevant parts of my code:
Failed Function
The function triggered when the "No" button is pressed:
////////////////
const Failed = () => {
const data = {
habitId: routeData?._id,
responseType: 'FALSE',
};
actions
.UpdateHabit(data)
.then(res => {
setResponseData(res);
routeData = res;
listHabit();
refsheet?.current?.close();
setIsModalVisible(true);
setShowColor('RED');
})
.catch(error => {
console.log(error, 'Error in Failed function');
});
};
////////////
main_off_btns View
The view containing the "No" button:
<View style={styles.main_off_btns}>
<TouchableOpacity
onPress={Failed}
style={styles.noButton}>
<Text style={styles.Btn_text}>{'No'}</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => Success()}
style={{...styles.box_btn, backgroundColor: colors._B1DC00}}>
<Text style={{...styles.Btn_text, color: colors._020202}}>
Yes
</Text>
</TouchableOpacity>
</View>
isModalVisible State
The modal visibility state:
const [isModalVisible, setIsModalVisible] = useState(false);
/////////
Modal View
The modal view that is displayed:
<Modal
animationType="slide"
transparent={true}
visible={isModalVisible}
onRequestClose={toggleModal}>
<View style={styles.modalBackground}>
<View style={styles.modalContent}>
{showColor == 'RED' ? (
<View>
<Text style={styles.delet_red_text}>
{getFailureMessage(routeData?.tags, routeData?.levels)}
</Text>
</View>
) : (
<Text style={styles.delet_msg_text}>
You're on track! {'n'} Check back tomorrow to continue your journey.
</Text>
)}
<TouchableOpacity
style={styles.OkButton}
onPress={redirectMatch}>
<Text style={{...commonStyles.fontBold15, color: 'black'}}>
Close
</Text>
</TouchableOpacity>
</View>
</View>
</Modal>