import React, {useState, useEffect} from 'react';
import {
View,
Text,
StyleSheet,
Alert,
Image,
TouchableOpacity,
} from 'react-native';
import Modal from 'react-native-modal';
import Button from './Button';
import InputField from './InputField';
import QRCode from 'react-native-qrcode-svg';
import {COLORS} from '../styles/colors';
import {align, border_radius, fontSize, fontWeight} from '../styles/fontstyle';
import {ADVAINT_LOGO, BACK, DELETE, SHARE} from '../assets';
const AddItemModal = ({
isVisible,
onClose,
onSubmit,
modalTitle = '',
submitButtonText = 'Submit',
fields = [],
children,
type,
flat_no,
project_name,
qrValue,
name,
showBack,
onDisableSchedule,
}) => {
const [formData, setFormData] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
useEffect(() => {
if (isVisible && !children && fields.length > 0) {
const initialData = {};
fields.forEach(field => {
initialData[field.key] = '';
});
setFormData(initialData);
} else if (isVisible) {
setFormData({});
}
}, [fields, isVisible, children]);
const handleInputChange = (key, value) => {
setFormData(prevData => ({...prevData, [key]: value}));
};
const handleSubmit = async () => {
if (!children) {
for (const field of fields) {
if (!formData[field.key]?.trim() && field.required !== false) {
Alert.alert('Error', `Please fill in "${field.label}".`);
return;
}
}
}
if (!onSubmit) {
console.warn('AddItemModal: onSubmit prop missing.');
handleClose();
return;
}
setIsSubmitting(true);
try {
await onSubmit(formData);
} catch (error) {
console.error('AddItemModal Submission Error:', error);
} finally {
setIsSubmitting(false);
}
};
const handleClose = () => {
if (isSubmitting) return;
setFormData({});
onClose();
};
const onModalHide = () => {
setFormData({});
setIsSubmitting(false);
};
return (
<Modal
isVisible={isVisible}
onBackdropPress={handleClose}
onBackButtonPress={handleClose}
style={styles.modal}
avoidKeyboard
animationIn="slideInUp"
animationOut="slideOutDown"
animationInTiming={300}
animationOutTiming={300}
backdropTransitionOutTiming={0}
onModalHide={onModalHide}>
<View style={styles.content}>
<View style={styles.headerContainer}>
<TouchableOpacity
style={styles.leftIconContainer}
onPress={handleClose}>
<Image source={BACK} style={styles.icon} />
</TouchableOpacity>
<View style={styles.centerTitleContainer}>
<Text style={styles.title}>{modalTitle}</Text>
</View>
</View>
{type == 'change_flat' ? (
<View style={styles.modalDisplayContent}>
<View style={styles.modalDisplayRow}>
<Text style={styles.modalDisplayLabel}>Current Flat:</Text>
<Text style={styles.modalDisplayText}>{flat_no}</Text>
</View>
<View style={styles.modalDisplayRow}>
<Text style={styles.modalDisplayLabel}>Project:</Text>
<Text style={styles.modalDisplayText}>{project_name}</Text>
</View>
<Button
key="changeFlatBtn"
title="Cancel"
onPress={handleClose}
style={styles.modalButton}
/>
</View>
) : type == 'Qr_code' ? (
<View style={[styles.modalDisplayContent, {height: '85%'}]}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.background_color,
paddingVertical: 20,
paddingHorizontal: 15,
borderRadius: border_radius.mid,
}}>
<View
style={{
marginVertical: 20,
paddingVertical: 10,
paddingHorizontal: 60,
backgroundColor: COLORS.qr_code_pin_background_color,
borderRadius: border_radius.mid,
}}>
<Text
style={{
color: COLORS.sub_label_color,
fontSize: fontSize.sub_heading,
fontWeight: fontWeight.Show_qr_text_weight,
marginRight: 10,
}}>
FAMILY CODE:292 747
</Text>
</View>
<QRCode
value={qrValue}
size={290}
logoBackgroundColor="transparent"
/>
<View
style={{
marginVertical: 5,
paddingVertical: 6,
paddingHorizontal: 15,
}}>
<Text
style={{
fontSize: fontSize.label,
color: COLORS.sub_label_color,
fontWeight: fontWeight.Show_qr_text_weight,
textAlign: align.center,
}}>
Show this QR code to get hassle free access
</Text>
<View style={{marginVertical: 10}}>
<Text
style={{
fontSize: fontSize.heading,
color: COLORS.label_color,
fontWeight: fontWeight.Show_qr_text_weight,
textAlign: align.center,
}}>
{name}
</Text>
<Text
style={{
fontSize: fontSize.sub_heading,
color: COLORS.sub_label_color,
fontWeight: fontWeight.Show_qr_text_weight,
textAlign: align.center,
marginVertical: 5,
}}>
Residing Owner
</Text>
<Text
style={{
fontSize: fontSize.sub_heading,
color: COLORS.sub_label_color,
fontWeight: fontWeight.label_weight,
textAlign: align.center,
}}>
{flat_no}
</Text>
</View>
</View>
</View>
<Image
source={ADVAINT_LOGO}
style={{
height: 20,
width: '35%',
marginVertical: 50,
alignSelf: 'center',
}}
/>
</View>
) : type == 'delete_schedule' ? (
<View>
<View
style={{
height: 2,
width: '100%',
backgroundColor: COLORS.black_color,
}}
/>
<TouchableOpacity
style={{
flexDirection: 'row',
gap: 10,
alignItems: 'center',
justifyContent: 'flex-start',
marginVertical: 20,
}}>
<Image
source={SHARE}
style={[
styles.icon,
{tintColor: COLORS.black_color, opacity: 0.5},
]}
/>
<Text>Edit Schedule</Text>
</TouchableOpacity>
<View
style={{
height: 2,
width: '100%',
backgroundColor: COLORS.background_color,
}}
/>
<TouchableOpacity
style={{
flexDirection: 'row',
gap: 10,
alignItems: 'center',
justifyContent: 'flex-start',
marginVertical: 20,
}}
onPress={() => {
onDisableSchedule();
}}>
<Image
source={DELETE}
style={[
styles.icon,
{tintColor: COLORS.black_color, opacity: 0.5},
]}
/>
<Text>Disable Schedule</Text>
</TouchableOpacity>
<Button
key="changeFlatBtn"
title="Cancel"
onPress={handleClose}
style={styles.modalButton}
/>
</View>
) : type == 'lock_secure' ? (
<View style={styles.modalDisplayContent}>
<TouchableOpacity
style={{
alignItems: 'center',
marginBottom: 12,
}}>
<Text
style={{
fontSize: 15,
color: '#555',
fontWeight: fontWeight.Show_qr_text_weight,
}}>
Yes
</Text>
</TouchableOpacity>
<View
style={{
height: 2,
width: '100%',
backgroundColor: '#eee',
}}
/>
<TouchableOpacity
style={{
alignItems: 'center',
marginBottom: 12,
alignItems: 'center',
marginBottom: 12,
paddingTop: 10,
}}>
<Text
style={{
fontSize: 15,
color: '#555',
fontWeight: fontWeight.Show_qr_text_weight,
}}>
No
</Text>
</TouchableOpacity>
<Button
key="changeFlatBtn"
title="Cancel"
onPress={handleClose}
style={styles.modalButton}
/>
</View>
) : type == 'child_safe' ? (
<View style={styles.modalDisplayContent}>
<TouchableOpacity
style={{
alignItems: 'center',
marginBottom: 12,
}}>
<Text
style={{
fontSize: 15,
color: '#555',
fontWeight: fontWeight.Show_qr_text_weight,
}}>
Yes
</Text>
</TouchableOpacity>
<View
style={{
height: 2,
width: '100%',
backgroundColor: '#eee',
}}
/>
<TouchableOpacity
style={{
alignItems: 'center',
marginBottom: 12,
alignItems: 'center',
marginBottom: 12,
paddingTop: 10,
}}>
<Text
style={{
fontSize: 15,
color: '#555',
fontWeight: fontWeight.Show_qr_text_weight,
}}>
No
</Text>
</TouchableOpacity>
<Button
key="changeFlatBtn"
title="Cancel"
onPress={handleClose}
style={styles.modalButton}
/>
</View>
): type == 'vacation' ? (
<View style={styles.modalDisplayContent}>
<TouchableOpacity
style={{
alignItems: 'center',
marginBottom: 12,
}}>
<Text
style={{
fontSize: 15,
color: '#555',
fontWeight: fontWeight.Show_qr_text_weight,
}}>
Yes
</Text>
</TouchableOpacity>
<View
style={{
height: 2,
width: '100%',
backgroundColor: '#eee',
}}
/>
<TouchableOpacity
style={{
alignItems: 'center',
marginBottom: 12,
alignItems: 'center',
marginBottom: 12,
paddingTop: 10,
}}>
<Text
style={{
fontSize: 15,
color: '#555',
fontWeight: fontWeight.Show_qr_text_weight,
}}>
No
</Text>
</TouchableOpacity>
<Button
key="changeFlatBtn"
title="Cancel"
onPress={handleClose}
style={styles.modalButton}
/>
</View>
) : type == 'normal' ? (
<View style={styles.modalDisplayContent}>
<TouchableOpacity
style={{
alignItems: 'center',
marginBottom: 12,
}}>
<Text
style={{
fontSize: 15,
color: '#555',
fontWeight: fontWeight.Show_qr_text_weight,
}}>
Yes
</Text>
</TouchableOpacity>
<View
style={{
height: 2,
width: '100%',
backgroundColor: '#eee',
}}
/>
<TouchableOpacity
style={{
alignItems: 'center',
marginBottom: 12,
alignItems: 'center',
marginBottom: 12,
paddingTop: 10,
}}>
<Text
style={{
fontSize: 15,
color: '#555',
fontWeight: fontWeight.Show_qr_text_weight,
}}>
No
</Text>
</TouchableOpacity>
<Button
key="changeFlatBtn"
title="Cancel"
onPress={handleClose}
style={styles.modalButton}
/>
</View>
) : type == 'block_access' ? (
<View style={styles.modalDisplayContent}>
<TouchableOpacity
style={{
alignItems: 'center',
marginBottom: 12,
}}>
<Text
style={{
fontSize: 15,
color: '#555',
fontWeight: fontWeight.Show_qr_text_weight,
}}>
Yes
</Text>
</TouchableOpacity>
<View
style={{
height: 2,
width: '100%',
backgroundColor: '#eee',
}}
/>
<TouchableOpacity
style={{
alignItems: 'center',
marginBottom: 12,
alignItems: 'center',
marginBottom: 12,
paddingTop: 10,
}}>
<Text
style={{
fontSize: 15,
color: '#555',
fontWeight: fontWeight.Show_qr_text_weight,
}}>
No
</Text>
</TouchableOpacity>
<Button
key="changeFlatBtn"
title="Cancel"
onPress={handleClose}
style={styles.modalButton}
/>
</View>
) : children ? (
children
) : (
fields.map(field => (
<InputField
key={field.key}
label={field.label}
value={formData[field.key] || ''}
onChangeText={value => handleInputChange(field.key, value)}
placeholder={field.placeholder}
maxLength={field.maxLength}
multiline={field.multiline}
numberOfLines={field.numberOfLines}
keyboardType={field.keyboardType || 'default'}
secureTextEntry={field.secureTextEntry || false}
style={field.multiline ? styles.textArea : null}
/>
))
)}
{!children && (
<View style={styles.buttonContainer}>
<Button
title="Cancel"
onPress={handleClose}
style={styles.cancelButton}
textStyle={styles.cancelButtonText}
disabled={isSubmitting}
/>
<Button
title={isSubmitting ? 'Submitting...' : submitButtonText}
onPress={handleSubmit}
disabled={isSubmitting}
loading={isSubmitting}
/>
</View>
)}
</View>
</Modal>
);
};
const styles = StyleSheet.create({
modal: {justifyContent: 'flex-end', margin: 0},
content: {
backgroundColor: 'white',
padding: 22,
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
borderColor: 'rgba(0, 0, 0, 0.1)',
paddingBottom: 30,
},
title: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 20,
textAlign: 'center',
color: '#000000',
},
textArea: {height: 100, textAlignVertical: 'top'},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
marginTop: 20,
},
cancelButton: {
backgroundColor: '#f8f9fa',
borderColor: '#dee2e6',
borderWidth: 1,
paddingHorizontal: 20,
marginRight: 10,
},
cancelButtonText: {color: '#495057'},
modalButton: {marginTop: 20},
modalDisplayLabel: {
fontSize: 15,
color: '#555',
fontWeight: fontWeight.Show_qr_text_weight,
marginRight: 10,
},
modalDisplayText: {
fontSize: 15,
color: '#333',
flexShrink: 1,
textAlign: 'right',
},
modalDisplayContent: {paddingVertical: 10, paddingHorizontal: 5},
modalDisplayRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 12,
paddingVertical: 6,
borderBottomWidth: 1,
borderBottomColor: '#eee',
},
headerContainer: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
},
leftIconContainer: {
alignItems: 'flex-start',
justifyContent: 'center',
marginBottom: 20,
paddingVertical: 20,
},
centerTitleContainer: {
flex: 4,
alignItems: 'center',
justifyContent: 'center',
},
icon: {
height: 20,
width: 20,
},
});
export default AddItemModal;
this is my AddItemModal
in home calling it like
import React, {
createContext,
useState,
useContext,
useRef,
useEffect,
useCallback,
useMemo,
useLayoutEffect,
} from 'react';
import {
View,
SafeAreaView,
StatusBar,
Image,
TouchableOpacity,
FlatList,
Text,
Alert,
ScrollView,
ActivityIndicator,
StyleSheet,
Platform,
} from 'react-native';
import {useUser} from '../../context/UserContext';
import AddItemModal from '../../services/AddItemModal';
import * as forge from 'node-forge';
import {
DOWNARROW,
HOME,
PLACEHOLDER,
PLAY,
UNLOCK,
LOCK,
QR,
GIVE_ACCESS,
BLOCK_ALL,
VIEW_ACCESS,
SHARE_KEY,
LOCK_SECURE,
CHILD_SAFE,
VACATION,
DEVICES,
ZONES,
ALARMS,
CCTV,
} from '../../assets';
import HomeScreenStyles from '../../styles/HomeScreenStyles';
import {COLORS} from '../../styles/colors';
import {fontSize} from '../../styles/fontstyle';
import moment from 'moment';
import {PUBLIC_KEY} from '../../utils/custom_data';
import BiometricAuth from '../../services/BiometricAuth';
import {useFocusEffect} from '@react-navigation/native';
import ApiManager from '../../services/ApiManager';
import {useMqtt} from '../../context/MqttContext';
import ProgressView from '../../services/ProgressView';
const CAMERA_IMAGE_URI = 'https://picsum.photos/seed/homedoor/400/600';
const mockOptionViewData = [
{name: 'Option 1', image: PLACEHOLDER},
{name: 'Option 2', image: PLACEHOLDER},
{name: 'Option 3', image: PLACEHOLDER},
{name: 'Option 4', image: PLACEHOLDER},
];
const HomeScreen = ({navigation}) => {
// --- MQTT ---
const {connectionState, subscribe, unsubscribe, publish} = useMqtt();
const [isLock, setIsLock] = useState(0);
const [moreOptionView, setMoreOptionView] = useState(mockOptionViewData);
const [eventId, setEventId] = useState('');
const [encodedQR, setEncodedQR] = useState();
const [isFlatModalVisible, setIsFlatModalVisible] = useState(false);
const [isQrModalVisible, setIsQrModalVisible] = useState(false);
const [onBlock, setBlock] = useState(false);
const [onLockSecure, setLockSecure] = useState(false);
const [onChildSafe, setChildSafe] = useState(false);
const [vacation, setVacation] = useState(false);
const [onNormal, setNormal] = useState(false);
const {userDetails} = useUser();
const [isCameraLoading, setIsCameraLoading] = useState(false);
const [lockPress, setLoackPress] = useState(false);
const [title, setTitle] = useState('');
const currentDate = new Date();
// --- MQTT Topics ---
const MQTT_SUBSCRIBE_TOPIC =
'advaint/cus_' + userDetails.customer_id + '/event/feedback';
const MQTT_PUBLISH_TOPIC =
'advaint/cus_' + userDetails.customer_id + '/allonoff';
const home_access_list = [
{id: 1, name: 'Give Access', image: GIVE_ACCESS},
{id: 2, name: 'Block All', image: BLOCK_ALL},
{id: 3, name: 'View Access', image: VIEW_ACCESS},
{id: 4, name: 'Share key', image: SHARE_KEY},
];
const home_mode_list = [
{id: 1, name: 'Lock Secure', image: LOCK_SECURE},
{id: 2, name: 'Child Safe', image: CHILD_SAFE},
{id: 3, name: 'Vacation', image: VACATION},
{id: 4, name: 'Normal', image: HOME},
];
const smart_home_list = [
{id: 1, name: 'Devices', image: DEVICES},
{id: 2, name: 'Zones', image: ZONES},
{id: 3, name: 'Alarms', image: ALARMS},
{id: 4, name: 'Cameras', image: CCTV},
];
useLayoutEffect(() => {
navigation.setOptions({
headerTitleAlign: 'center',
headerTitle: () => (
<Text style={HomeScreenStyles.headerTitleText}>Home</Text>
),
headerLeft: () => (
<TouchableOpacity
style={HomeScreenStyles.headerLeftContainer}
onPress={() => {
setIsFlatModalVisible(true);
}}>
<Image source={HOME} style={HomeScreenStyles.homeIconStyle} />
<View style={HomeScreenStyles.headerLeftTextContainer}>
<Text style={HomeScreenStyles.headerFlatText} numberOfLines={1}>
Flat: {userDetails?.flat || 'N/A'}
</Text>
<Text style={HomeScreenStyles.headerProjectText} numberOfLines={1}>
{userDetails?.projectName || 'Project'}
</Text>
</View>
<Image
source={DOWNARROW}
style={HomeScreenStyles.headerDownArrowImage}
/>
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity
style={HomeScreenStyles.headerRightContainer}
onPress={() => {
setIsQrModalVisible(true);
}}>
<Image source={QR} style={HomeScreenStyles.QRImageStyle} />
</TouchableOpacity>
),
});
}, [navigation, userDetails]);
useEffect(() => {
encryptAndEncodeMessage();
getDashboardDetails();
}, []);
// --- MQTT Subscribe/Unsubscribe ---
useFocusEffect(
useCallback(() => {
console.log(
'HomeScreen focused, subscribing to MQTT topic:',
MQTT_SUBSCRIBE_TOPIC,
);
const callback = (data, topic) => {
// Handle incoming messages
console.log(
`Received MQTT message on topic: ${topic}, data: ${data.event_status}`,
);
setLoackPress(false);
const parsedData = JSON.parse(data);
if (parsedData.event_status == 'ON') {
setIsLock(1);
} else if (parsedData.event_status == 'OFF') {
setIsLock(0);
}
try {
const payload = JSON.parse(data);
console.log('Parsed MQTT Payload:', payload);
// Process payload data here, update UI, etc.
} catch (e) {
console.warn('MQTT message data is not JSON:', data);
}
};
subscribe(MQTT_SUBSCRIBE_TOPIC, callback);
return () => {
console.log(
'HomeScreen blurred, unsubscribing from MQTT topic:',
MQTT_SUBSCRIBE_TOPIC,
);
unsubscribe(MQTT_SUBSCRIBE_TOPIC, callback);
};
}, [subscribe, unsubscribe, userDetails?.flat]),
);
const getDashboardDetails = async (isManualRefresh = false) => {
if (!userDetails?.customer_id) {
console.log('User details not available yet or missing customer_id.');
return;
}
console.log(`Fetching list... Manual Refresh: ${isManualRefresh}`);
const customer_id = userDetails.customer_id;
try {
const dashboardResponse = await ApiManager.getDashboardData(customer_id);
if (dashboardResponse) {
console.log('dashboardResponse:', dashboardResponse.Data.frontLock);
setEventId(dashboardResponse.Data.frontLock.event_id);
if (dashboardResponse.Data.frontLock.status == 'ON') {
setIsLock(1);
} else if (dashboardResponse.Data.frontLock.status == 'OFF') {
setIsLock(0);
}
} else {
console.error(
'API did not return expected data structure:',
dashboardResponse,
);
if (isManualRefresh) {
Alert.alert(
'Error',
'Failed to fetch items. Invalid data format received.',
);
}
}
} catch (error) {
console.error('Fetch List Error in CommunityScreen:', error);
if (isManualRefresh) {
Alert.alert(
'Fetch Failed',
error.message || 'An unexpected error occurred while fetching items.',
);
}
} finally {
}
};
const sendMessage = () => {
setTitle(isLock == 1 ? 'Locking' : 'Unlocking');
setLoackPress(true);
const lockStatus = {
event_id: eventId,
parameter: isLock == 1 ? 0 : 1,
mode: 'MOBILE',
contact_id: userDetails.flat_contact_id,
};
console.log('Publishing MQTT message:', lockStatus);
publish(MQTT_PUBLISH_TOPIC, lockStatus);
};
const handleFingerprintScan = async () => {
BiometricAuth({
promptMessage: 'Authenticate to lock/unlock',
onSuccess: () => {
sendMessage();
},
onFailure: () => {
Alert.alert('Authentication Failed', 'Unable to authenticate user.');
},
});
};
const handleFlatModalClose = () => {
setIsFlatModalVisible(false);
};
const handleQrModalClose = () => {
setIsQrModalVisible(false);
};
const handleBlockClose = () => {
setBlock(false);
};
const handleLockSecureClose = () => {
setLockSecure(false);
};
const handleChildSafeClose = () => {
setChildSafe(false);
};
const handleVacationClose = () => {
setVacation(false);
};
const handleNormalClose = () => {
setNormal(false);
};
const message = `{"scan_code": "${
userDetails.qr_code_string
}","reader_type":"2","date":"${moment(currentDate, 'DD-MM-YYYY').format(
'DD-MM-YYYY',
)}"}`;
const encryptAndEncodeMessage = async () => {
try {
const publicKey = forge.pki.publicKeyFromPem(PUBLIC_KEY);
const encryptedMessage = publicKey.encrypt(message, 'RSA-OAEP', {
md: forge.md.sha256.create(),
mgf1: forge.mgf1.create(),
});
const base64EncodedMessage = forge.util.encode64(encryptedMessage);
setEncodedQR(base64EncodedMessage);
} catch (error) {
console.error('Error:', error);
}
};
return (
<SafeAreaView style={HomeScreenStyles.safeArea}>
<StatusBar
barStyle={'dark-content'}
backgroundColor={COLORS.status_bar_color}
/>
<ScrollView
style={HomeScreenStyles.scrollView}
contentContainerStyle={HomeScreenStyles.scrollViewContent}
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled">
<View style={[HomeScreenStyles.frontDoorOuterContainer]}>
<View style={HomeScreenStyles.frontDoorCard}>
<Text style={HomeScreenStyles.sectionTitle}>Front Door</Text>
<View style={HomeScreenStyles.frontDoorContentRow}>
<TouchableOpacity
style={HomeScreenStyles.cameraTouchable}
onPress={() => navigation.navigate('FrontCameraScreen')}>
<Image
source={{uri: CAMERA_IMAGE_URI}}
style={HomeScreenStyles.cameraImage}
resizeMode="cover"
onLoadStart={() => setIsCameraLoading(true)}
onLoadEnd={() => setIsCameraLoading(false)}
onError={e => {
console.error(
'Camera Image Load Error:',
e.nativeEvent.error,
);
setIsCameraLoading(false);
}}
fadeDuration={0}
/>
{isCameraLoading && (
<ActivityIndicator
style={HomeScreenStyles.cameraLoadingIndicator}
size="large"
color={COLORS.activity_indicator_color}
/>
)}
{!isCameraLoading && (
<View style={HomeScreenStyles.playButtonOverlay}>
<Image source={PLAY} style={HomeScreenStyles.playIcon} />
</View>
)}
</TouchableOpacity>
<View style={HomeScreenStyles.verticalSeparator} />
<View style={HomeScreenStyles.lockUnlockContainer}>
{isLock === 1 ? (
<TouchableOpacity // Unlock state, tap to lock
onPress={sendMessage}
style={HomeScreenStyles.lockUnlockButton}>
<Image
style={HomeScreenStyles.lockUnlockIcon}
source={UNLOCK}
/>
<View style={HomeScreenStyles.lockUnlockTextContainer}>
<Text
style={[
HomeScreenStyles.lockUnlockTitle,
{fontSize: fontSize.lock_label},
]}>
UNLOCKED
</Text>
<Text style={HomeScreenStyles.lockUnlockSubtitle}>
TAP TO LOCK
</Text>
</View>
</TouchableOpacity>
) : (
<TouchableOpacity // Lock state, tap to unlock
onPress={handleFingerprintScan}
style={HomeScreenStyles.lockUnlockButton}>
<Image
style={HomeScreenStyles.lockUnlockIcon}
source={LOCK}
/>
<View style={HomeScreenStyles.lockUnlockTextContainer}>
<Text
style={[
HomeScreenStyles.lockUnlockTitle,
{fontSize: fontSize.lock_label},
]}>
LOCKED
</Text>
<Text style={HomeScreenStyles.lockUnlockSubtitle}>
TAP TO UNLOCK
</Text>
</View>
</TouchableOpacity>
)}
</View>
</View>
</View>
</View>
<View style={HomeScreenStyles.sectionWrapper}>
<View style={HomeScreenStyles.sectionCard}>
<Text style={HomeScreenStyles.sectionTitle}>Home Access</Text>
<FlatList
data={home_access_list}
numColumns={4}
keyExtractor={item => item.id.toString()}
columnWrapperStyle={HomeScreenStyles.homeAccessColumnWrapper}
scrollEnabled={false}
renderItem={({item}) => (
<View style={HomeScreenStyles.homeAccessItem}>
<TouchableOpacity
onPress={() => {
// Alert.alert('Home Access', item.name);
if (item.id == 1) {
navigation.navigate('GiveAccessScreen');
} else if (item.id == 2) {
setBlock(true);
} else if (item.id == 3) {
navigation.navigate('ViewAccessScreen');
} else if (item.id == 4) {
}
}}
activeOpacity={0.5}
style={HomeScreenStyles.homeAccessIconBubble}>
<Image
style={HomeScreenStyles.homeAccessIcon}
source={item.image}
/>
</TouchableOpacity>
<Text
style={HomeScreenStyles.homeAccessText}
numberOfLines={2}
ellipsizeMode="tail">
{item.name}
</Text>
</View>
)}
/>
</View>
</View>
<View style={HomeScreenStyles.sectionWrapper}>
<View style={HomeScreenStyles.sectionCard}>
<Text style={HomeScreenStyles.sectionTitle}>Home Mode</Text>
<FlatList
data={home_mode_list}
numColumns={4}
keyExtractor={item => item.id.toString()}
columnWrapperStyle={HomeScreenStyles.homeAccessColumnWrapper}
scrollEnabled={false}
renderItem={({item}) => (
<View style={HomeScreenStyles.homeAccessItem}>
<TouchableOpacity
onPress={() => {
if (item.id == 1) {
setLockSecure(true);
} else if (item.id == 2) {
setChildSafe(true);
} else if (item.id == 3) {
setVacation(true);
} else if (item.id == 4) {
setNormal(true);
}
}}
activeOpacity={0.5}
style={HomeScreenStyles.homeAccessIconBubble}>
<Image
style={HomeScreenStyles.homeAccessIcon}
source={item.image}
/>
</TouchableOpacity>
<Text
style={HomeScreenStyles.homeAccessText}
numberOfLines={2}
ellipsizeMode="tail">
{item.name}
</Text>
</View>
)}
/>
</View>
</View>
<View style={HomeScreenStyles.sectionWrapper}>
<View style={HomeScreenStyles.sectionCard}>
<Text style={HomeScreenStyles.sectionTitle}>Smart Home</Text>
<FlatList
data={smart_home_list}
numColumns={4}
keyExtractor={item => item.id.toString()}
columnWrapperStyle={HomeScreenStyles.homeAccessColumnWrapper}
scrollEnabled={false}
renderItem={({item}) => (
<View style={HomeScreenStyles.homeAccessItem}>
<TouchableOpacity
activeOpacity={0.5}
onPress={() => {
if (item.name == 'Devices') {
navigation.navigate('DeviceScreen');
} else if (item.name == 'Zones') {
navigation.navigate('ZoneScreen');
} else if (item.name == 'Alarms') {
navigation.navigate('AlarmsScreen');
} else if (item.name == 'Cameras') {
navigation.navigate('CCTVScreen');
}
}}
style={HomeScreenStyles.homeAccessIconBubble}>
<Image
style={HomeScreenStyles.homeAccessIcon}
source={item.image}
/>
</TouchableOpacity>
<Text
style={HomeScreenStyles.homeAccessText}
numberOfLines={2}
ellipsizeMode="tail">
{item.name}
</Text>
</View>
)}
/>
</View>
</View>
</ScrollView>
{isFlatModalVisible && (
<AddItemModal
isVisible={isFlatModalVisible}
onClose={handleFlatModalClose}
modalTitle="Change Unit"
fields={[]}
type="change_flat"
showBack={true}
flat_no={userDetails?.flat || 'N/A'}
project_name={'The Ornate'}>
<View style={HomeScreenStyles.modalDisplayContent}>
<View style={HomeScreenStyles.modalDisplayRow}>
<Text style={HomeScreenStyles.modalDisplayLabel}>
Current Flat:
</Text>
<Text style={HomeScreenStyles.modalDisplayText}>
{userDetails?.flat || 'N/A'}
</Text>
</View>
<View style={HomeScreenStyles.modalDisplayRow}>
<Text style={HomeScreenStyles.modalDisplayLabel}>Project:</Text>
<Text style={HomeScreenStyles.modalDisplayText}>
{userDetails?.projectName || 'N/A'}
</Text>
</View>
</View>
</AddItemModal>
)}
{isQrModalVisible && (
<AddItemModal
isVisible={isQrModalVisible}
onClose={handleQrModalClose}
fields={[]}
type="Qr_code"
flat_no={userDetails?.flat || 'N/A'}
project_name={'The Ornate'}
qrValue={encodedQR}
showBack={true}
name={userDetails?.name || 'N/A'}>
<View style={HomeScreenStyles.modalDisplayContent}></View>
</AddItemModal>
)}
{onBlock && (
<AddItemModal
isVisible={onBlock}
onClose={handleBlockClose}
modalTitle="Block Access"
fields={[]}
type="block_access"
showBack={true}>
<View style={HomeScreenStyles.modalDisplayContent}></View>
</AddItemModal>
)}
{onLockSecure && (
<AddItemModal
isVisible={onLockSecure}
onClose={handleLockSecureClose}
modalTitle="Lock Secure"
fields={[]}
type="lock_secure"
showBack={true}>
<View style={HomeScreenStyles.modalDisplayContent}></View>
</AddItemModal>
)}
{onChildSafe && (
<AddItemModal
isVisible={onChildSafe}
onClose={handleChildSafeClose}
modalTitle="Child Safe"
fields={[]}
type="child_safe"
showBack={true}>
<View style={HomeScreenStyles.modalDisplayContent}></View>
</AddItemModal>
)}
{vacation && (
<AddItemModal
isVisible={vacation}
onClose={handleVacationClose}
modalTitle="Vacation"
fields={[]}
type="vacation"
showBack={true}>
<View style={HomeScreenStyles.modalDisplayContent}></View>
</AddItemModal>
)}
{onNormal && (
<AddItemModal
isVisible={onNormal}
onClose={handleNormalClose}
modalTitle="Normal"
fields={[]}
type="normal"
showBack={true}>
<View style={HomeScreenStyles.modalDisplayContent}></View>
</AddItemModal>
)}
{lockPress && <ProgressView title={title} subtitle={'Please wait...'} />}
</SafeAreaView>
);
};
export default HomeScreen;
when type is lock secure i want to call onpress function on yes and no sendMessagehow to call sendMessage on yes and no