passports added

src/components/ImageInput.js

@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Image, Alert } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+import { Ionicons } from '@expo/vector-icons';
+import { COLORS } from '../constants/colors';
+
+const ImageInput = ({ label, image, onChange }) => {
+  const [hasPermission, setHasPermission] = useState(null);
+
+  useEffect(() => {
+    (async () => {
+      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+      setHasPermission(status === 'granted');
+    })();
+  }, []);
+
+  const pickImage = async () => {
+    if (hasPermission === false) {
+      Alert.alert('Permission required', 'Please grant photo library access to select images.');
+      return;
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaType,
+      quality: 0.7,
+      base64: true,
+    });
+
+    if (!result.canceled && result.assets && result.assets.length > 0) {
+      const asset = result.assets[0];
+      const fileObj = {
+        uri: asset.uri,
+        name: asset.fileName || `photo_${Date.now()}.jpg`,
+        type: asset.mimeType || 'image/jpeg',
+      };
+      onChange && onChange(fileObj);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      {label && <Text style={styles.label}>{label}</Text>}
+      <TouchableOpacity style={styles.box} activeOpacity={0.8} onPress={pickImage}>
+        {image ? (
+          <Image source={{ uri: image.uri ? image.uri : image }} style={styles.preview} />
+        ) : (
+          <View style={styles.placeholder}>
+            <Ionicons name="camera" size={28} color={COLORS.gray[400]} />
+            <Text style={styles.placeholderText}>Saýla</Text>
+          </View>
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 20,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: COLORS.textPrimary,
+    marginBottom: 8,
+  },
+  box: {
+    borderWidth: 1,
+    borderColor: COLORS.gray[300],
+    borderRadius: 12,
+    backgroundColor: COLORS.white,
+    width: 160,
+    height: 120,
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    alignSelf: 'flex-start',
+  },
+  placeholder: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  placeholderText: {
+    marginTop: 6,
+    color: COLORS.gray[400],
+    fontSize: 14,
+  },
+  preview: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 12,
+  },
+});
+
+export default ImageInput;