import React, {useState, useEffect, useCallback} from 'react';
import {Text, View, Alert, ActivityIndicator} from 'react-native';
import DeviceScreenStyles from '../styles/DeviceScreenStyles';
import {useUser} from '../context/UserContext';
import ApiManager from '../services/ApiManager';
import ExpandableList from '../services/ExpandableList';
import {useMqtt} from '../context/MqttContext';
const DeviceItemScreen = ({route}) => {
const {output_type_id} = route.params;
const [items, setItems] = useState([]);
const [isFetching, setIsFetching] = useState(false);
const [expandedIndex, setExpandedIndex] = useState(0);
const {userDetails} = useUser();
let arrayDevices = [];
const {publish, subscribe, unsubscribe} = useMqtt();
console.log(userDetails);
const MQTT_SUBSCRIBE_TOPIC =
'advaint/cus_' +
userDetails.profileDetails.customer_id +
'/event/individual/feedback';
const MQTT_PUBLISH_TOPIC =
'advaint/cus_' + userDetails.profileDetails.customer_id + '/allonoff';
useEffect(() => {
if (userDetails?.profileDetails.customer_id) {
getDeviceOutputDetails();
} else {
setItems([]);
}
}, [userDetails?.profileDetails.customer_id]);
useEffect(() => {
const handleMqttMessage = (message, topic) => {
try {
const payload = JSON.parse(message);
console.log('payload feedback', payload);
if (payload && payload.event_id && payload.event_status) {
setItems(currentItems => {
return currentItems.map(item => {
const updatedOutputs = item.outputs.map(output => {
if (output.event_id === payload.event_id) {
return {
...output,
event_status: payload.event_status,
event_current_status: payload.event_current_status,
};
}
return output;
});
return {...item, outputs: updatedOutputs};
});
});
}
} catch (error) {
console.error('Failed to parse MQTT message:', error, message);
}
};
subscribe(MQTT_SUBSCRIBE_TOPIC, handleMqttMessage);
return () => {
unsubscribe(MQTT_SUBSCRIBE_TOPIC, handleMqttMessage);
};
}, [subscribe, unsubscribe, MQTT_SUBSCRIBE_TOPIC]);
const getDeviceOutputDetails = async (isManualRefresh = false) => {
if (!userDetails?.profileDetails.customer_id) {
console.log('User details not available yet or missing customer_id.');
setIsFetching(false);
return;
}
console.log(`Fetching list... Manual Refresh: ${isManualRefresh}`);
setIsFetching(true);
const customer_id = userDetails.profileDetails.customer_id;
try {
const listResponse = await ApiManager.getDeviceOutput(
customer_id,
output_type_id,
);
console.log('device received listResponse:', listResponse);
if (listResponse) {
arrayDevices = listResponse.Data;
setItems(arrayDevices);
getDeviceStatus(arrayDevices);
} else {
console.error(
'API did not return expected data structure:',
listResponse,
);
setItems([]);
if (isManualRefresh) {
Alert.alert(
'Error',
'Failed to fetch items. Invalid data format received.',
);
}
}
} catch (error) {
console.error('Fetch List Error in DeviceItemScreen:', error);
if (isManualRefresh) {
Alert.alert(
'Fetch Failed',
error.message || 'An unexpected error occurred while fetching items.',
);
}
setItems([]);
} finally {
setIsFetching(false);
}
};
function getDeviceStatus(arrayDevices) {
arrayDevices.forEach(element => {
element.outputs.forEach(light => {
if (
light.output_type_id == 1 &&
(light.output_sub_type_id == 2 || light.output_sub_type_id == 3)
) {
onDeviceEventDetails(light.event_id);
}
if (light.output_type_id == 3) {
onDeviceEventDetails(light.event_id);
}
});
});
}
const onDeviceEventDetails = async event_id => {
const customer_id = userDetails.profileDetails.customer_id;
try {
const listResponse = await ApiManager.getDeviceStatus(
customer_id,
event_id,
);
if (listResponse) {
console.log('current_status', listResponse);
const zoneArray = [];
arrayDevices.forEach(element => {
const device_Item_Array = [];
element.outputs.forEach(light => {
if (light.event_id == listResponse.Data.event_id) {
light.event_current_status =
listResponse.Data.event_current_status;
light.event_max = listResponse.Data.event_max;
light.event_min = listResponse.Data.event_min;
light.event_step = listResponse.Data.event_step;
}
device_Item_Array.push(light);
});
element.outputs = device_Item_Array;
zoneArray.push(element);
});
arrayDevices = zoneArray;
} else {
console.error(
'API did not return expected data structure:',
listResponse,
);
if (isManualRefresh) {
Alert.alert(
'Error',
'Failed to fetch items. Invalid data format received.',
);
}
}
} catch (error) {
console.error('Fetch List Error in DeviceItemScreen:', error);
if (isManualRefresh) {
Alert.alert(
'Fetch Failed',
error.message || 'An unexpected error occurred while fetching items.',
);
}
} finally {
setIsFetching(false);
}
};
const operateDeviceItems = useCallback(
async item => {
console.log(
'Operating item:',
item.output_type_id,
item.output_sub_type_id,
item.event_id,
);
if (item.output_type_id == '1') {
let device_parameter = '';
if (item.output_sub_type_id == '2') {
device_parameter = item.event_current_status;
} else if (item.output_sub_type_id == '3') {
device_parameter = item.event_current_status;
} else {
device_parameter = 1;
}
const deviceItemObj = {
event_id: item.event_id,
parameter: item.event_status === 'ON' ? 0 : device_parameter,
mode: 'MOBILE',
contact_id: userDetails?.profileDetails.flat_contact_id,
};
publish(MQTT_PUBLISH_TOPIC, JSON.stringify(deviceItemObj));
} else if (item.output_type_id == '3') {
console.log('ac switch press');
const ac_json = {
event_id: item.event_id,
parameter: item.event_status === 'ON' ? 0 : 24,
mode: 'MOBILE',
contact_id: userDetails?.profileDetails.flat_contact_id,
};
publish(MQTT_PUBLISH_TOPIC, JSON.stringify(ac_json));
}
},
[publish, MQTT_PUBLISH_TOPIC, userDetails?.profileDetails.customer_id],
);
const operateACAddValue = useCallback(
async item => {
console.log(
'operateACAddValue:',
item.event_id,
'Current:',
item.event_current_status,
'Step:',
item.event_step,
);
const deviceItemObj = {
event_id: item.event_id,
parameter: item.event_current_status + item.event_step,
mode: 'MOBILE',
contact_id: userDetails?.profileDetails.flat_contact_id,
};
publish(MQTT_PUBLISH_TOPIC, JSON.stringify(deviceItemObj));
},
[publish, MQTT_PUBLISH_TOPIC, userDetails?.profileDetails.customer_id],
);
const operateACValue = useCallback(
async item => {
console.log(
'operateACSubtractValue:',
item.event_id,
'Current:',
item.event_current_status,
'Step:',
item.event_step,
);
const deviceItemObj = {
event_id: item.event_id,
parameter: item.event_current_status - item.event_step,
mode: 'MOBILE',
contact_id: userDetails?.profileDetails.flat_contact_id,
};
publish(MQTT_PUBLISH_TOPIC, JSON.stringify(deviceItemObj));
},
[publish, MQTT_PUBLISH_TOPIC, userDetails?.profileDetails.customer_id],
);
const openCurtain = useCallback(
// Renamed from operateACValue to operateACSubtractValue for clarity
async item => {
console.log(
'open curtains:',
item.event_id,
'Current:',
item.event_current_status,
'Step:',
item.event_step,
);
const deviceItemObj = {
event_id: item.event_id,
parameter: 1,
mode: 'MOBILE',
contact_id: userDetails?.profileDetails.flat_contact_id,
};
publish(MQTT_PUBLISH_TOPIC, JSON.stringify(deviceItemObj));
},
[publish, MQTT_PUBLISH_TOPIC, userDetails?.profileDetails.customer_id],
);
const closeCurtain = useCallback(
// Renamed from operateACValue to operateACSubtractValue for clarity
async item => {
console.log(
'close curtains:',
item.event_id,
'Current:',
item.event_current_status,
'Step:',
item.event_step,
);
const deviceItemObj = {
event_id: item.event_id,
parameter: 0,
mode: 'MOBILE',
contact_id: userDetails?.profileDetails.flat_contact_id,
};
publish(MQTT_PUBLISH_TOPIC, JSON.stringify(deviceItemObj));
},
[publish, MQTT_PUBLISH_TOPIC, userDetails?.profileDetails.customer_id],
);
const stopCurtain = useCallback(
// Renamed from operateACValue to operateACSubtractValue for clarity
async item => {
console.log('stop curtains:', item);
const deviceItemObj = {
event_id: item.event_id,
parameter: 'STOP',
mode: 'MOBILE',
contact_id: userDetails?.profileDetails.flat_contact_id,
};
console.log(deviceItemObj);
publish(MQTT_PUBLISH_TOPIC, JSON.stringify(deviceItemObj));
},
[publish, MQTT_PUBLISH_TOPIC, userDetails?.profileDetails.customer_id],
);
const renderContent = () => {
if (isFetching && items.length === 0) {
return (
<View style={DeviceScreenStyles.centeredMessageContainer}>
<ActivityIndicator size="large" color="#007bff" />
<Text style={DeviceScreenStyles.messageText}>Loading items...</Text>
</View>
);
}
if (!isFetching && items.length === 0) {
return (
<View style={DeviceScreenStyles.centeredMessageContainer}>
<Text style={DeviceScreenStyles.messageText}>No items found.</Text>
</View>
);
}
return (
<ExpandableList
data={items}
expandedIndex={expandedIndex}
setExpandedIndex={setExpandedIndex}
operateDeviceItems={operateDeviceItems}
operateACAddValue={operateACAddValue}
operateACValue={operateACValue}
openCurtain={openCurtain}
closeCurtain={closeCurtain}
stopCurtain={stopCurtain}
/>
);
};
return <View style={DeviceScreenStyles.safeArea}>{renderContent()}</View>;
};
export default DeviceItemScreen;
import React, {useState, useEffect} from 'react';
import {FlatList, StyleSheet} from 'react-native';
import ExpandableListItem from './ExpandableListItem';
const ExpandableList = ({
data,
operateDeviceItems,
operateACAddValue,
operateACValue,
openCurtain,
closeCurtain,
stopCurtain,
}) => {
const [expandedIndex, setExpandedIndex] = useState(0);
useEffect(() => {
setExpandedIndex(0);
}, []);
const handlePress = index => {
setExpandedIndex(prevIndex => (prevIndex === index ? -1 : index));
};
return (
<FlatList
data={data}
keyExtractor={(item, index) => String(index)}
renderItem={({item, index}) => (
<ExpandableListItem
item={item}
index={index}
expandedIndex={expandedIndex}
onPress={handlePress}
deviceStatus={item.outputs}
outputType={item.output_type_id}
operateDeviceItems={operateDeviceItems}
operateACAddValue={operateACAddValue}
operateACValue={operateACValue}
openCurtain={openCurtain}
closeCurtain={closeCurtain}
stopCurtain={stopCurtain}
/>
)}
contentContainerStyle={styles.listContent}
/>
);
};
const styles = StyleSheet.create({
listContent: {
padding: 16,
},
});
export default ExpandableList;
import React, {useRef, useEffect} from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
LayoutAnimation,
Platform,
UIManager,
Animated,
Image,
} from 'react-native';
import {
BULB,
DOWNARROW,
AC,
CURTAINS,
BULBON,
PLUS,
MINUS,
SWITCH,
FAN,
OPEN,
CLOSE,
STOP,
} from '../assets';
import uiStyle from '../styles/uiStyle';
import {align, border_radius, fontSize, fontWeight} from '../styles/fontstyle';
import {COLORS} from '../styles/colors';
import DeviceItemsScreenStyle from '../styles/DeviceItemsScreenStyle';
if (
Platform.OS === 'android' &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
const ExpandableListItem = ({
item,
index,
expandedIndex,
onPress,
deviceStatus,
outputType,
operateDeviceItems,
operateACAddValue, // Accept new prop
operateACValue,
openCurtain,
closeCurtain,
stopCurtain,
}) => {
const animationController = useRef(new Animated.Value(0)).current;
const isExpanded = index === expandedIndex;
let isPressed = '';
useEffect(() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
Animated.spring(animationController, {
toValue: isExpanded ? 1 : 0,
duration: 300,
useNativeDriver: false,
}).start();
}, [isExpanded, animationController]);
const interpolatedValue = animationController.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
});
const arrowRotation = animationController.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '180deg'],
});
const animatedBodyStyle = {
transform: [{scaleY: interpolatedValue}],
opacity: interpolatedValue,
};
const animatedArrowStyle = {
transform: [{rotate: arrowRotation}],
};
let onCount = 0;
let output_type = '';
item.outputs.forEach(outputItem => {
output_type = outputItem.output_type_id;
if (outputItem.event_status === 'ON') {
onCount++;
}
});
return (
<View
style={{
marginBottom: 10,
borderRadius: border_radius.small,
borderWidth: 1,
paddingVertical: 10,
backgroundColor: COLORS.white_color,
borderColor: COLORS.section_border_color,
}}>
<TouchableOpacity
onPress={() => onPress(index)}
style={{borderRadius: 6}}
activeOpacity={0.7}>
<View style={DeviceItemsScreenStyle.header}>
<View style={DeviceItemsScreenStyle.headerTextContainer}>
<Text style={DeviceItemsScreenStyle.headerText}>
{item.zone_name}
</Text>
</View>
<View
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: 20,
}}>
{onCount > 0 && (
<View
style={{
width: 'auto',
height: 'auto',
borderRadius: 100,
backgroundColor: uiStyle.red_color,
display: 'flex',
justifyContent: 'center',
alignItems: 'flex-end',
paddingHorizontal: 8,
paddingVertical: 2,
}}>
<Text
style={{
color: '#fff',
}}
align="center">
{onCount}
</Text>
</View>
)}
<Animated.View
style={[
DeviceItemsScreenStyle.arrowContainer,
animatedArrowStyle,
]}>
<Image
style={{
width: 20,
height: 20,
}}
source={DOWNARROW}
/>
</Animated.View>
</View>
</View>
</TouchableOpacity>
{isExpanded && (
<Animated.View style={[DeviceItemsScreenStyle.body, animatedBodyStyle]}>
<View
style={[
DeviceItemsScreenStyle.zoneListHorizontalLine,
{marginTop: 0, height: outputType == '2' && 'auto'},
]}
/>
<View
style={[
// DeviceItemsScreenStyle.zoneItem_view_con,
{
flexDirection: output_type == '1' ? 'row' : 'column',
flex: 1,
width: '100%',
display: 'flex',
flexWrap: 'wrap',
alignItems: 'flex-start',
justifyContent: 'flex-start',
paddingHorizontal: 10,
},
]}>
{deviceStatus &&
deviceStatus.length > 0 &&
deviceStatus.map((deviceItem, deviceIndex) => {
return (
<View
style={[DeviceItemsScreenStyle.zone_item_expand_list_view]}>
{deviceItem.output_type_id == '1' &&
deviceItem.output_sub_type_id == '1' && (
<View style={DeviceItemsScreenStyle.deviceView}>
<TouchableOpacity
key={deviceIndex}
onPressIn={() => {
isPressed = true;
}}
onPressOut={() => {
isPressed = false;
}}
activeOpacity={0.5}
onPress={() => {
console.log(deviceItem);
if (deviceItem.output_type_id == '1') {
operateDeviceItems(deviceItem);
}
console.log(
'Device Item Pressed:',
deviceItem.output_name,
);
}}
style={[
DeviceItemsScreenStyle.light_height_style,
{
alignItems: 'center',
backgroundColor:
deviceItem.event_status == 'OFF'
? COLORS.icon_backkground_color
: uiStyle.blue_color,
},
]}>
<Image
style={DeviceItemsScreenStyle.zone_icon_style}
source={
deviceItem.event_status == 'OFF' ? BULB : BULBON
}
/>
</TouchableOpacity>
<Text
style={DeviceItemsScreenStyle.zone_item_text_style}
numberOfLines={2}>
{deviceItem.output_name}
</Text>
</View>
)}
{deviceItem.output_type_id == '1' &&
deviceItem.output_sub_type_id == '2' && (
<View style={DeviceItemsScreenStyle.deviceView}>
<TouchableOpacity
key={deviceIndex}
activeOpacity={0.5}
onPress={() => {
console.log(deviceItem);
if (deviceItem.output_type_id == '1') {
operateDeviceItems(deviceItem);
}
console.log(
'Device Item Pressed:',
deviceItem.output_name,
);
}}
style={[
DeviceItemsScreenStyle.light_height_style,
{
alignItems: 'center',
backgroundColor:
deviceItem.event_status == 'OFF'
? COLORS.icon_backkground_color
: uiStyle.blue_color,
},
]}>
<Image
style={DeviceItemsScreenStyle.zone_icon_style}
source={
deviceItem.event_status == 'OFF' ? BULB : BULBON
}
/>
</TouchableOpacity>
<Text
style={DeviceItemsScreenStyle.zone_item_text_style}
numberOfLines={2}>
{deviceItem.output_name}
</Text>
</View>
)}
{deviceItem.output_type_id == '1' &&
deviceItem.output_sub_type_id == '3' && (
<View style={DeviceItemsScreenStyle.deviceView}>
<TouchableOpacity
key={deviceIndex}
activeOpacity={0.5}
onPress={() => {
console.log(deviceItem);
if (deviceItem.output_type_id == '1') {
operateDeviceItems(deviceItem);
}
console.log(
'Device Item Pressed:',
deviceItem.output_name,
);
}}
style={[
DeviceItemsScreenStyle.light_height_style,
{
alignItems: 'center',
backgroundColor:
deviceItem.event_status == 'OFF'
? COLORS.icon_backkground_color
: uiStyle.blue_color,
},
]}>
<Image
style={DeviceItemsScreenStyle.zone_icon_style}
source={
deviceItem.event_status == 'OFF' ? BULB : BULBON
}
/>
</TouchableOpacity>
<Text
style={DeviceItemsScreenStyle.zone_item_text_style}
numberOfLines={2}>
{deviceItem.output_name}
</Text>
</View>
)}
{deviceItem.output_type_id == '2' && (
<View
style={{
width: '100%',
height: 'auto',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: 50,
paddingVertical: 10,
paddingLeft: 30,
}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
gap: 20,
}}>
<Image source={FAN} style={{height: 40, width: 40}} />
<TouchableOpacity
style={{
backgroundColor:
deviceItem.event_status == 'ON'
? uiStyle.blue_color
: COLORS.icon_backkground_color,
padding: 5,
borderRadius: border_radius.small,
}}
onPress={() => {
console.log('ac_item', deviceItem);
operateDeviceItems(deviceItem);
}}>
<Image
source={SWITCH}
style={{
height: 40,
width: 40,
tintColor:
deviceItem.event_status == 'ON'
? COLORS.white_color
: COLORS.black_color,
}}
/>
</TouchableOpacity>
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
gap: 20,
}}>
<View
style={{
flexDirection: 'row',
gap: 15,
alignItems: 'center',
paddingVertical: 10,
}}>
<TouchableOpacity
onPress={() => {
operateACValue(deviceItem);
}}
style={{
backgroundColor: COLORS.icon_backkground_color,
height: 40,
width: 40,
justifyContent: 'center',
padding: 15,
borderRadius: border_radius.small,
alignItems: 'center',
elevation: Platform.OS === 'android' ? 5 : 1,
shadowColor: '#000',
shadowOffset: {width: 0, height: 1},
shadowOpacity:
Platform.OS === 'android' ? 0.15 : 0.1,
}}>
<Image
source={MINUS}
style={{
width: 15,
height: 2,
tintColor: COLORS.black_color,
}}
/>
</TouchableOpacity>
<Text
style={{
fontSize: fontSize.label,
fontWeight: fontWeight.label_weight,
color: COLORS.label_color,
}}>
1
</Text>
<TouchableOpacity
onPress={() => operateACAddValue(deviceItem)}
style={{
backgroundColor: COLORS.icon_backkground_color,
height: 40,
width: 40,
justifyContent: 'center',
padding: 15,
borderRadius: border_radius.small,
alignItems: 'center',
elevation: Platform.OS === 'android' ? 5 : 1,
shadowColor: '#000',
shadowOffset: {width: 0, height: 1},
shadowOpacity:
Platform.OS === 'android' ? 0.15 : 0.1,
}}>
<Image
source={PLUS}
style={{
width: 15,
height: 15,
tintColor: COLORS.black_color,
}}
/>
</TouchableOpacity>
</View>
</View>
</View>
)}
{deviceItem.output_type_id == '3' && (
<View
style={{
width: '100%',
height: 'auto',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: 40,
paddingVertical: 10,
paddingLeft: 10,
}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
gap: 25,
}}>
<View
style={{
alignItems: 'center',
// marginTop: 30,
}}>
<Image
source={AC}
style={{height: 40, width: 40}}
/>
<Text
style={{textAlign: align.center, marginTop: 10}}>
{deviceItem.output_name}
</Text>
</View>
<TouchableOpacity
style={{
backgroundColor:
deviceItem.event_status == 'ON'
? uiStyle.blue_color
: COLORS.icon_backkground_color,
padding: 5,
borderRadius: border_radius.small,
marginBottom: 30,
}}
onPress={() => {
console.log('ac_item', deviceItem);
operateDeviceItems(deviceItem);
}}>
<Image
source={SWITCH}
style={{
height: 40,
width: 40,
tintColor:
deviceItem.event_status == 'ON'
? COLORS.white_color
: COLORS.black_color,
}}
/>
</TouchableOpacity>
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
gap: 20,
marginBottom: 30,
}}>
<View
style={{
flexDirection: 'row',
gap: 15,
alignItems: 'center',
paddingVertical: 10,
}}>
<TouchableOpacity
onPress={() => {
// operateACValue(deviceItem);
console.log(deviceItem);
}}
style={{
backgroundColor: COLORS.icon_backkground_color,
height: 40,
width: 40,
justifyContent: 'center',
padding: 15,
borderRadius: border_radius.small,
alignItems: 'center',
elevation: Platform.OS === 'android' ? 5 : 1,
shadowColor: '#000',
shadowOffset: {width: 0, height: 1},
shadowOpacity:
Platform.OS === 'android' ? 0.15 : 0.1,
}}>
<Image
source={MINUS}
style={{
width: 15,
height: 2,
tintColor: COLORS.black_color,
}}
/>
</TouchableOpacity>
<Text
style={{
fontSize: fontSize.label,
fontWeight: fontWeight.label_weight,
color: COLORS.label_color,
}}>
{deviceItem.event_status == 'ON'
?deviceItem.event_current_status
: 'OFF'}
</Text>
<TouchableOpacity
onPress={() => operateACAddValue(deviceItem)}
style={{
backgroundColor: COLORS.icon_backkground_color,
height: 40,
width: 40,
justifyContent: 'center',
padding: 15,
borderRadius: border_radius.small,
alignItems: 'center',
elevation: Platform.OS === 'android' ? 5 : 1,
shadowColor: '#000',
shadowOffset: {width: 0, height: 1},
shadowOpacity:
Platform.OS === 'android' ? 0.15 : 0.1,
}}>
<Image
source={PLUS}
style={{
width: 15,
height: 15,
tintColor: COLORS.black_color,
}}
/>
</TouchableOpacity>
</View>
</View>
</View>
)}
{deviceItem.output_type_id == '4' && (
<View
style={[
DeviceItemsScreenStyle.light_height_style,
{alignItems: 'center'},
]}>
<Image
style={DeviceItemsScreenStyle.zone_icon_style}
source={
deviceItem.event_status == 'OFF' ? BULB : BULB
}
/>
<Text
align="center"
style={[
DeviceItemsScreenStyle.zone_item_text_style,
{marginTop: 5},
]}
size={uiStyle.flatlist_subtitle_size}>
{deviceItem.output_name}
</Text>
</View>
)}
{deviceItem.output_type_id == '5' && (
<View
style={[
DeviceItemsScreenStyle.light_height_style,
{alignItems: 'center'},
]}>
<Image
style={DeviceItemsScreenStyle.zone_icon_style}
source={
deviceItem.event_status == 'OFF' ? BULB : BULB
}
/>
<Text
align="center"
style={[
DeviceItemsScreenStyle.zone_item_text_style,
{marginTop: 5},
]}
size={uiStyle.flatlist_subtitle_size}>
{deviceItem.output_name}
</Text>
</View>
)}
{deviceItem.output_type_id == '6' && (
<View
style={{
width: '100%',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
gap: 80,
paddingLeft: 10,
}}>
<View
style={{
alignItems: 'center',
marginTop: 30,
}}>
<Image
source={CURTAINS}
style={{height: 40, width: 40}}
/>
<Text
style={{textAlign: align.center, marginTop: 10}}>
{deviceItem.output_name}
</Text>
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
gap: 20,
}}>
<View
style={{
flexDirection: 'row',
gap: 15,
alignItems: 'center',
paddingVertical: 10,
}}>
<TouchableOpacity
onPress={() => {
openCurtain(deviceItem);
console.log(deviceItem);
}}
style={{
backgroundColor: COLORS.icon_backkground_color,
height: 45,
width: 45,
justifyContent: 'center',
padding: 15,
borderRadius: border_radius.small,
alignItems: 'center',
elevation: Platform.OS === 'android' ? 5 : 1,
shadowColor: '#000',
shadowOffset: {width: 0, height: 1},
shadowOpacity:
Platform.OS === 'android' ? 0.15 : 0.1,
}}>
<Image
source={OPEN}
style={{
width: 35,
height: 30,
tintColor: COLORS.black_color,
}}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
stopCurtain(deviceItem);
}}
style={{
backgroundColor: COLORS.icon_backkground_color,
height: 45,
width: 45,
justifyContent: 'center',
padding: 15,
borderRadius: border_radius.small,
alignItems: 'center',
elevation: Platform.OS === 'android' ? 5 : 1,
shadowColor: '#000',
shadowOffset: {width: 0, height: 1},
shadowOpacity:
Platform.OS === 'android' ? 0.15 : 0.1,
}}>
<Image
source={STOP}
style={{
width: 30,
height: 30,
tintColor: COLORS.black_color,
}}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
closeCurtain(deviceItem);
console.log(deviceItem);
}}
style={{
backgroundColor: COLORS.icon_backkground_color,
height: 45,
width: 45,
justifyContent: 'center',
padding: 15,
borderRadius: border_radius.small,
alignItems: 'center',
elevation: Platform.OS === 'android' ? 5 : 1,
shadowColor: '#000',
shadowOffset: {width: 0, height: 1},
shadowOpacity:
Platform.OS === 'android' ? 0.15 : 0.1,
}}>
<Image
source={CLOSE}
style={{
width: 35,
height: 30,
tintColor: COLORS.black_color,
}}
/>
</TouchableOpacity>
</View>
</View>
</View>
)}
</View>
);
})}
</View>
</Animated.View>
)}
</View>
);
};
export default ExpandableListItem;
event_current_status value is not fetched in 1st go when i redresh devie item screen then its getting fetched want to fetch in 1st go