import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
const MyComponent = () => {
const [textInputValue, setTextInputValue] = useState('');
const button_Click = (buttonText) => {
if (buttonText === 'ISLAMABAD') {
setTextInputValue('ISLAMABAD');
} else {
setTextInputValue('');
}
};
return (
<View style={styles.container}>
<Text>The capital f Pakistan is:</Text>
<TextInput
style={styles.textInput}
value={textInputValue}
placeholder="Enter a city"
/>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => button_Click('karachi')}
>
<Text>karachi</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => button_Click('Lahore')}
>
<Text>Lahore</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => button_Click('ISLAMABAD')}
>
<Text>ISLAMABAD</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
textInput: {
width: 200,
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginTop: 10,
paddingLeft: 10,
},
buttonContainer: {
flexDirection: 'row',
marginTop: 20,
},
button: {
backgroundColor: '#DDDDDD',
padding: 10,
margin: 5,
},
});
export default MyComponent;
NEW ENTRIES