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, }) => { 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; item.outputs.forEach(outputItem => { 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}> {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: 50, paddingVertical: 10, paddingLeft: 30, }}> <View style={{ flexDirection: 'row', alignItems: 'center', gap: 20, }}> <Image source={AC} 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 == '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%', // height: 'auto', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 80, paddingVertical: 10, paddingLeft: 30, }}> <View style={{ flexDirection: 'row', alignItems: 'center', }}> <Image source={CURTAINS} style={{height: 40, width: 40}} /> </View> <View style={{ flexDirection: 'row', alignItems: 'center', gap: 20, }}> <View style={{ flexDirection: 'row', gap: 15, alignItems: 'center', paddingVertical: 10, }}> <TouchableOpacity onPress={() => { console.log(deviceItem); // operateACValue(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={() => { // operateACValue(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={STOP} style={{ width: 30, height: 30, tintColor: COLORS.black_color, }} /> </TouchableOpacity> <TouchableOpacity onPress={() => { // operateACAddValue(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; 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, }) => { 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; item.outputs.forEach(outputItem => { 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}> {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: 50, paddingVertical: 10, paddingLeft: 30, }}> <View style={{ flexDirection: 'row', alignItems: 'center', gap: 20, }}> <Image source={AC} 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 == '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%', // height: 'auto', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 80, paddingVertical: 10, paddingLeft: 30, }}> <View style={{ flexDirection: 'row', alignItems: 'center', }}> <Image source={CURTAINS} style={{height: 40, width: 40}} /> </View> <View style={{ flexDirection: 'row', alignItems: 'center', gap: 20, }}> <View style={{ flexDirection: 'row', gap: 15, alignItems: 'center', paddingVertical: 10, }}> <TouchableOpacity onPress={() => { console.log(deviceItem); // operateACValue(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={() => { // operateACValue(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={STOP} style={{ width: 30, height: 30, tintColor: COLORS.black_color, }} /> </TouchableOpacity> <TouchableOpacity onPress={() => { // operateACAddValue(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; import {StyleSheet, Platform} from 'react-native'; import {COLORS} from './colors'; import {align, border_radius} from './fontstyle'; import uiStyle from './uiStyle'; export default StyleSheet.create({ safeArea: {flex: 1, backgroundColor: COLORS.background_color}, centeredMessageContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, }, messageText: { marginTop: 10, fontSize: 16, color: '#666', textAlign: 'center', }, itemContainer: { marginBottom: 10, borderRadius: 8, overflow: 'hidden', backgroundColor: 'red', shadowColor: '#000', shadowOffset: {width: 0, height: 1}, shadowOpacity: 0.22, shadowRadius: 2.22, elevation: 3, }, header: { padding: 8, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', backgroundColor: COLORS.white_color, borderRadius: border_radius.mid, }, headerTextContainer: { flex: 1, }, headerText: { fontSize: 18, fontWeight: '600', color: COLORS.black_color, }, body: { padding: 15, borderTopWidth: 1, borderTopColor: '#e0e0e0', backgroundColor: COLORS.white_color, marginTop: 10, }, bodyText: { fontSize: 16, color: '#555', }, arrowContainer: { marginLeft: 10, }, arrowIcon: { fontSize: 20, color: '#212121', }, zoneListHorizontalLine: { width: '100%', height: 1, backgroundColor: uiStyle.line_seperator_color, opacity: uiStyle.line_opacity, marginVertical: 10, }, zoneItem_view_con: { flex: 1, width: '100%', display: 'flex', flexWrap: 'wrap', alignItems: 'flex-start', justifyContent: 'flex-start', paddingHorizontal: 10, }, zone_item_expand_list_view: { width: '30%', height: 110, marginVertical: '2%', marginRight: '3%', display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: COLORS.white_color, }, light_height_style: { height: 60, width: 60, borderRadius: border_radius.mid, justifyContent: 'center', alignItems: 'center', marginBottom: 6, borderWidth: 1, borderColor: COLORS.icon_border_color, elevation: Platform.OS === 'android' ? 5 : 1, shadowColor: '#000', shadowOffset: {width: 0, height: 1}, shadowOpacity: Platform.OS === 'android' ? 0.15 : 0.1, }, zone_icon_style: { width: 40, height: 40, }, zone_ac_list_view_style: { width: '98%', height: 'auto', marginHorizontal: '1%', marginVertical: '2%', borderRadius: 10, borderWidth: 1, borderColor: uiStyle.option_border_color, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', paddingVertical: 10, backgroundColor: COLORS.red_color, }, zone_ac_icon_view: { width: '25%', display: 'flex', justifyContent: 'center', alignItems: 'center', }, zone_ac_icon: { width: 45, height: 45, opacity: 0.4, tintColor: '#555', }, zone_vertical_line: { width: 1, height: '70%', opacity: uiStyle.line_opacity, }, fanRegulatorContainer: { width: '50%', height: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'center', }, regulatorBox: { width: 180, height: 180, borderRadius: 1000, borderColor: uiStyle.option_border_color, borderWidth: 1, shadowOffset: {width: 2, height: 2}, shadowRadius: 10, display: 'flex', justifyContent: 'center', alignItems: 'center', }, zone_ac_on_off_view: { display: 'flex', height: '80%', justifyContent: 'space-around', alignItems: 'center', }, zone_ac_decrement_view: { width: 35, height: 35, borderRadius: 100, backgroundColor: uiStyle.blue_color, display: 'flex', justifyContent: 'center', alignItems: 'center', }, zone_ac_decrement_icon: { width: '50%', height: '50%', }, zone_ac_power_icon_view: { display: 'flex', justifyContent: 'center', alignItems: 'center', }, zone_ac_power_child_View: { width: 50, height: 50, borderRadius: 100, backgroundColor: uiStyle.blue_color, display: 'flex', justifyContent: 'center', alignItems: 'center', }, zone_ac_power_icon: { width: '40%', height: '40%', }, zone_curtain_view: { width: '98%', height: 'auto', marginHorizontal: '1%', marginVertical: '2%', borderRadius: 10, borderWidth: 1, borderColor: uiStyle.option_border_color, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', paddingVertical: 10, backgroundColor: COLORS.white_color, }, zone_curtain_icon_view: { width: '25%', display: 'flex', justifyContent: 'center', alignItems: 'center', }, zone_curtain_icon: { width: 45, height: 45, opacity: 0.4, tintColor: '#555', }, zone_curtain_operate_view: { width: '60%', height: '100%', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', }, zone_curtain_open_view: { display: 'flex', justifyContent: 'center', alignItems: 'center', }, zone_curtain_open_icon_view: { width: 40, height: 40, borderRadius: 100, backgroundColor: uiStyle.blue_color, display: 'flex', justifyContent: 'center', alignItems: 'center', }, zone_curtaain_open_icon: { width: '50%', height: '50%', }, zone_item_text_style: { color: '#555', textAlign: align.center, marginTop: 5, width: 70, minHeight: 35, }, deviceView: { alignItems: 'center', justifyContent: 'center', height: 110, }, }); this is my stylesheet for ExpandableListItem when output_type_id==1 and output_sub_type_id==1 or 2 or 3 i want flex direction row else colounm make changes and provide update src folder

what changes has done?