import React, {useContext, useEffect, useState} from "react";
import {ScrollView, Text, View} from "react-native";

import {useNavigationState} from "@react-navigation/native";
import {StackScreenProps} from "@react-navigation/stack";

import Alert from "@components/alert";
import Background from "@components/background";
// import DaikinLiteWifiAlert from "@components/daikinLiteWifiStateAlert";
import Icon from "@components/icon";
import Label from "@components/label";
import Button from "@components/primaryButton";

import {DEFAULT_INITIAL_ALERT_STATUS} from "@config/constants/AppConstants";
import {HomeNavigatorParamList} from "@config/constants/NavConstants";
import {ALTHERMA_SSID} from "@config/constants/ThermostatConstants";
import {MINI_SPLIT_CONNECT_TIMEOUT} from "@config/constants/TimeoutConstants";
import {translationKeys} from "@config/constants/TranslationConstants";
import Images from "@config/Images";
import {getLocalizationContext} from "@config/Translations";
import {iAlertState} from "@config/types/CommonTypes";

import {althermaService} from "@services/api/altherma";
import {useAppDispatch} from "@store/Hooks";
import {
	hideLoader as hideFanLoader,
	showLoader as showFanLoader,
} from "@store/loader/LoaderSlice";

// import Page from "@styles/Page";
import {useThemeAwareObject} from "@styles/theming/ThemingHelper";
import {isConnectedToSSIDPrefix, timeout} from "@utils/WifiManagerUtils";

import {iWLANSettings} from "config/types/AppDataTypes/AlthermaTypes";

import Styles from "./Styles";

type Props = StackScreenProps<HomeNavigatorParamList, "AlthermaAPIsTestScreen">;

