This is my code for React Native.
import React, { useState, useEffect, useRef } from 'react';
import { View, Image, StyleSheet, Animated, TouchableOpacity, Text } from 'react-native';
import Modal from 'react-native-modal';
import PickerSelect from 'react-native-picker-select';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
logo: {
width: 200,
height: 200,
resizeMode: 'contain',
},
modalContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
modalContent: {
backgroundColor: 'white',
padding: 30,
borderRadius: 10,
width: '80%',
},
chooseLanguageText: {
marginBottom: 20,
},
picker: {
width: '100%',
marginBottom: 20,
borderBottomWidth: 1,
borderColor: 'gray',
paddingVertical: 10,
},
nextButton: {
backgroundColor: '#4CAF50',
padding: 15,
borderRadius: 5,
alignItems: 'center',
marginTop: 20,
},
nextButtonText: {
color: 'white',
fontSize: 16,
},
background: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'lightblue',
opacity: 0,
},
buttonContainer: {
marginVertical: 10,
opacity: 0,
},
yellowButton: {
backgroundColor: 'yellow',
padding: 15,
borderRadius: 10,
marginVertical: 10,
},
grayButton: {
backgroundColor: 'gray',
padding: 15,
borderRadius: 10,
marginVertical: 10,
},
orangeButton: {
backgroundColor: 'orange',
padding: 15,
borderRadius: 10,
marginVertical: 10,
},
greenButton: {
backgroundColor: 'green',
width: 50,
height: 50,
borderRadius: 25,
marginVertical: 10,
},
buttonText: {
textAlign: 'center',
color: 'black',
},
grayButtonContainer: {
flexDirection: 'row',
},
});
const handleButtonPress = (buttonName) => {
console.log(`Button pressed: ${buttonName}`);
};
// ... (previous imports)
const DisplayLogo = () => {
const translateY = useRef(new Animated.Value(0)).current;
const opacity = useRef(new Animated.Value(0)).current;
const buttonOpacity = useRef(new Animated.Value(0)).current;
const backgroundOpacity = useRef(new Animated.Value(0)).current;
const [isModalVisible, setModalVisible] = useState(false);
const [selectedLanguage, setSelectedLanguage] = useState('');
const [selectedRegion, setSelectedRegion] = useState('');
const [step, setStep] = useState(1);
const handleButtonPress = (buttonName) => {
console.log(`Button pressed: ${buttonName}`);
};
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
useEffect(() => {
const imageAnimation = Animated.sequence([
Animated.timing(translateY, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}),
Animated.delay(2000),
Animated.timing(translateY, {
toValue: -200,
duration: 500,
useNativeDriver: true,
}),
Animated.timing(opacity, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}),
]);
imageAnimation.start(() => {
if (step === 1) {
setModalVisible(true);
}
});
return () => {
translateY.setValue(0);
opacity.setValue(0);
};
}, [translateY, opacity, step]);
const handleNext = () => {
if (step === 1) {
setStep(2);
} else if (step === 2) {
console.log('Selected Language:', selectedLanguage || 'English');
setModalVisible(false);
Animated.parallel([
Animated.timing(buttonOpacity, {
toValue: 1,
duration: 500,
useNativeDriver: true,
}),
Animated.timing(backgroundOpacity, {
toValue: 1,
duration: 500,
useNativeDriver: true,
}),
]).start();
console.log('Selected Region:', selectedRegion || 'North India');
}
};
return (
<View style={styles.container}>
<Animated.Image
style={{ ...styles.logo, transform: [{ translateY }], opacity }}
source={require('./assets/Logo.png')}
/>
<Modal
isVisible={isModalVisible}
animationIn="slideInUp"
animationOut="slideOutDown"
onBackdropPress={null}
style={styles.modalContainer}
>
<View style={styles.modalContent}>
{step === 1 && (
<>
<Text style={styles.chooseLanguageText}>Select Your Region:</Text>
<PickerSelect
style={styles.picker}
value={selectedRegion}
onValueChange={(value) => setSelectedRegion(value)}
items={[
{ label: 'North India', value: 'North India' },
{ label: 'South India', value: 'South India' },
]}
placeholder={{}}
Icon={() => (
<View
style={{
backgroundColor: 'transparent',
borderTopWidth: 10,
borderTopColor: 'gray',
borderRightWidth: 10,
borderRightColor: 'transparent',
borderLeftWidth: 10,
borderLeftColor: 'transparent',
width: 0,
height: 0,
alignSelf: 'center',
}}
/>
)}
/>
</>
)}
{step === 2 && (
<>
<Text style={styles.chooseLanguageText}>Choose Your Preferred Language:</Text>
<PickerSelect
style={styles.picker}
value={selectedLanguage}
onValueChange={(value) => setSelectedLanguage(value)}
items={[
{ label: 'English', value: 'English' },
{ label: 'Hindi', value: 'Hindi' },
{ label: 'Telugu', value: 'Telugu' },
]}
placeholder={{}}
Icon={() => (
<View
style={{
backgroundColor: 'transparent',
borderTopWidth: 10,
borderTopColor: 'gray',
borderRightWidth: 10,
borderRightColor: 'transparent',
borderLeftWidth: 10,
borderLeftColor: 'transparent',
width: 0,
height: 0,
alignSelf: 'center',
}}
/>
)}
/>
</>
)}
<TouchableOpacity style={styles.nextButton} onPress={handleNext}>
<Text style={styles.nextButtonText}>Next</Text>
</TouchableOpacity>
</View>
</Modal>
<Animated.View style={{ ...styles.background, opacity: backgroundOpacity }} />
<Animated.View style={{ ...styles.buttonContainer, opacity: buttonOpacity }}>
{/* Yellow buttons */}
{[
'Tips For Farming',
'Weather Updates',
'Buy Implements',
'Sell Harvest',
'Discuss On Forums',
'Donate',
// Add more yellow buttons as needed
].map((buttonName, index) => (
<TouchableOpacity
key={index}
style={styles.yellowButton}
onPress={() => handleButtonPress(buttonName)}
>
<Text style={styles.buttonText}>{buttonName}</Text>
</TouchableOpacity>
))}
</Animated.View>
<Animated.View style={{ ...styles.buttonContainer, opacity: buttonOpacity }}>
{/* Gray buttons */}
<View style={styles.grayButtonContainer}>
{['Help', 'Settings'].map((buttonName, index) => (
<TouchableOpacity
key={index}
style={styles.grayButton}
onPress={() => handleButtonPress(buttonName)}
>
<Text style={styles.buttonText}>{buttonName}</Text>
</TouchableOpacity>
))}
</View>
</Animated.View>
<Animated.View style={{ ...styles.buttonContainer, opacity: buttonOpacity }}>
{/* Orange button */}
<TouchableOpacity
style={styles.orangeButton}
onPress={() => handleButtonPress('Return Feedback')}
>
<Text style={styles.buttonText}>Return Feedback</Text>
</TouchableOpacity>
</Animated.View>
<Animated.View style={{ ...styles.buttonContainer, opacity: buttonOpacity }}>
{/* Green button */}
<TouchableOpacity
style={styles.greenButton}
onPress={() => handleButtonPress('Contact')}
/>
</Animated.View>
</View>
);
};
export default DisplayLogo;
In my app, I want the logo to appear from bottom to the center, stay there for 2 seconds, go to the top, and then fade away. However, I am not getting the expected results. I tried changing the values but nothing happened. I got this code from ChatGPT but it has not been able to help me. I face problems with the logo, though there are some other bugs. I currently want to handle the logo more efficiently.
