Okay, I can help with that. The issue is how you're trying to render the `SceneSkeleton` component. You need to render it as a JSX element, not just reference the imported variable. import React, {useState, useEffect, useCallback} from 'react'; import { TouchableOpacity, Text, View, FlatList, Alert, ActivityIndicator, // Keep ActivityIndicator if used elsewhere, otherwise remove } from 'react-native'; import {useUser} from '../../context/UserContext'; import ApiManager from '../../services/ApiManager'; import SceneSceenStyle from '../../styles/SceneSceenStyle'; import {useMqtt} from '../../context/MqttContext'; import {useFocusEffect} from '@react-navigation/native'; import {COLORS} from '../../styles/colors'; import uiStyle from '../../styles/uiStyle'; import SceneSkeleton from '../../services/SceneSkeleton'; // Corrected path assuming services folder const SceneScreen = ({navigation}) => { const [items, setItems] = useState([]); const [isFetching, setIsFetching] = useState(false); const {userDetails} = useUser(); const {connectionState, subscribe, unsubscribe, publish} = useMqtt(); const [sceneStatuses, setSceneStatuses] = useState({}); // --- MQTT Topics --- const MQTT_SUBSCRIBE_TOPIC = 'advaint/cus_' + userDetails?.customer_id + '/scene/feedback'; // Added optional chaining const MQTT_PUBLISH_TOPIC = 'advaint/cus_' + userDetails?.customer_id + '/scene'; // Added optional chaining useEffect(() => { if (userDetails?.customer_id) { getSceneDetails(); } else { setItems([]); } }, [userDetails?.customer_id]); useFocusEffect( useCallback(() => { if (!userDetails?.customer_id) return; // Prevent subscription if no customer_id console.log( 'SceneScreen 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}`); try { const payload = JSON.parse(data); console.log('Parsed MQTT Payload:', payload); if (payload && payload.scene_id && payload.scene_status) { setSceneStatuses(prevStatuses => ({ ...prevStatuses, [payload.scene_id]: payload.scene_status, })); } } catch (e) { console.warn('MQTT message data is not JSON:', data); } }; subscribe(MQTT_SUBSCRIBE_TOPIC, callback); return () => { console.log( 'SceneScreen blurred, unsubscribing from MQTT topic:', MQTT_SUBSCRIBE_TOPIC, ); unsubscribe(MQTT_SUBSCRIBE_TOPIC, callback); }; }, [subscribe, unsubscribe, userDetails?.customer_id, MQTT_SUBSCRIBE_TOPIC]), // Added dependencies ); const getSceneDetails = async (isManualRefresh = false) => { if (!userDetails?.customer_id) { console.log('User details not available yet or missing customer_id.'); setIsFetching(false); // Ensure fetching state is reset setItems([]); // Clear items if no user return; } console.log(`Fetching list... Manual Refresh: ${isManualRefresh}`); // Set fetching to true *before* the API call // Only set to true if items are currently empty to show skeleton initially if (items.length === 0) { setIsFetching(true); } const customer_id = userDetails.customer_id; try { const listResponse = await ApiManager.getScene(customer_id); console.log('scene received listResponse:', listResponse); // Log the whole response // Initialize statuses from fetched data if (listResponse && Array.isArray(listResponse.Data)) { const initialStatuses = listResponse.Data.reduce((acc, scene) => { acc[scene.scene_id] = scene.scene_status; // Assuming status is part of the initial fetch return acc; }, {}); setSceneStatuses(prevStatuses => ({ ...prevStatuses, ...initialStatuses })); // Merge with existing statuses setItems(listResponse.Data); } 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 SceneScreen:', error); if (isManualRefresh) { Alert.alert( 'Fetch Failed', error.message || 'An unexpected error occurred while fetching items.', ); } setItems([]); // Clear items on error } finally { setIsFetching(false); // Set fetching to false after API call completes } }; const handleRefresh = () => { setIsFetching(true); // Explicitly set fetching true for pull-to-refresh getSceneDetails(true); }; const changeScene = item => { // Use the current status from state for toggling const currentStatus = sceneStatuses[item.scene_id] || item.scene_status; // Fallback to item's initial status const scenJson = { scene_id: item.scene_id, parameter: currentStatus === 'ON' ? 0 : 1, // Toggle based on current status mode: 'MOBILE', contact_id: userDetails.flat_contact_id, }; console.log('Publishing MQTT message:', scenJson); publish(MQTT_PUBLISH_TOPIC, scenJson); }; const renderItem = ({item}) => ( { changeScene(item); }}> {item.scene_name} ); const renderContent = () => { // Show skeleton only when fetching *and* there are no items yet if (isFetching && items.length === 0) { return ( // Render SceneSkeleton as a component ); } // Show message if not fetching and no items exist if (!isFetching && items.length === 0) { return ( No scene items found. {/* Optionally add a refresh button here */} ); } // Render the list if items exist (even if fetching is true for refresh) return ( item.scene_id.toString()} contentContainerStyle={SceneSceenStyle.listContentContainer} onRefresh={handleRefresh} // Pass the correct state for refreshing indicator refreshing={isFetching} /> ); }; return {renderContent()}; }; export default SceneScreen; import React from 'react'; import {View} from 'react-native'; import SkeletonPlaceholder from 'react-native-skeleton-placeholder'; import SceneSceenStyle from '../styles/SceneSceenStyle'; // Adjusted path assuming styles is one level up const SceneSkeleton = () => { // It's good practice to wrap the SkeletonPlaceholder items in a root element if needed // And potentially add some padding or margin to the container View return ( {/* You can customize the skeleton layout more */} {/* Add more placeholders if needed */} ); }; export default SceneSkeleton; // Assuming SceneSceenStyle.js exists and contains necessary styles // Make sure zoneListView has defined height and width for the skeleton to show import { StyleSheet } from 'react-native'; import { COLORS } from './colors'; // Assuming colors.js exists import uiStyle from './uiStyle'; // Assuming uiStyle.js exists export default StyleSheet.create({ safeArea: { flex: 1, backgroundColor: COLORS.background_color || '#f0f0f0', // Provide a default }, centeredMessageContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, }, messageText: { fontSize: 16, color: COLORS.text_color || '#333', // Provide a default textAlign: 'center', }, listContentContainer: { paddingVertical: 10, paddingHorizontal: 5, }, zoneListView: { // CRITICAL: Define height and width for SkeletonPlaceholder height: 60, // Example height width: '95%', // Example width (adjust as needed) marginVertical: 8, // Example margin marginHorizontal: '2.5%', padding: 15, backgroundColor: COLORS.white_color || '#fff', // Provide a default borderRadius: 8, justifyContent: 'center', alignItems: 'center', // Add shadow or elevation if needed shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.2, shadowRadius: 1.41, elevation: 2, }, itemTypeText: { fontSize: 16, fontWeight: 'bold', color: COLORS.text_primary || '#000', // Provide a default }, // Add other styles if needed blue_color: uiStyle.blue_color || 'blue', // Ensure blue_color is defined in uiStyle or provide default }); // Placeholder for uiStyle.js - Ensure it exports necessary styles like blue_color export default { blue_color: '#007bff', // Example blue color // Add other shared UI styles here }; // Placeholder for colors.js - Ensure it exports necessary color constants export const COLORS = { white_color: '#ffffff', background_color: '#f8f9fa', text_color: '#495057', text_primary: '#212529', // Add other colors used in your app }; Key changes made: 1. **SceneScreen.js:** * Changed `SceneSkeleton` to `` in `renderContent` to correctly render the component. * Adjusted the logic in `renderContent` to show the skeleton *only* when `isFetching` is true AND `items.length` is 0. This prevents the skeleton from flashing during pull-to-refresh when items already exist. * Set `isFetching` to `true` *before* the API call in `getSceneDetails` only if `items.length` is 0 initially. * Explicitly set `isFetching` to `true` at the start of `handleRefresh` for the pull-to-refresh indicator. * Used `scene_id.toString()` as the `keyExtractor` for the `FlatList`, assuming `scene_id` is unique. If you have a unique `item.id`, use that instead. * Updated MQTT topic strings to use optional chaining (`userDetails?.customer_id`) to prevent errors if `userDetails` is initially null. * Added `userDetails?.customer_id` and `MQTT_SUBSCRIBE_TOPIC` to the `useFocusEffect` dependency array. * Added optional chaining in `changeScene` for `userDetails`. * Initialized `sceneStatuses` with data fetched from the API in `getSceneDetails`. * Used the `sceneStatuses` state for dynamic styling and determining the toggle state in `changeScene`. 2. **SceneSkeleton.js:** * Wrapped the `SkeletonPlaceholder` children in a container `View` for better structure. * Added basic styling (`flex: 1, padding: 10`) to the container `View`. * Corrected the import path for `SceneSceenStyle` assuming it's one level up. Adjust if your structure is different. 3. **SceneSceenStyle.js:** (Added for completeness) * **Crucially**, ensured that `zoneListView` has a defined `height` and `width`. `SkeletonPlaceholder` needs dimensions to render correctly. Adjust these values to match your design. * Added default fallback colors in case `COLORS` or `uiStyle` properties are undefined during initial render. 4. **uiStyle.js & colors.js:** (Added placeholders) * Included placeholder files to ensure the styles can be resolved. Make sure these files exist in your project and export the necessary values. Now, when `SceneScreen` mounts or `getSceneDetails` is called while `items` is empty, `isFetching` will become true, and the `` component should render until the API call completes and `items` are populated or an error occurs.