diff options
-rw-r--r-- | src/screens/MallSelectionScreen.js | 44 |
1 files changed, 39 insertions, 5 deletions
diff --git a/src/screens/MallSelectionScreen.js b/src/screens/MallSelectionScreen.js index 620abe7..964711b 100644 --- a/src/screens/MallSelectionScreen.js +++ b/src/screens/MallSelectionScreen.js @@ -1,16 +1,50 @@ import React from 'react'; -import { View, Button, Text } from 'react-native'; +import { View, Button, Text, StyleSheet, TouchableOpacity } from 'react-native'; const MallSelectionScreen = ({ navigation }) => { const handleMallSelect = () => navigation.navigate('ProductScanner'); return ( - <View> - <Text>Select Mall:</Text> - <Button title="Mall 1" onPress={handleMallSelect} /> - <Button title="Mall 2" onPress={handleMallSelect} /> + <View style={styles.container}> + <Text style={styles.title}>Select a Mall</Text> + <TouchableOpacity style={styles.button} onPress={handleMallSelect}> + <Text style={styles.buttonText}>Mall 1</Text> + </TouchableOpacity> + <TouchableOpacity style={styles.button} onPress={handleMallSelect}> + <Text style={styles.buttonText}>Mall 2</Text> + </TouchableOpacity> </View> ); }; +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#f2f2f2', + padding: 16, + }, + title: { + fontSize: 24, + fontWeight: 'bold', + color: '#333', + marginBottom: 20, + }, + button: { + backgroundColor: '#4CAF50', + paddingVertical: 12, + paddingHorizontal: 30, + borderRadius: 8, + marginVertical: 10, + elevation: 3, + }, + buttonText: { + fontSize: 18, + color: '#ffffff', + fontWeight: 'bold', + textAlign: 'center', + }, +}); + export default MallSelectionScreen; |