added custom model for contriution screen

src/components/common/CustomModal.tsx

@@ -0,0 +1,158 @@
+import React, { useRef, useEffect } from "react";
+import {
+    View,
+    Text,
+    StyleSheet,
+    Modal,
+    TouchableOpacity,
+    Animated,
+    Dimensions,
+} from "react-native";
+import colors from "../colors";
+
+const { height } = Dimensions.get("window");
+
+type CustomModalProps = {
+    visible: boolean;
+    onClose: () => void;
+    title?: string;
+    children?: React.ReactNode;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm?: () => void;
+    confirmButton?:string
+};
+
+const CustomModal: React.FC<CustomModalProps> = ({
+    visible,
+    onClose,
+    title,
+    children,
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    onConfirm,
+    confirmButton = colors.primary
+}) => {
+    const slideAnim = useRef(new Animated.Value(height)).current; // starts off screen
+    const fadeAnim = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        if (visible) {
+            Animated.parallel([
+                Animated.timing(slideAnim, {
+                    toValue: 0,
+                    duration: 300,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(fadeAnim, {
+                    toValue: 1,
+                    duration: 300,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        } else {
+            Animated.parallel([
+                Animated.timing(slideAnim, {
+                    toValue: height,
+                    duration: 250,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(fadeAnim, {
+                    toValue: 0,
+                    duration: 250,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        }
+    }, [visible]);
+
+    return (
+        <Modal transparent visible={visible} animationType="none">
+            {/* Overlay */}
+            <Animated.View style={[styles.overlay, { opacity: fadeAnim }]}>
+                {/* Modal Box */}
+                <Animated.View
+                    style={[
+                        styles.modalBox,
+                        { transform: [{ translateY: slideAnim }] },
+                    ]}
+                >
+                    {/* Header */}
+                    {
+                        title &&
+
+                        <Text style={styles.title}>{title}</Text>
+                    }
+                    {/* Body */}
+                    <View style={styles.content}>{children}</View>
+
+                    {/* Footer Actions */}
+                    <View style={styles.actions}>
+                        <TouchableOpacity
+                            style={[styles.button, styles.cancelButton]}
+                            onPress={onClose}
+                        >
+                            <Text style={styles.cancelText}>{cancelText}</Text>
+                        </TouchableOpacity>
+
+                        <TouchableOpacity
+                            style={[styles.button, {backgroundColor:confirmButton}]}
+                            onPress={onConfirm}
+                        >
+                            <Text style={styles.confirmText}>{confirmText}</Text>
+                        </TouchableOpacity>
+                    </View>
+                </Animated.View>
+            </Animated.View>
+        </Modal>
+    );
+};
+
+export default CustomModal;
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(0,0,0,0.4)",
+        justifyContent: "flex-end",
+    },
+    modalBox: {
+        backgroundColor: "#fff",
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        padding: 20,
+        elevation: 10,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: "700",
+        color: "#1f2937",
+        marginBottom: 12,
+    },
+    content: {
+        marginBottom: 20,
+    },
+    actions: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        marginTop: 10,
+    },
+    button: {
+        paddingVertical: 10,
+        paddingHorizontal: 18,
+        borderRadius: 10,
+        marginLeft: 10,
+    },
+    cancelButton: {
+        backgroundColor: "#e5e7eb",
+    },
+    
+    cancelText: {
+        color: "#374151",
+        fontWeight: "500",
+    },
+    confirmText: {
+        color: "#fff",
+        fontWeight: "600",
+    },
+});

src/components/common/Header.tsx

@@ -57,5 +57,6 @@ const styles = StyleSheet.create({
   headerTitle: {
     fontSize: 18,
     fontWeight: "600",
+    textTransform:'uppercase'
   },
 });