CircleCollect/circle-collect
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

theme update latest project

Browse Source
This commit is contained in:
Abin Toppo
2026-02-16 10:41:38 +05:30
parent bd7dbd864c
commit a98e0b6cdd
75 changed files with 10173 additions and 7915 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/CustomModal.tsx
+92 -71
View File
@@ -1,4 +1,4 @@
import React, { useRef, useEffect } from "react";
import React, { useRef, useEffect } from 'react';
import {
View,
Text,
@@ -7,11 +7,16 @@ import {
TouchableOpacity,
Animated,
Dimensions,
} from "react-native";
import colors from "../colors";
import { responsiveFontSize } from "react-native-responsive-dimensions";
KeyboardAvoidingView,
Platform,
TouchableWithoutFeedback,
Keyboard,
} from 'react-native';
import { responsiveFontSize } from 'react-native-responsive-dimensions';
import { useTheme } from '../../hooks/ui/useTheme';
import FontsFamily from '../../constents/FontsFamily';
const { height } = Dimensions.get("window");
const { height } = Dimensions.get('window');
type CustomModalProps = {
visible: boolean;
@@ -21,9 +26,9 @@ type CustomModalProps = {
confirmText?: string;
cancelText?: string;
onConfirm?: () => void;
confirmButton?:string
confirmTextColor?:string
elevation?:number
confirmButton?: string;
confirmTextColor?: string;
elevation?: number;
};
const CustomModal: React.FC<CustomModalProps> = ({
@@ -31,14 +36,15 @@ const CustomModal: React.FC<CustomModalProps> = ({
onClose,
title,
children,
confirmText = "Confirm",
cancelText = "Cancel",
confirmText = 'Confirm',
cancelText = 'Cancel',
onConfirm,
confirmTextColor,
elevation,
confirmButton = colors.primary
elevation = 5,
confirmButton,
}) => {
const slideAnim = useRef(new Animated.Value(height)).current; // starts off screen
const theme = useTheme();
const slideAnim = useRef(new Animated.Value(height)).current;
const fadeAnim = useRef(new Animated.Value(0)).current;
useEffect(() => {
@@ -69,45 +75,65 @@ const CustomModal: React.FC<CustomModalProps> = ({
}),
]).start();
}
}, [visible]);
}, [fadeAnim, slideAnim, 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 }] },
]}
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.keyboardContainer}
>
{/* Header */}
{
title &&
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View style={styles.keyboardContainer}>
<Animated.View
style={[
styles.modalBox,
{
backgroundColor: theme.colors.surface,
borderTopLeftRadius: theme.borderRadius.xl,
borderTopRightRadius: theme.borderRadius.xl,
transform: [{ translateY: slideAnim }]
},
]}
>
{title && (
<Text style={[styles.title, { color: theme.colors.textPrimary }]}>{title}</Text>
)}
<View style={styles.content}>{children}</View>
<Text style={styles.title}>{title}</Text>
}
{/* Body */}
<View style={styles.content}>{children}</View>
<View style={styles.actions}>
<TouchableOpacity
style={[styles.button, { backgroundColor: theme.colors.background, elevation: elevation }]}
onPress={onClose}
>
<Text style={[styles.cancelText, { color: theme.colors.textSecondary }]}>{cancelText}</Text>
</TouchableOpacity>
{/* Footer Actions */}
<View style={styles.actions}>
<TouchableOpacity
style={[styles.button, styles.cancelButton,{elevation:elevation}]}
onPress={onClose}
>
<Text style={styles.cancelText}>{cancelText}</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, {backgroundColor:confirmButton ,elevation:elevation}]}
onPress={onConfirm}
>
<Text style={[styles.confirmText,{color:confirmTextColor}]}>{confirmText}</Text>
</TouchableOpacity>
</View>
</Animated.View>
<TouchableOpacity
style={[
styles.button,
{
backgroundColor: confirmButton || theme.colors.primary,
elevation: elevation
}
]}
onPress={onConfirm}
>
<Text
style={[
styles.confirmText,
{ color: confirmTextColor || theme.colors.onPrimary }
]}
>
{confirmText}
</Text>
</TouchableOpacity>
</View>
</Animated.View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
</Animated.View>
</Modal>
);
@@ -118,46 +144,41 @@ export default CustomModal;
const styles = StyleSheet.create({
overlay: {
flex: 1,
backgroundColor: "rgba(0,0,0,0.4)",
justifyContent: "flex-end",
backgroundColor: 'rgba(0,0,0,0.5)',
justifyContent: 'flex-end',
},
keyboardContainer: {
flex: 1,
justifyContent: 'flex-end',
},
modalBox: {
backgroundColor: "#fff",
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
padding: 20,
padding: 24,
elevation: 10,
},
title: {
fontSize: responsiveFontSize(1.8),
fontWeight: "700",
color: "#1f2937",
marginBottom: 12,
fontSize: responsiveFontSize(2),
fontFamily: FontsFamily.nunitoBold,
marginBottom: 16,
},
content: {
marginBottom: 20,
marginBottom: 24,
},
actions: {
flexDirection: "row",
justifyContent: "flex-end",
marginTop: 10,
flexDirection: 'row',
justifyContent: 'flex-end',
gap: 12,
},
button: {
paddingVertical: 10,
paddingHorizontal: 18,
borderRadius: 10,
marginLeft: 10,
paddingVertical: 12,
paddingHorizontal: 24,
borderRadius: 12,
},
cancelButton: {
backgroundColor: "#e5e7eb",
},
cancelText: {
color: "#374151",
fontWeight: "500",
fontFamily: FontsFamily.nunitoSemiBold,
fontSize: responsiveFontSize(1.6),
},
confirmText: {
color: "#fff",
fontWeight: "600",
fontFamily: FontsFamily.nunitoBold,
fontSize: responsiveFontSize(1.6),
},
});