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 ( onPress(index)} style={{borderRadius: 6}} activeOpacity={0.7}> {item.zone_name} {onCount > 0 && ( {onCount} )} {isExpanded && ( {deviceStatus && deviceStatus.length > 0 && deviceStatus.map((deviceItem, deviceIndex) => { return ( {deviceItem.output_type_id == '1' && deviceItem.output_sub_type_id == '1' && ( { 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, }, ]}> {deviceItem.output_name} )} {deviceItem.output_type_id == '1' && deviceItem.output_sub_type_id == '2' && ( { 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, }, ]}> {deviceItem.output_name} )} {deviceItem.output_type_id == '1' && deviceItem.output_sub_type_id == '3' && ( { 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, }, ]}> {deviceItem.output_name} )} {deviceItem.output_type_id == '2' && ( { console.log('ac_item', deviceItem); operateDeviceItems(deviceItem); }}> { 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, }}> 1 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, }}> )} {deviceItem.output_type_id == '3' && ( { console.log('ac_item', deviceItem); operateDeviceItems(deviceItem); }}> { 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, }}> 1 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, }}> )} {deviceItem.output_type_id == '4' && ( {deviceItem.output_name} )} {deviceItem.output_type_id == '5' && ( {deviceItem.output_name} )} {deviceItem.output_type_id == '6' && ( { 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, }}> { // 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, }}> { // 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, }}> )} ); })} )} ); }; 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 ( onPress(index)} style={{borderRadius: 6}} activeOpacity={0.7}> {item.zone_name} {onCount > 0 && ( {onCount} )} {isExpanded && ( {deviceStatus && deviceStatus.length > 0 && deviceStatus.map((deviceItem, deviceIndex) => { return ( {deviceItem.output_type_id == '1' && deviceItem.output_sub_type_id == '1' && ( { 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, }, ]}> {deviceItem.output_name} )} {deviceItem.output_type_id == '1' && deviceItem.output_sub_type_id == '2' && ( { 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, }, ]}> {deviceItem.output_name} )} {deviceItem.output_type_id == '1' && deviceItem.output_sub_type_id == '3' && ( { 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, }, ]}> {deviceItem.output_name} )} {deviceItem.output_type_id == '2' && ( { console.log('ac_item', deviceItem); operateDeviceItems(deviceItem); }}> { 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, }}> 1 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, }}> )} {deviceItem.output_type_id == '3' && ( { console.log('ac_item', deviceItem); operateDeviceItems(deviceItem); }}> { 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, }}> 1 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, }}> )} {deviceItem.output_type_id == '4' && ( {deviceItem.output_name} )} {deviceItem.output_type_id == '5' && ( {deviceItem.output_name} )} {deviceItem.output_type_id == '6' && ( { 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, }}> { // 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, }}> { // 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, }}> )} ); })} )} ); }; 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