const AlthermaAPIsTestScreen = ({navigation}: Props) => {
	const {translate} = useContext(getLocalizationContext());
	const styles = useThemeAwareObject(Styles.createStyles);

	const dispatch = useAppDispatch();
	const routes = useNavigationState((state) => {
		return state.routes;
	});

	const [alertStatus, setAlertStatus] = useState<iAlertState>(
		DEFAULT_INITIAL_ALERT_STATUS,
	);

	const [apiResponse, setApiResponse] = useState<string>("");

	const closeButton = () => {
		return (
			<Icon
				Image={Images.svgIcons.crossButton}
				color={styles.crossIcon.color}
				onPress={async () => {
					await reboot();
				}}
			/>
		);
	};

	useEffect(() => {
		navigation.setOptions({
			headerLeft: (): JSX.Element => {
				return closeButton();
			},
		});
	}, []);

	const showLoader = (loading: boolean) => {
		if (loading) {
			dispatch(showFanLoader());
		} else {
			dispatch(hideFanLoader({className: "AlthermaAPIsTestScreen"}));
		}
	};

	// Handler for Scan API
	const runScanApi = async () => {
		showLoader(true);
		console.log("@@@@@ callingggggg");
		try {
			console.log("@@@@@ I am callingggggg from inside 11111");
			const result = await althermaService.scanWifiNetworks();
			console.log("@@@@@ I am callingggggg from inside 2222");
			console.log(
				"@@@@@@@@@@@",
				result.data,
				"@@@@@",
				result.error,
				"@@@@@",
				result.status,
			);
			if ("error" in result && result.error) {
				setApiResponse(`Error: ${JSON.stringify(result.error)}`);
			} else {
				setApiResponse(`Success: ${JSON.stringify(result.data)}`);
			}
		} catch (error: any) {
			setApiResponse(`Exception: ${error.message}`);
		} finally {
			showLoader(false);
		}
	};

	// Handler for Networks API
	const runNetworksApi = async () => {
		showLoader(true);
		try {
			const result = await althermaService.getAvailableNetworks();
			console.log(
				"@@@@@@@@@@@",
				result.data,
				"@@@@@",
				result.error,
				"@@@@@",
				result.status,
			);
			if ("error" in result && result.error) {
				setApiResponse(`Error: ${JSON.stringify(result.error)}`);
			} else {
				setApiResponse(`Success: ${JSON.stringify(result.data)}`);
			}
		} catch (error: any) {
			setApiResponse(`Exception: ${error.message}`);
		} finally {
			showLoader(false);
		}
	};

	// Handler for Settings API
	const runSettingsApi = async () => {
		showLoader(true);
		try {
			// Define your settings here. Replace with actual settings as needed.
			const settings: iWLANSettings = {
				// Example settings
				ssid: "Hathway_Ashish2.4G",
				security: "WPA_WPA2_MIXED",
				key: "8296494290",
			};
			const result = await althermaService.configureWifiConnection(settings);
			if ("error" in result && result.error) {
				setApiResponse(`Error: ${JSON.stringify(result.error)}`);
			} else {
				setApiResponse(`Success: ${JSON.stringify(result.data)}`);
			}
		} catch (error: any) {
			setApiResponse(`Exception: ${error.message}`);
		} finally {
			showLoader(false);
		}
	};

	// Handler for Info API
	const runInfoApi = async () => {
		showLoader(true);
		try {
			const result = await althermaService.getWlanInfo();
			console.log(
				"@@@@@@@@@@@",
				result.data,
				"@@@@@",
				result.error,
				"@@@@@",
				result.status,
			);
			if ("error" in result && result.error) {
				setApiResponse(`Error: ${JSON.stringify(result.error)}`);
			} else {
				setApiResponse(`Success: ${JSON.stringify(result.data)}`);
			}
		} catch (error: any) {
			setApiResponse(`Exception: ${error.message}`);
		} finally {
			showLoader(false);
		}
	};

	const navigateBack = () => {
		showLoader(false);
		const filteredRoutes = routes.filter((item) => {
			return item.name === "ConfigureThermostatScreen";
		});
		if (filteredRoutes.length > 0) {
			navigation.pop(1);
		}
		navigation.goBack();
	};

	const reboot = async () => {
		showLoader(true);
		/**
		 * Check if still connected to thermostat hotspot
		 * If yes call reboot api, we won't check for status because irrespective of the result we need to take user back
		 * If not then just navigate back
		 */
		const isConnectedToMiniSplitSSID =
			await isConnectedToSSIDPrefix(ALTHERMA_SSID);
		if (isConnectedToMiniSplitSSID.isConnected) {
			// await rebootAdapter();
			await timeout(MINI_SPLIT_CONNECT_TIMEOUT);
			navigateBack();
		} else {
			navigateBack();
		}
	};

	const onDismissAlert = () => {
		// setIsFetchingWifiList(false);
		setAlertStatus({
			isVisible: false,
			buttonAlignment: alertStatus.buttonAlignment,
			title: alertStatus.title,
			message: alertStatus.message,
			positiveBtnLabel: alertStatus.positiveBtnLabel,
			negativeBtnLabel: alertStatus.negativeBtnLabel,
			onPress: null,
			onCancel: null,
		});
	};

	return (
		<Background style={styles.root}>
			<View style={styles.container}>
				{/* <DaikinLiteWifiAlert
					ssidPrefix={ALTHERMA_SSID}
					navigation={navigation}
				/> */}
				<Alert
					visible={alertStatus.isVisible}
					title={alertStatus.title}
					buttonAlignment={alertStatus.buttonAlignment}
					description={alertStatus.message}
					positiveButtonTitle={
						alertStatus.positiveBtnLabel ||
						translate(translationKeys.alert.okayButtonLabel)
					}
					negativeButtonTitle={alertStatus.negativeBtnLabel}
					alternateButtonTitle={alertStatus.alternativeBtnLabel}
					onPress={alertStatus.onPress || onDismissAlert}
					onCancel={alertStatus.onCancel || onDismissAlert}
					onPressAlternate={alertStatus.onPressAlternate || onDismissAlert}
				/>
				<Label
					text="Click on the buttons below to check the Altherma APIs"
					style={styles.description}
				/>

				<Button
					title="Run Scan API"
					style={[styles.scanButton]}
					onPress={runScanApi}
				/>
				<Button
					title="Run Networks API"
					style={[styles.scanButton]}
					onPress={runNetworksApi}
				/>
				<Button
					title="Run Settings API"
					style={[styles.scanButton]}
					onPress={runSettingsApi}
				/>
				<Button
					title="Run Info API"
					style={[styles.scanButton]}
					onPress={runInfoApi}
				/>
				<View style={styles.responseWrapper}>
					<ScrollView
						style={styles.responseContainer}
						contentContainerStyle={{flexGrow: 1}}
					>
						<Text style={styles.responseText}>
							{apiResponse || "API response will appear here"}
						</Text>
					</ScrollView>
				</View>
			</View>
		</Background>
	);
};

export default AlthermaAPIsTestScreen; this is my code and issue solution is this 0

I GOT IT, thanks to this issue! Apparently the app needs to be completely up and running before making any API calls, which resulted in something like this in App.js

import {AppState} from 'react-native';

const App = () => {
  return (
    {AppState.currentState === 'active' && <Navigation />}
  );
};
Hope this helps anyone who comes across a similar problem! how to incorportae this in my code