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

testing

Browse Source
This commit is contained in:
Abin Toppo
2025-10-01 15:43:42 +05:30
parent 7a9ce601cb f854bd6765
commit fefe7b614d
27 changed files with 526 additions and 2300 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppView.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export default function AppView({
children,
backgroundColor = "#f5f5f5",
barStyle = "dark-content",
paddingHorizontal = 16, // default
paddingHorizontal = 12, // default
paddingTop = 8, // default
style,
}: AppViewProps) {
src/components/CustomButton.tsx
+4 -2
View File
@@ -1,5 +1,6 @@
import React from "react";
import { TouchableOpacity, Text, StyleSheet, ActivityIndicator, ViewStyle } from "react-native";
import colors from "./colors";
type CustomButtonProps = {
title: string;
@@ -13,8 +14,8 @@ type CustomButtonProps = {
export default function CustomButton({
title,
onPress,
backgroundColor = "#000000ff",
textColor = "#fff",
backgroundColor = colors.pastelGreen,
textColor = colors.textDark,
loading = false,
style,
}: CustomButtonProps) {
@@ -36,6 +37,7 @@ export default function CustomButton({
const styles = StyleSheet.create({
button: {
elevation:5,
paddingVertical: 16,
paddingHorizontal: 20,
borderRadius: 12,
src/components/JoinedGroupCard.tsx
+15 -23
View File
@@ -4,7 +4,6 @@ import React, { FC } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import colors from './colors';
import { useNavigation } from '@react-navigation/native';
// Update the type to match the full data structure
interface JoinedGroup {
id: string;
@@ -80,8 +79,10 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress })
{/* Financial Info */}
<View style={styles.infoRow}>
<View style={styles.infoItem}>
<Text style={styles.infoLabel}>Contribution</Text>
<Text style={styles.infoValue}>₹{item.contributionAmount.toLocaleString('en-IN')}</Text>
<Text style={styles.infoLabel}>Contribution</Text>
<Text style={styles.infoValue}>₹{item.contributionAmount.toLocaleString('en-IN')}</Text>
</View>
<View style={styles.infoItem}>
<Text style={styles.infoLabel}>Cycle</Text>
@@ -89,25 +90,12 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress })
</View>
</View>
{/* Participants Progress */}
<View style={styles.progressContainer}>
<View style={styles.progressLabels}>
<Text style={styles.participantText}>Participants</Text>
<Text style={styles.participantCount}>{item.currentParticipants} / {item.maxParticipants}</Text>
</View>
<View style={styles.progressBarBackground}>
<View style={[styles.progressBarFill, { width: `${progress}%` }]} />
</View>
</View>
{/* Footer with Dates and View Button */}
<View style={styles.footer}>
<Text style={styles.dateText}>
{formatDate(item.startDate)} - {formatDate(item.endDate)}
</Text>
<TouchableOpacity style={styles.viewButton} onPress={onViewPress}>
<Text style={styles.viewButtonText}>View</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
);
@@ -115,7 +103,7 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress })
const styles = StyleSheet.create({
card: {
backgroundColor: '#FFFFFF',
backgroundColor:colors.pastelOrange,
borderRadius: 16,
padding: 20,
marginBottom: 16,
@@ -123,7 +111,8 @@ const styles = StyleSheet.create({
shadowOpacity: 0.08,
shadowRadius: 10,
shadowOffset: { width: 0, height: 4 },
elevation: 3,
elevation: 5,
marginHorizontal:12
},
header: {
flexDirection: 'row',
@@ -160,8 +149,14 @@ const styles = StyleSheet.create({
borderBottomWidth: 1,
borderColor: colors.pastelOrange,
marginBottom: 16,
backgroundColor:colors.white,
borderRadius:15,
},
infoItem: {
padding:5,
paddingHorizontal:10,
backgroundColor:colors.white,
alignItems: 'flex-start',
},
infoLabel: {
@@ -207,10 +202,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: 8,
borderTopWidth: 1,
borderTopColor: '#F3F4F6',
paddingTop: 16,
},
dateText: {
fontSize: 14,
src/components/common/AnimatedCard.tsx
+30 -12
View File
@@ -6,20 +6,20 @@ import {
TouchableWithoutFeedback,
Animated,
ViewStyle,
StyleProp,
} from "react-native";
import LinearGradient from "react-native-linear-gradient";
import Ionicons from "react-native-vector-icons/Ionicons";
import { IoniconsIconName } from "react-native-vector-icons/Ionicons";
import { Ionicons } from "@react-native-vector-icons/ionicons";
import colors from "../colors"; // Assuming your pastel colors are defined here
type CardProps = {
title: string;
subtitle?: string;
iconName?: IoniconsIconName;
iconName?: string;
onPress?: () => void;
backOne?: string;
backTwo?: string;
style?: ViewStyle;
style?: StyleProp<ViewStyle>;
};
const AnimatedCard: React.FC<CardProps> = ({
@@ -27,18 +27,26 @@ const AnimatedCard: React.FC<CardProps> = ({
subtitle,
iconName = "ellipse",
onPress,
backOne = colors.pastelPink, // Defaulting to pastelPink
backOne = colors.pastelPink, // Defaulting to pastelPink from your preferences
backTwo = colors.primary,
style,
}) => {
const scale = useRef(new Animated.Value(1)).current;
const handlePressIn = () => {
Animated.spring(scale, { toValue: 0.96, useNativeDriver: true, friction: 4 }).start();
Animated.spring(scale, {
toValue: 0.96,
useNativeDriver: true,
friction: 4,
}).start();
};
const handlePressOut = () => {
Animated.spring(scale, { toValue: 1, useNativeDriver: true, friction: 4 }).start(() => {
Animated.spring(scale, {
toValue: 1,
useNativeDriver: true,
friction: 4,
}).start(() => {
if (onPress) {
onPress();
}
@@ -60,7 +68,14 @@ const AnimatedCard: React.FC<CardProps> = ({
{/* Content */}
<View style={styles.content}>
{iconName && <Ionicons name={iconName} size={38} color="#fff" style={styles.icon} />}
{iconName && (
<Ionicons
name={iconName}
size={38}
color="#fff"
style={styles.icon}
/>
)}
<View style={styles.textContainer}>
<Text style={styles.title}>{title}</Text>
{subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
@@ -74,6 +89,10 @@ const AnimatedCard: React.FC<CardProps> = ({
const styles = StyleSheet.create({
card: {
minWidth: 170,
flex: 1,
height: 170,
marginHorizontal: 8,
marginVertical: 10,
borderRadius: 24,
overflow: "hidden",
@@ -85,7 +104,6 @@ const styles = StyleSheet.create({
backgroundColor: colors.white,
},
gradient: {
minHeight: 150, // Increased height for better spacing
position: "relative",
flex: 1,
justifyContent: "center",
@@ -121,15 +139,15 @@ const styles = StyleSheet.create({
marginBottom: 12,
},
textContainer: {
alignItems: 'center',
alignItems: "center",
},
title: {
fontSize: 18,
fontWeight: "bold",
color: "#fff",
textTransform: 'uppercase',
textTransform: "uppercase",
letterSpacing: 1,
textAlign: 'center',
textAlign: "center",
},
subtitle: {
fontSize: 13,
src/components/common/AnimatedText.tsx
+64
View File
@@ -0,0 +1,64 @@
import React, { useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Animated, {
useSharedValue,
useAnimatedStyle,
withTiming,
withRepeat,
withSequence,
withDelay,
Easing,
} from 'react-native-reanimated';
const AnimatedText = ({ text, style, delay = 0 }) => {
const opacity = useSharedValue(0);
const translateY = useSharedValue(20);
useEffect(() => {
opacity.value = withDelay(delay, withTiming(1, { duration: 800 }));
translateY.value = withDelay(delay, withTiming(0, { duration: 800 }));
}, []);
const animatedStyle = useAnimatedStyle(() => ({
opacity: opacity.value,
transform: [{ translateY: translateY.value }],
}));
return (
<Animated.Text style={[styles.text, style, animatedStyle]}>
{text}
</Animated.Text>
);
};
export default AnimatedText;
// Usage
const MyComponent = () => {
return (
<View style={styles.container}>
<AnimatedText text="Hello World" style={styles.title} />
<AnimatedText text="Welcome to Reanimated" style={styles.subtitle} delay={200} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 32,
fontWeight: 'bold',
marginBottom: 10,
},
subtitle: {
fontSize: 18,
color: '#666',
},
text: {
textAlign: 'center',
},
});
src/components/common/Custom.tsx
+5 -9
View File
@@ -34,6 +34,9 @@ const CustomInput: React.FC<CustomInputProps> = ({
<TextInput
style={[styles.input, icon && { paddingLeft: 36 }, style]}
placeholderTextColor={colors.textLight}
value={value ? String(value) : undefined}
{...(error ? {borderColor:'red', borderWidth:1} : {})}
{...rest}
/>
</View>
@@ -57,21 +60,14 @@ const CustomButton: React.FC<CustomButtonProps> = ({
type = "primary",
icon,
style = {},
buttonBackground,
buttonBackground,
}) => {
const backgroundColor =
buttonBackground ??
(type === "secondary"
? colors.pastelBlue
: type === "danger"
? colors.pastelOrange
: colors.primary);
const textColor = type === "secondary" ? colors.textDark : '#000';
return (
<TouchableOpacity
style={[styles.button, { backgroundColor }, style]}
style={[styles.button, { backgroundColor: buttonBackground }, style]}
onPress={onPress}
activeOpacity={0.8}
>
src/components/common/Header.tsx
+1 -8
View File
@@ -17,7 +17,7 @@ const Header: React.FC<HeaderProps> = ({
showBack = true,
onBackPress,
rightAction,
titleColor = 'pink',
titleColor = "",
arrowColor='pink'
}) => {
const navigation = useNavigation();
@@ -32,13 +32,6 @@ const Header: React.FC<HeaderProps> = ({
return (
<View style={styles.header}>
{showBack ? (
<TouchableOpacity onPress={handleBack}>
<Ionicons name="arrow-back" size={24} color={arrowColor} />
</TouchableOpacity>
) : (
<View style={{ width: 24 }} /> // placeholder to keep spacing
)}
<Text style={[styles.headerTitle, {color:titleColor}]}>{title}</Text>
<View>{rightAction}</View>
</View>