i builds Mobile apps for android and Ios using React_native

import { View, Text, ScrollView, KeyboardAvoidingView, Platform, Image, TextInput, Modal, FlatList, SafeAreaView, TouchableOpacity, ActivityIndicator } from 'react-native'

import React, { useEffect, useState } from 'react'

import styles from './style'

import { Icon } from '../../Theme/Icons'

import Colors from '../../Theme/Colors'

import { useFocusEffect, useNavigation } from '@react-navigation/native'

import CustomHeader from '../../Components/CustomHeader'

import Reuse_Button from '../../Components/Reuse_Button'

import StarRating from 'react-native-star-rating';

import { AvoidSoftInput, AvoidSoftInputView } from "react-native-avoid-softinput";



const SearchLocationScreen: React.FC = () => {

  const navigation = useNavigation()

  const [starCount, setStarCount] = useState(0);

  const [check, setcheck] = useState(false)

  // Cites list apis 

  const [cityName, setCityName] = useState('');

  const [province, setProvince] = useState('');

  const [region, setRegion] = useState('');

  const [country, setCountry] = useState('');

  const [locationkey, setLocationkey] = useState()

  // here is weather apis of selected region 

  const [weatherData, setWeatherData] = useState(null);

  const [loading, setLoading] = useState(true);

  const [condition, setCondition] = useState('')



  const fetchWeather = async () => {

    try {

      const locationKey = locationkey; // Replace 'YOUR_LOCATION_KEY' with your actual location key

      const apiKey = '7NYLCQQfvSRw7nDEAj4yBeQ69xakiwGs';

      const response = await fetch(`http://dataservice.accuweather.com/currentconditions/v1/${locationKey}?apikey=${apiKey}`);

      const data = await response.json();

      // console.log(data,'line no 33');

      setWeatherData(data); // Assuming the first item in the response contains the current weather data

      // console.log('here is data line 33 ======================== ', data[0]?.weatherData?.Temperature[0]);

      // console.log('here is data line 34 ======================== ', data[0]?.WeatherText);

      setCondition(data[0]?.WeatherText)

      setLoading(false);

    } catch (error) {

      console.error('Error fetching data:', error);

      setLoading(false);

    }

  };



  // here is the apis of cities 

  const fetchCities = async (city) => {

    setcheck(true);

    try {

        const apiKey = '7NYLCQQfvSRw7nDEAj4yBeQ69xakiwGs';

        const response = await fetch(`http://dataservice.accuweather.com/currentconditions/v1/topcities?apikey=${apiKey}&q=${city}`);

        const data = await response.json();

        console.log('Here is data line no 52:', data);

        setCityName(data[0]?.LocalizedName);

        setProvince(data[0]?.AdministrativeArea?.EnglishName);

        setCountry(data[0]?.Country?.EnglishName);

        setRegion(data[0]?.Region?.LocalizedName);

        setLocationkey(data[0]?.Key);

        // setLocationkey(400)

        fetchWeather();

    } catch (error) {

        console.error('Error fetching data:', error);

    }

};



const handleFetchCities = () => {

    fetchCities(cityName);

};









  const renderStarLabels = () => {

    const labels = ['Very Bad', 'Bad', 'Average', 'Good', 'Very Good'];



    return labels.map((label, index) => (

      <View key={index} style={styles.labelContainer}>

        <Text style={styles.labelText}>{label}</Text>

      </View>

    ));

  };

  const onFocusEffect = React.useCallback(() => {

    // This should be run when screen gains focus - enable the module where it's needed

    AvoidSoftInput.setShouldMimicIOSBehavior(true);

    return () => {

      // This should be run when screen loses focus - disable the module where it's not needed, to make a cleanup

      AvoidSoftInput.setShouldMimicIOSBehavior(false);

    };

  }, []);



  useFocusEffect(onFocusEffect)



  return (

    <View style={styles.Container}>

      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ flex: 1, marginTop: '5%' }}>

        <CustomHeader title={"Search Location"} onPress={() => navigation.goBack()} />

        <View style={styles.TextInputSectionStyling}>

          <TextInput

            style={styles.TextInputStyling}

            placeholder={'Enter City Name'}

            placeholderTextColor={"#424242"}

            value={cityName}

            onChangeText={setCityName}

          />

          <TouchableOpacity>

            <Icon type="MaterialIcons" name="my-location" size={18} color={Colors.Black} />

          </TouchableOpacity>

        </View>



        {check === false ? <View style={styles.LocationSection}>

          <TouchableOpacity style={styles.LocationInformationSection}>

            <Image source={require("../../Theme/Images/LocationArrow.png")} style={{ width: 24, height: 24 }} />

            <View style={styles.LocationNameAndAddressSection}>

              <Text style={styles.LocationNameStyling}>Noor Hospital</Text>

              <Text style={styles.LocationAddressStyling}>186 Ave Riyad</Text>

            </View>

          </TouchableOpacity>

          <TouchableOpacity style={styles.LocationInformationSection}>

            <Image source={require("../../Theme/Images/LocationArrow.png")} style={{ width: 24, height: 24 }} />

            <View style={styles.LocationNameAndAddressSection}>

              <Text style={styles.LocationNameStyling}>KFC</Text>

              <Text style={styles.LocationAddressStyling}>186 Ave Riyad</Text>

            </View>

          </TouchableOpacity>

          <TouchableOpacity style={styles.LocationInformationSection}>

            <Image source={require("../../Theme/Images/LocationArrow.png")} style={{ width: 24, height: 24 }} />

            <View style={styles.LocationNameAndAddressSection}>

              <Text style={styles.LocationNameStyling}>Unnamed</Text>

              <Text style={styles.LocationAddressStyling}>186 Ave Riyad</Text>

            </View>

          </TouchableOpacity>

          <TouchableOpacity style={styles.LocationInformationSection}>

            <Image source={require("../../Theme/Images/LocationArrow.png")} style={{ width: 24, height: 24 }} />

            <View style={styles.LocationNameAndAddressSection}>

              <Text style={styles.LocationNameStyling}>Famous Point</Text>

              <Text style={styles.LocationAddressStyling}>location on map</Text>

            </View>

          </TouchableOpacity>

          <TouchableOpacity style={styles.MapSelectionSection}>

            <Image source={require("../../Theme/Images/MapIconVector.png")} style={{ width: 24, height: 24 }} />

            <View style={styles.LocationNameAndAddressSection}>

              <Text style={styles.ChooseOnMapText}>Choose on map</Text>

            </View>

          </TouchableOpacity>

        </View>

          :

          <View style={{ marginHorizontal: "5%" }}>

            <View>

              {loading ? (

                <ActivityIndicator size={50} color={'red'} />

              ) : weatherData ? (

                <View>

                  <Text style={styles.cityName}>Temperature:  {weatherData?.Temperature?.Metric?.Value}°{weatherData?.Temperature?.Metric?.Unit}</Text>

                  <View style={{ flexDirection: 'row' }}>

                    <Text style={styles.cityName}>Weather Text:  </Text>

                    <Text style={styles.weathertext}>{condition}</Text>



                  </View>

                 <View style={{ height: 200, backgroundColor: 'blue', width: "90%", marginVertical: "5%", marginHorizontal: "5%" }}>

                    {

                      condition === "Rainy" ?

                        <Image source={require('../../Theme/Images/rainimage.webp')} style={{ width: 60, height: '100%', }} />



                        : condition === "Cloudy" ?



                          <Image source={require('../../Theme/Images/cloud.jpeg')} style={{ width: '100%', height: '100%', }} />

                          :

                          <Image source={require('../../Theme/Images/clearsun.jpeg')} style={{ width: 60, height: "100%", }} />



                    }

                  </View>

                  <TouchableOpacity style={styles.MapSelectionSection}>

          <Image source={require("../../Theme/Images/MapIconVector.png")} style={{ width: 24, height: 24 }} />

          <View style={styles.LocationNameAndAddressSection}>

            <Text style={styles.ChooseOnMapText}>Choose on map</Text>

          </View>

        </TouchableOpacity>

                  {/* Add more weather data as needed */}

                </View>

              ) : (

                <Text style={[styles.cityName, { color: 'red' }]}>No weather data available</Text>

              )}

            </View>

            <Text style={styles.cityName}> City Name : {cityName}</Text>

            <Text style={styles.cityName}> Province Name : {province}</Text>

            <Text style={styles.cityName}> Country Name : {country}</Text>

            <Text style={styles.cityName}> Region Name : {region}</Text>

          </View>}

       

        <View style={{ marginHorizontal: "10%", marginTop: "10%" }}>

          <Reuse_Button

            ButtonText="Verify Now" onPress={handleFetchCities} />

        </View>







      </ScrollView>

    </View>

  )

}



export default SearchLocationScreen