This is my React Native code.
import React, { useState, useEffect } from 'react';
import { Alert, View, Image, StyleSheet, Animated, Easing, TouchableOpacity, Text, ScrollView, ImageBackground, Dimensions, TextInput } from 'react-native';
import * as Brightness from 'expo-brightness';
const {height, width} = Dimensions.get('window');
const styles = StyleSheet.create({
//styles
});
const DisplayLogo = () => {
const [showSeparatePage, setShowSeparatePage] = useState(false);
const [showWeatherPage, setShowWeatherPage] = useState(false);
const [showBuyImplementsPage, setShowBuyImplementsPage] = useState(false);
const [showSellHarvestPage, setShowSellHarvestPage] = useState(false);
const [showAudioPodcastsPage, setShowAudioPodcastsPage] = useState(false);
const [showDonatePage, setShowDonatePage] = useState(false);
const [showFeedbackPage, setShowFeedbackPage] = useState(false);
const [showBackButton, setShowBackButton] = useState(false);
const [modalVisible, setModalVisible] = useState(false);
const [contact, setContact] = useState(false);
const [settingsMenu, setSettingsMenu] = useState(false);
const translateY = new Animated.Value(700);
const logoOpacity = new Animated.Value(1);
const buttonOpacity = new Animated.Value(0);
const backgroundColor = new Animated.Value(0);
const showHelpDialog = () => {
setModalVisible(true);
};
const hideHelpDialog = () => {
setModalVisible(false);
handleBackButtonPress();
};
const showContactDialog = () => {
setContact(true);
};
const hideContactDialog = () => {
setContact(false);
handleBackButtonPress();
};
useEffect(() => {
const logoAnimation = Animated.sequence([
Animated.timing(translateY, {
toValue: 250,
duration: 1000,
useNativeDriver: true,
easing: Easing.inOut(Easing.ease),
}),
Animated.delay(2000),
Animated.parallel([
Animated.timing(translateY, {
toValue: -50,
duration: 1000,
useNativeDriver: true,
easing: Easing.inOut(Easing.ease),
}),
Animated.timing(logoOpacity, {
toValue: 0,
duration: 1000,
useNativeDriver: true,
}),
]),
]);
const buttonsAnimation = Animated.timing(buttonOpacity, {
toValue: 1,
duration: 500,
delay: 500,
useNativeDriver: true,
});
Animated.sequence([logoAnimation, buttonsAnimation]).start();
setTimeout(() => {
Animated.timing(backgroundColor, {
toValue: 1,
duration: 500,
useNativeDriver: false,
}).start();
}, 3000);
return () => {
translateY.setValue(500);
logoOpacity.setValue(1);
buttonOpacity.setValue(0);
backgroundColor.setValue(0);
};
}, [showSeparatePage, showWeatherPage, showBuyImplementsPage, showSellHarvestPage, showAudioPodcastsPage, showDonatePage, showFeedbackPage, modalVisible, settingsMenu, contact]);
const handleTipsForFarmingPress = () => {
setShowSeparatePage(true);
setShowBackButton(true);
Animated.timing(buttonOpacity, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}).start();
Animated.timing(backgroundColor, {
toValue: 2,
duration: 500,
useNativeDriver: false,
}).start();
};
const handleWeatherReportPress = () => {
setShowWeatherPage(true);
setShowBackButton(true);
Animated.timing(buttonOpacity, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}).start();
Animated.timing(backgroundColor, {
toValue: 2,
duration: 500,
useNativeDriver: false,
}).start();
};
const handleBuyImplementsPress = () => {
setShowBuyImplementsPage(true);
setShowBackButton(true);
Animated.timing(buttonOpacity, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}).start();
Animated.timing(backgroundColor, {
toValue: 2,
duration: 500,
useNativeDriver: false,
}).start();
};
const handleSellHarvestPress = () => {
setShowSellHarvestPage(true);
setShowBackButton(true);
Animated.timing(buttonOpacity, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}).start();
Animated.timing(backgroundColor, {
toValue: 2,
duration: 500,
useNativeDriver: false,
}).start();
};
const handleAudioPodcastsPress = () => {
setShowAudioPodcastsPage(true);
setShowBackButton(true);
Animated.timing(buttonOpacity, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}).start();
Animated.timing(backgroundColor, {
toValue: 2,
duration: 500,
useNativeDriver: false,
}).start();
};
const handleDonatePress = () => {
setShowDonatePage(true);
setShowBackButton(true);
Animated.timing(buttonOpacity, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}).start();
Animated.timing(backgroundColor, {
toValue: 2,
duration: 500,
useNativeDriver: false,
}).start();
};
const handleFeedbackPress = () => {
setShowFeedbackPage(true);
setShowBackButton(true);
Animated.timing(buttonOpacity, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}).start();
Animated.timing(backgroundColor, {
toValue: 2,
duration: 500,
useNativeDriver: false,
}).start();
};
const handleBackButtonPress = () => {
setShowSeparatePage(false);
setShowWeatherPage(false);
setShowBuyImplementsPage(false);
setShowSellHarvestPage(false);
setShowAudioPodcastsPage(false);
setShowDonatePage(false);
setShowFeedbackPage(false);
setModalVisible(false);
setContact(false);
setSettingsMenu(false);
setShowBackButton(false);
Animated.timing(buttonOpacity, {
toValue: 1,
duration: 500,
useNativeDriver: true,
}).start();
Animated.timing(backgroundColor, {
toValue: 1,
duration: 500,
useNativeDriver: false,
}).start();
};
if (showSeparatePage) {
return (
//returns something
);
}
if (showWeatherPage) {
return (
//returns something
);
}
if (showBuyImplementsPage) {
return (
//returns something
);
}
if (showSellHarvestPage) {
return (
//returns something
);
}
if (showAudioPodcastsPage) {
return (
<//returns something
);
}
if (showDonatePage) {
return (
//returns something
);
}
if (showFeedbackPage) {
return (
//returns something
);
}
if (modalVisible) {
Alert.alert(
'Help',
"Click buttons and navigate throughout the platform.",
[
{ text: 'OK', onPress: () => {
hideHelpDialog();
handleBackButtonPress();
}}
],
{ cancelable: false }
);
}
//The bug occurs in the below Alert component.
if (settingsMenu) {
console.log("Alert");
Alert.alert("Settings","Set brightness.",
[
{text:"High Brightness", onPress: () => {
Brightness.setBrightnessAsync(1);
handleBackButtonPress();
}},
{text:"Medium Brightness", onPress: () => {
Brightness.setBrightnessAsync(0.4);
handleBackButtonPress();
}},
{text:"Low Brightness", onPress: () => {
Brightness.setBrightnessAsync(0.2);
handleBackButtonPress();
}}
],
{ cancelable: false }
);
}
if (contact) {
Alert.alert(
'Contact',
"Call Centre Number: 1234567890",
[
{ text: 'OK', onPress: () => {
hideContactDialog();
handleBackButtonPress();
}}
],
{ cancelable: false }
);
}
return (
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<Animated.View style={{ ...styles.container, backgroundColor: backgroundColor.interpolate({
inputRange: [0, 1, 2],
outputRange: ['white', 'skyblue', 'orange'],
}) }}>
<Animated.Image
style={{
...styles.logo,
transform: [{ translateY }],
opacity: logoOpacity,
}}
source={require('./assets/Logo.png')}
/>
<Animated.View style={{ ...styles.buttonContainer, opacity: buttonOpacity }}>
{/* Yellow buttons */}
{['Tips For Farming', 'Weather Updates', 'Buy Implements', 'Sell Harvest', 'Audio Podcasts', 'Donate'].map(
(buttonName, index) => (
<TouchableOpacity
key={index}
style={{ ...styles.button, ...styles.yellowButton }}
onPress={() => {
if (buttonName==='Tips For Farming') {
handleTipsForFarmingPress()}
if (buttonName==='Weather Updates') {
handleWeatherReportPress()}
if (buttonName==='Buy Implements') {
handleBuyImplementsPress()}
if (buttonName==='Sell Harvest') {
handleSellHarvestPress()}
if (buttonName==='Audio Podcasts') {
handleAudioPodcastsPress()}
if (buttonName==='Donate') {
handleDonatePress()}
}
}
>
<Text style={styles.buttonText}>{buttonName}</Text>
</TouchableOpacity>
)
)}
{/* Gray buttons */}
<View style={{ flexDirection: 'row' }}>
{['Help', 'Settings'].map((buttonName, index) => (
<TouchableOpacity
key={index}
style={{ ...styles.button, ...styles.grayButton, marginLeft: 10 }}
onPress={() => {
if (buttonName==='Help') {
showHelpDialog();}
if (buttonName==='Settings') {
setSettingsMenu(true);}
}
}
>
<Text style={styles.buttonText}>{buttonName}</Text>
</TouchableOpacity>
))}
</View>
{/* Orange button */}
<TouchableOpacity
style={{ ...styles.button, ...styles.orangeButton }}
onPress={() => handleFeedbackPress()}
>
<Text style={styles.buttonText}>Return Feedback</Text>
</TouchableOpacity>
{/* Green button */}
<TouchableOpacity
style={{ ...styles.button, ...styles.greenButton }}
onPress={() => showContactDialog()}
>
<Text style={styles.buttonText}>Contact</Text>
</TouchableOpacity>
</Animated.View>
</Animated.View>
</ScrollView>
);
};
export default DisplayLogo;
Basically, when the Settings button is clicked, a dialog box appears. When I choose an option, the dialog box reappears, sometimes twice or thrice.
This bug is not occurring with the other Alert components. Also, when a dialog box appears, the logo of my app animates in the background (which should only happen when the app starts). I don’t want the Alert component to trigger continuously. Please help.
