Enhance ServicesScreen with Currency Converter Modal and localization updates
- Added a CurrencyConverterModal to the ServicesScreen, triggered by a new TouchableOpacity around the service card for currency calculation. - Updated localization file to include a new key for the currency converter.
This commit is contained in:
@@ -1,20 +1,31 @@
|
||||
import { StyleSheet, SafeAreaView, FlatList, View } from 'react-native';
|
||||
import { StyleSheet, SafeAreaView, View, TouchableOpacity } from 'react-native';
|
||||
import { Text } from '@/components/Themed';
|
||||
import i18n from '@/i18n';
|
||||
import { FontAwesome5 } from '@expo/vector-icons';
|
||||
import ServiceCard from '@/components/ServiceCard';
|
||||
import React, { useState } from 'react';
|
||||
import CurrencyConverterModal from '@/components/CurrencyConverterModal';
|
||||
|
||||
export default function ServicesScreen() {
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<Text style={styles.title}>{i18n.t('services')}</Text>
|
||||
|
||||
<View style={styles.row}>
|
||||
<ServiceCard title="Manat kursy" icon={<FontAwesome5 name="dollar-sign" size={24} color="#D4AF37" />} />
|
||||
<TouchableOpacity onPress={() => setModalVisible(true)}>
|
||||
<ServiceCard title="Real Manat hasaplama" icon={<FontAwesome5 name="dollar-sign" size={24} color="#D4AF37" />} />
|
||||
</TouchableOpacity>
|
||||
|
||||
<ServiceCard title="Oteliň wizitkasy" icon={<FontAwesome5 name="hotel" size={24} color="#D4AF37" />} />
|
||||
<ServiceCard title="Oteliň açary içinde galsa" icon={<FontAwesome5 name="key" size={24} color="#D4AF37" />} />
|
||||
<ServiceCard title="Terjimeçi" icon={<FontAwesome5 name="language" size={24} color="#D4AF37" />} />
|
||||
</View>
|
||||
<CurrencyConverterModal
|
||||
visible={modalVisible}
|
||||
onClose={() => setModalVisible(false)}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
125
components/CurrencyConverterModal.tsx
Normal file
125
components/CurrencyConverterModal.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View, Text, TextInput, Modal, StyleSheet, TouchableOpacity, KeyboardAvoidingView, Platform } from 'react-native';
|
||||
import { FontAwesome } from '@expo/vector-icons';
|
||||
import i18n from '@/i18n';
|
||||
|
||||
interface CurrencyConverterModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const CurrencyConverterModal: React.FC<CurrencyConverterModalProps> = ({ visible, onClose }) => {
|
||||
const [sar, setSar] = useState('');
|
||||
const [tmt, setTmt] = useState('');
|
||||
const USD_TO_SAR = '3.70';
|
||||
const USD_TO_TMT = '19.5';
|
||||
|
||||
const handleSarChange = (value: string) => {
|
||||
setSar(value);
|
||||
|
||||
if (value) {
|
||||
const tmtValue = ((Number(value) / Number(USD_TO_SAR)) * Number(USD_TO_TMT)).toFixed(2);
|
||||
setTmt(tmtValue);
|
||||
} else {
|
||||
setTmt('');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
animationType="slide"
|
||||
transparent={true}
|
||||
visible={visible}
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
style={styles.centeredView}
|
||||
>
|
||||
<View style={styles.modalView}>
|
||||
<TouchableOpacity style={styles.closeButton} onPress={onClose}>
|
||||
<FontAwesome name="close" size={24} color="black" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.modalTitle}>{i18n.t('currencyConverter')}</Text>
|
||||
|
||||
<View style={styles.inputContainer}>
|
||||
<Text style={styles.currencyLabel}>Riyal</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
keyboardType="numeric"
|
||||
placeholder="0.00"
|
||||
value={sar}
|
||||
onChangeText={handleSarChange}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputContainer}>
|
||||
<Text style={styles.currencyLabel}>Manat</Text>
|
||||
<Text style={styles.resultText}>{tmt || '0.00'}</Text>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
centeredView: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
},
|
||||
modalView: {
|
||||
margin: 20,
|
||||
backgroundColor: 'white',
|
||||
borderRadius: 20,
|
||||
padding: 35,
|
||||
alignItems: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 4,
|
||||
elevation: 5,
|
||||
width: '80%',
|
||||
},
|
||||
closeButton: {
|
||||
position: 'absolute',
|
||||
right: 15,
|
||||
top: 15,
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 20,
|
||||
},
|
||||
inputContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 15,
|
||||
width: '100%',
|
||||
},
|
||||
currencyLabel: {
|
||||
fontSize: 18,
|
||||
marginRight: 10,
|
||||
width: 60,
|
||||
},
|
||||
input: {
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#ccc',
|
||||
fontSize: 18,
|
||||
padding: 5,
|
||||
flex: 1,
|
||||
},
|
||||
resultText: {
|
||||
fontSize: 18,
|
||||
padding: 5,
|
||||
flex: 1,
|
||||
}
|
||||
});
|
||||
|
||||
export default CurrencyConverterModal;
|
||||
@@ -37,5 +37,6 @@
|
||||
"sarToTmt": "SAR-dan TMT-a",
|
||||
"hotelBusinessCard": "Myhmanhananyň wizit karty",
|
||||
"masterkeyBox": "Masterkey gutusy",
|
||||
"translator": "Terjimeçi"
|
||||
"translator": "Terjimeçi",
|
||||
"currencyConverter": "Walýuta hasaplama"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user