theme update latest project
This commit is contained in:
Abin Toppo
+114
-263
@@ -1,328 +1,179 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
Animated,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
Animated,
|
||||
StatusBar,
|
||||
ActivityIndicator,
|
||||
Dimensions,
|
||||
} from 'react-native';
|
||||
import { LOGIN_URL } from '../utils/ApiUrls';
|
||||
import axios from 'axios';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import type { StackNavigationProp } from '@react-navigation/stack';
|
||||
import { StackNavigationProp } from '@react-navigation/stack';
|
||||
import { responsiveFontSize } from 'react-native-responsive-dimensions';
|
||||
import { RootStackParamList } from '../navigation/AppNavigator';
|
||||
import LinearGradient from 'react-native-linear-gradient';
|
||||
import Ionicons from '@react-native-vector-icons/ionicons';
|
||||
import MaterialRipple from 'react-native-material-ripple';
|
||||
import CustomAlert from '../components/CostomAlart';
|
||||
import colors from '../components/colors';
|
||||
import {
|
||||
responsiveHeight,
|
||||
responsiveWidth,
|
||||
responsiveFontSize
|
||||
} from "react-native-responsive-dimensions";
|
||||
import { useTheme } from '../theme/ThemeProvider';
|
||||
import { useTheme } from '../hooks/ui/useTheme';
|
||||
import { useFetch } from '../hooks/core/useFetch';
|
||||
import { LOGIN_URL } from '../utils/ApiUrls';
|
||||
import { CustomInput, CustomButton } from '../components/common/Custom';
|
||||
import AppView from '../components/AppView';
|
||||
import FontsFamily from '../constents/FontsFamily';
|
||||
|
||||
|
||||
|
||||
const { width } = Dimensions.get('window');
|
||||
const BLOCK_SIZE = width / 3;
|
||||
|
||||
|
||||
// Note: You will need to install react-native-material-ripple
|
||||
// npm install react-native-material-ripple
|
||||
|
||||
|
||||
export default function LoginScreen() {
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
|
||||
const theme = useTheme();
|
||||
const [mobile, setMobile] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [alertInfo, setAlertInfo] = useState({
|
||||
visible: false,
|
||||
title: '',
|
||||
message: '',
|
||||
buttons: [] as { text: string; onPress: () => void; style?: 'cancel' | 'destructive' | 'default' }[],
|
||||
alertType: 'info' as 'info' | 'success' | 'error',
|
||||
});
|
||||
|
||||
|
||||
const fade = useRef(new Animated.Value(0)).current;
|
||||
const slide = useRef(new Animated.Value(30)).current;
|
||||
const ctaScale = useRef(new Animated.Value(1)).current;
|
||||
const { theme } = useTheme();
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const fadeAnim = useRef(new Animated.Value(0)).current;
|
||||
const slideAnim = useRef(new Animated.Value(20)).current;
|
||||
|
||||
useEffect(() => {
|
||||
Animated.parallel([
|
||||
Animated.timing(fade, { toValue: 1, duration: 800, useNativeDriver: true }),
|
||||
Animated.spring(slide, { toValue: 0, friction: 5, tension: 40, useNativeDriver: true }),
|
||||
Animated.timing(fadeAnim, {
|
||||
toValue: 1,
|
||||
duration: 800,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.spring(slideAnim, {
|
||||
toValue: 0,
|
||||
tension: 20,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]).start();
|
||||
}, []);
|
||||
|
||||
|
||||
const showAlert = (
|
||||
title: string,
|
||||
message: string,
|
||||
buttons: { text: string; onPress: () => void; style?: 'cancel' | 'destructive' | 'default' }[],
|
||||
alertType: 'info' | 'success' | 'error' = 'info',
|
||||
) => {
|
||||
setAlertInfo({ visible: true, title, message, buttons, alertType });
|
||||
};
|
||||
|
||||
|
||||
const hideAlert = () => {
|
||||
setAlertInfo({ ...alertInfo, visible: false });
|
||||
};
|
||||
}, [fadeAnim, slideAnim]);
|
||||
|
||||
const { refetch: sendOtp, isFetching: loading } = useFetch<any>(
|
||||
LOGIN_URL,
|
||||
{ mobile },
|
||||
{
|
||||
enabled: false,
|
||||
retry: false,
|
||||
}
|
||||
);
|
||||
|
||||
const handleContinue = async () => {
|
||||
if (mobile.length === 10) {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get(LOGIN_URL, { params: { mobile } });
|
||||
console.log("login res -",res)
|
||||
if (res.data.statusCode === 200) {
|
||||
navigation.navigate('OtpVarify', { mobile });
|
||||
} else {
|
||||
showAlert('Login Failed', res.data.message || 'Could not send OTP.', [{ text: 'Try Again', onPress: hideAlert }], 'error');
|
||||
}
|
||||
} catch (error: any) {
|
||||
showAlert('An Error Occurred', 'Failed to send OTP. Please check your connection and try again.', [{ text: 'OK', onPress: hideAlert }], 'error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
if (!/^\d{10}$/.test(mobile)) {
|
||||
setError('Please enter a 10-digit mobile number');
|
||||
return;
|
||||
}
|
||||
|
||||
setError('');
|
||||
try {
|
||||
const { data } = await sendOtp();
|
||||
if (data?.statusCode === 200) {
|
||||
navigation.navigate('OtpVarify', { mobile });
|
||||
} else {
|
||||
setError(data?.message || 'Failed to send OTP. Please try again.');
|
||||
}
|
||||
} else {
|
||||
showAlert('Invalid Number', 'Please enter a valid 10-digit mobile number.', [{ text: 'Got it', onPress: hideAlert }], 'info');
|
||||
} catch (err) {
|
||||
setError('Something went wrong. Please check your connection.');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const colorsBlocks = [
|
||||
theme.colors.logincard,
|
||||
theme.colors.logincard1,
|
||||
theme.colors.logincard1,
|
||||
theme.colors.logincard,
|
||||
theme.colors.logincard,
|
||||
theme.colors.logincard1,
|
||||
theme.colors.logincard1,
|
||||
theme.colors.logincard,
|
||||
theme.colors.logincard,
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<View style={[ styles.container, {backgroundColor: theme.colors.background }]}>
|
||||
<StatusBar barStyle={theme.mode === "dark" ? "light-content" : "dark-content"} backgroundColor={colors.pastelOrange} />
|
||||
|
||||
|
||||
{/* Funky grid blocks background (Unchanged) */}
|
||||
<View style={styles.gridContainer}>
|
||||
{colorsBlocks.map((bgColor, index) => (
|
||||
<View
|
||||
key={index}
|
||||
style={[
|
||||
styles.gridBlock,
|
||||
{ backgroundColor: bgColor ,borderRadius:16 },
|
||||
index % 2 === 0 ? styles.elevatedBlock : {},
|
||||
]}
|
||||
/>
|
||||
|
||||
))}
|
||||
</View>
|
||||
|
||||
|
||||
<AppView keyboardSafe={false} style={styles.container}>
|
||||
<KeyboardAvoidingView
|
||||
style={styles.keyboardAvoidingContainer}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
style={styles.keyboardView}
|
||||
>
|
||||
<View style={styles.contentContainer}>
|
||||
<View style={[ styles.topSection, {marginTop:60}]}>
|
||||
<Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}>
|
||||
<Text style={[styles.brand, { color: theme.colors.textPrimary }]}>CircleCollect</Text>
|
||||
<Text style={[styles.title, { color: theme.colors.textPrimary }]}>Welcome Back!</Text>
|
||||
<Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
|
||||
Let's get you signed in to your community.
|
||||
</Text>
|
||||
</Animated.View>
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.content,
|
||||
{
|
||||
opacity: fadeAnim,
|
||||
transform: [{ translateY: slideAnim }],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.headerSection}>
|
||||
<Text style={[styles.brand, { color: theme.colors.primary }]}>CircleCollect</Text>
|
||||
<Text style={[styles.title, { color: theme.colors.textPrimary }]}>Welcome back</Text>
|
||||
<Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
|
||||
Enter your mobile number to sign in to your community.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.formSection}>
|
||||
<CustomInput
|
||||
label="Mobile Number"
|
||||
placeholder="e.g. 9876543210"
|
||||
value={mobile}
|
||||
onChangeText={(text) => {
|
||||
setMobile(text.replace(/\D/g, ''));
|
||||
if (error) setError('');
|
||||
}}
|
||||
keyboardType="phone-pad"
|
||||
maxLength={10}
|
||||
icon="call-outline"
|
||||
error={error}
|
||||
/>
|
||||
|
||||
<Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] ,marginTop: 150}}>
|
||||
<View style={[styles.inputWrapper, { backgroundColor: theme.colors.reverseBackground }]}>
|
||||
<Ionicons name="call-outline" size={24} color={theme.colors.reverseText} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[ styles.input, { color: theme.colors.reverseText, fontFamily: FontsFamily.nunitoRegular }]}
|
||||
placeholder="Enter your mobile number"
|
||||
placeholderTextColor={theme.colors.reverseText}
|
||||
value={mobile}
|
||||
onChangeText={setMobile}
|
||||
keyboardType="phone-pad"
|
||||
maxLength={10}
|
||||
selectionColor={colors.textLight}
|
||||
/>
|
||||
</View>
|
||||
</Animated.View>
|
||||
|
||||
|
||||
<Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
|
||||
<MaterialRipple
|
||||
<CustomButton
|
||||
title="Continue"
|
||||
onPress={handleContinue}
|
||||
disabled={loading}
|
||||
rippleColor={colors.white}
|
||||
loading={loading}
|
||||
icon="arrow-forward-outline"
|
||||
style={styles.button}
|
||||
rippleCentered
|
||||
rippleContainerBorderRadius={30}
|
||||
>
|
||||
<View style={[styles.buttonGradient, { backgroundColor: theme.colors.reverseBackground }]} >
|
||||
{loading ? (
|
||||
<ActivityIndicator color={theme.colors.reverseText} />
|
||||
) : (
|
||||
<View style={styles.buttonContent}>
|
||||
<Text style={[styles.buttonText, { color: theme.colors.reverseText }]}>Continue</Text>
|
||||
<Ionicons name="arrow-forward-circle-outline" size={22} color={theme.colors.reverseText} style={{marginLeft: 8}} />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</MaterialRipple>
|
||||
<Text style={styles.footerText}>
|
||||
Your privacy is our priority. Your information is always secure.
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.footerSection}>
|
||||
<Text style={[styles.footerText, { color: theme.colors.textMuted }]}>
|
||||
Your information is secure and private.
|
||||
</Text>
|
||||
</Animated.View>
|
||||
</View>
|
||||
</View>
|
||||
</Animated.View>
|
||||
</KeyboardAvoidingView>
|
||||
|
||||
|
||||
<CustomAlert
|
||||
visible={alertInfo.visible}
|
||||
title={alertInfo.title}
|
||||
message={alertInfo.message}
|
||||
buttons={alertInfo.buttons}
|
||||
alertType={alertInfo.alertType}
|
||||
/>
|
||||
</View>
|
||||
</AppView>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
gridContainer: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
gridBlock: {
|
||||
width: BLOCK_SIZE,
|
||||
height: BLOCK_SIZE,
|
||||
margin: 2,
|
||||
borderRadius: 16,
|
||||
},
|
||||
elevatedBlock: {
|
||||
shadowColor: '#ffffffff',
|
||||
shadowOffset: { width: 1, height: 5 },
|
||||
shadowOpacity: 1,
|
||||
shadowRadius: 15,
|
||||
elevation: 10,
|
||||
},
|
||||
keyboardAvoidingContainer: {
|
||||
keyboardView: {
|
||||
flex: 1,
|
||||
},
|
||||
contentContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'space-between',
|
||||
padding: 24,
|
||||
},
|
||||
topSection: {
|
||||
flex: 0.8,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
content: {
|
||||
paddingHorizontal: 12,
|
||||
},
|
||||
headerSection: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 48,
|
||||
},
|
||||
brand: {
|
||||
fontSize: responsiveFontSize(3),
|
||||
color: colors.primary,
|
||||
textAlign: 'center',
|
||||
letterSpacing: 2,
|
||||
marginBottom: 16,
|
||||
textShadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
textShadowOffset: { width: 1, height: 1 },
|
||||
textShadowRadius: 2,
|
||||
fontSize: responsiveFontSize(2.2),
|
||||
fontFamily: FontsFamily.nunitoExtraBold,
|
||||
letterSpacing: 1.5,
|
||||
textTransform: 'uppercase',
|
||||
marginBottom: 16,
|
||||
},
|
||||
title: {
|
||||
fontSize: responsiveFontSize(5),
|
||||
fontFamily: FontsFamily.nunitoBold,
|
||||
|
||||
textAlign: 'center',
|
||||
marginBottom: 14,
|
||||
fontSize: responsiveFontSize(3.5),
|
||||
fontFamily: FontsFamily.nunitoBold,
|
||||
marginBottom: 8,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: responsiveFontSize(1.6),
|
||||
fontFamily: FontsFamily.nunitoRegular,
|
||||
fontFamily: FontsFamily.nunitoRegular,
|
||||
textAlign: 'center',
|
||||
|
||||
lineHeight: 26,
|
||||
maxWidth: 320,
|
||||
paddingHorizontal: 24,
|
||||
lineHeight: 24,
|
||||
},
|
||||
inputWrapper: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderRadius: 36,
|
||||
borderWidth: 2,
|
||||
paddingHorizontal: responsiveHeight(2),
|
||||
elevation: 8,
|
||||
},
|
||||
inputIcon: {
|
||||
marginRight: 16,
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
fontSize: responsiveFontSize(1.8),
|
||||
fontFamily: FontsFamily.nunitoSemiBold,
|
||||
color: colors.textLight,
|
||||
height: responsiveHeight(5),
|
||||
},
|
||||
bottomSection: {
|
||||
alignItems: 'center',
|
||||
paddingBottom: Platform.OS === 'ios' ? 20 : 10,
|
||||
formSection: {
|
||||
marginBottom: 32,
|
||||
},
|
||||
button: {
|
||||
width: '100%',
|
||||
borderRadius: 30,
|
||||
elevation: 14,
|
||||
marginTop: 20,
|
||||
marginTop: 16,
|
||||
},
|
||||
buttonGradient: {
|
||||
|
||||
borderRadius:42,
|
||||
paddingVertical: 14,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
footerSection: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
buttonContent: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
buttonText: {
|
||||
color: colors.white,
|
||||
fontSize: responsiveFontSize(1.8),
|
||||
fontFamily: FontsFamily.nunitoBold,
|
||||
},
|
||||
footerText: {
|
||||
fontSize: responsiveFontSize(1.4),
|
||||
color: 'rgba(0,0,0,0.5)',
|
||||
marginTop: 28,
|
||||
textAlign: 'center',
|
||||
maxWidth: 300,
|
||||
fontSize: responsiveFontSize(1.3),
|
||||
fontFamily: FontsFamily.nunitoRegular,
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user