css – UI in Flatlist doesn’t present uo accurately after 2nd time

I’ve a display the place I’ve Flatlist with totally different colors chosen from a colours web page and setting these colour utilizing a callback. Now the issue is that in android all the things is okay, however in iOS The flatlist merchandise is being reduce solely high left half is seen. First time launching the app it’s high-quality however second time when. I enter in that web page. the issue happens.

Anticipated Behaviour:

Once I enter the display second time or later:

That is the code of my display.

import { RouteProp } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import * as React from "react";
import { Textual content, View, StyleSheet } from "react-native";
import { AppStackParams } from "../../Constants/AppStackParams";
import { COLORS } from "../../Constants/colours";
import NRUserNavigationBar from "../../Elements/NRUserNavigationBar";
import { useTranslation } from "react-i18next";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { FlatList } from "react-native-gesture-handler";
import { AddPriceQuoteFields } from "../../Constants/DummyData";
import {
  AddPriceModal,
  MetaDataModal,
  OfferModal,
  Room,
} from "../../Redux/sorts";
import NRTextField from "../../Elements/NRTextField";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { FONT } from "../../Constants/FontConstant";
import NRMobileTextField from "../../Elements/NRMobileTextField";
import { WIDTH } from "../../Helper/DeviceDimension";
import NRButton from "../../Elements/NRButton";
import PlusIcon from "../../Property/SVG/PlusIcon";
import NRTitleText from "../../Elements/NRTitleText";
import NRMediumText from "../../Elements/NRMediumText";
import NRFooterButton from "../../Elements/NRFooterButton";
import NRCitySheet from "../../Elements/NRCitySheet";
import NRPickerText from "../../Elements/NRPickerText";
import RBSheet from "react-native-raw-bottom-sheet";
import {
  downloadAndSharePdf,
  shareLink,
  showErrorAlert,
  toFormattedDate,
} from "../../Utils/CommonFunctions";
import { useAppDispatch, useAppSelector } from "../../Redux/retailer/retailer";
import { initialState, updateLoading } from "../../Redux/reducers/reducers";
import {
  CreatePriceOfferService,
  getCitiesService,
  GetMyPriceQuoteByIdService,
  UpdatePriceOfferService,
} from "../../Redux/providers/providers";
import NRRoomPreview from "../../Elements/NRRoomPreview";
import NRLoading from "../../Elements/NRLoading";
import { isAndroid } from "../../Helper/ResponsiveFunctions";

kind Props = {
  navigation: NativeStackNavigationProp<AppStackParams, "AddPriceQuote">;
  route: RouteProp<AppStackParams, "AddPriceQuote">;
};

const AddPriceQuote = ({ navigation, route }: Props) => {
  const { t } = useTranslation();
  let { consumer, isLoading, appDictionary } = useAppSelector(
    (state) => state.international
  );
  const [errors, setErrors] = useState<{ [key: string]: string }>({});
  const refCityRBSheet: any = useRef(RBSheet);
  const [priceQuote, setPriceQuote] = useState<OfferModal | null>(null);
  const [cities, setCities] = useState<any>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [metaData, setMetaData] = useState<MetaDataModal | any>();
  const [workDate, setWorkDate] = useState<string | null>();
  const [rooms, setRooms] = useState<Room[]>([]);
  const dispatch = useAppDispatch();

  const [formValues, setFormValues] = useState<AddPriceModal>({
    clientName: "",
    totalPrice: "",
    phoneNumber: "",
    metropolis: "",
    workEstimation: "",
    workStartDate: "",
    workDescription: "",
    rooms: [],
  });

  // Get Worth supply by id
  const getPriceQuotes = async (id: string) => {
    dispatch(updateLoading(true));
    const outcome: any = await GetMyPriceQuoteByIdService(id);
    dispatch(updateLoading(false));
    if (outcome?.standing) {
      const quote = outcome?.knowledge?.knowledge;
      setPriceQuote(quote);
      console.log(quote);

      setFormValues({
        clientName: quote?.clientName ?? "",
        totalPrice: quote?.totalPrice.toString() ?? "",
        phoneNumber: quote?.phoneNumber ?? "",
        metropolis: quote?.metropolis ?? "",
        workEstimation: quote?.workEstimation.toString() ?? "",
        workStartDate:
          toFormattedDate(quote?.workStartDate, "YYYY-MM-DD") ?? "",
        workDescription: quote?.workDescription ?? "",
        rooms: quote?.rooms,
      });
      setWorkDate(toFormattedDate(quote?.workStartDate, "DD.MM.YYYY"));
      setRooms(quote?.rooms);
    } else {
      showErrorAlert(outcome?.message);
    }
  };

  //Get cities
  const getCities = async (
    search?: string,
    web page?: quantity,
    isInitial = false
  ) => {
    const outcome = await getCitiesService(search, web page);
    if (outcome?.standing) {
      setMetaData(outcome?.metaData);
      if (outcome?.knowledge?.size > 0) {
        if (search || isInitial) {
          setCities(outcome?.knowledge);
        } else {
          setCities((prevData: any) => [...prevData, ...result?.data]);
        }
      } else {
        if (search) {
          setCities([]);
        }
      }
    } else {
      showErrorAlert(outcome?.message);
    }
  };
  const handleLoadMore = () => {
    if (currentPage < metaData?.totalFilteredPage && !initialState.isLoading) {
      setCurrentPage((prevPage) => prevPage + 1);
    }
  };
  useEffect(() => {
    getCities("", 1, true);
    if (route?.params?.id !== "") {
      getPriceQuotes(route?.params?.id);
    }
  }, []);

  useEffect(() => {
    if (currentPage <= metaData?.totalFilteredPage) {
      getCities("", currentPage);
    }
  }, [currentPage]);

  const validateFields = () => {
    const newErrors: { [key: string]: string } = {};
    if (!formValues?.clientName?.trim())
      newErrors.clientName =
        appDictionary?.clientNameRequired?.worth ?? t("CLIENT_NAME_REQUIRED");
    else if (!formValues?.totalPrice?.trim())
      newErrors.totalPrice =
        appDictionary?.totalPriceRequired?.worth ?? t("TOTAL_PRICE_REQUIRED");
    else if (
      !formValues?.phoneNumber?.trim() ||
      !/^d{10,}$/.take a look at(formValues?.phoneNumber.trim())
    )
      newErrors.phoneNumber =
        appDictionary?.vaildPhoneRequired?.worth ?? t("PHONE_REQUIRED");
    else if (!formValues?.metropolis?.trim())
      newErrors.metropolis = appDictionary?.cityRequired?.worth ?? t("CITY_REQUIRED");
    else if (!formValues?.workStartDate?.trim())
      newErrors.workStartDate = appDictionary?.required?.worth ?? t("REQUIRED");
    else if (!formValues?.workEstimation?.trim())
      newErrors.workEstimation =
        appDictionary?.required?.worth ?? t("REQUIRED");
    setErrors(newErrors);
    return Object.keys(newErrors).size === 0;
  };

  const createUpdatePriceOfferApi = async () => {
    const updatedFormValues = {
      ...formValues,
      totalPrice: parseInt(formValues.totalPrice),
      workEstimation: parseInt(formValues.workEstimation),
    };
    dispatch(updateLoading(true));
    const outcome: any =
      route?.params?.id !== ""
        ? await UpdatePriceOfferService(route?.params?.id, updatedFormValues)
        : await CreatePriceOfferService(updatedFormValues);
    dispatch(updateLoading(false));
    if (outcome?.standing) {
      route?.params?.onCallBack!();
      navigation?.pop();
    } else {
      showErrorAlert(outcome?.message);
    }
  };

  const handleChange = (key: string, worth: string) => {
    setFormValues((prevState) => ({
      ...prevState,
      [key]: worth,
    }));

    if (errors[key]) {
      setErrors((prevErrors) => ({
        ...prevErrors,
        [key]: "",
      }));
    }
  };

  const openPicker = (index: quantity) => {
    swap (index) {
      case 3:
        refCityRBSheet?.present?.open();
        break;
    }
  };

  return (
    <View type={types.container}>
      <NRUserNavigationBar
        title={appDictionary?.priceQuote?.worth ?? t("PRICE_QUOTE")}
        isBackVisible
        isHomeVisible
        onBack={() => {
          navigation.goBack();
        }}
        onHomeClick={() => {
          navigation.popToTop();
        }}
      />

      <KeyboardAwareScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{
          paddingBottom: 20,
          flexGrow: 1,
        }}
      >
        <FlatList
          knowledge={AddPriceQuoteFields}
          scrollEnabled={false}
          keyExtractor={(merchandise, index) => index.toString()}
          renderItem={({ merchandise, index }) => (
            <>
              <NRTextField
                placeholder={
                  appDictionary?.[item.placeholder]?.worth ??
                  t(merchandise.placeholder)
                }
                worth={formValues[item.key as keyof AddPriceModal]}
                isDropDown={merchandise.isDropDown}
                isDatePicker={merchandise.isDatePicker}
                itemKey={merchandise.key}
                keyboardType= index == 2 ? "numeric" : "default"
                maxLength={index == 2 ? 10 : undefined}
                onOpenPicker={() => {
                  openPicker(index);
                }}
                onSelectDate={(date: any, rawDate: any) => {
                  handleChange(merchandise?.key, date);
                }}
                onValueChange={(worth: string) => {
                  handleChange(merchandise?.key, worth);
                }}
              />
              {errors[item.key] && (
                <View>
                  <Textual content type={types.errorText}>{errors[item.key]}</Textual content>
                </View>
              )}
            </>
          )}
        />

        <View
          type={{
            flexDirection: "row-reverse",
            justifyContent: "space-between",
            marginHorizontal: 28,
          }}
        >
          <NRTextField
            placeholder={appDictionary?.workDay?.worth ?? t("WORK_DAY")}
            worth={formValues.workEstimation}
            itemKey={""}
            keyboardType={"numeric"}
            onValueChange={(textual content: string) => {
              setFormValues((prevState) => ({
                ...prevState,
                workEstimation: textual content,
              }));
            }}
            customStyle={{ flex: 1.5 }}
          />
          <NRTextField
            placeholder={
              appDictionary?.startWorkDate?.worth ?? t("START_WORK_DATE")
            }
            worth={workDate}
            isDatePicker
            isEarlierDate
            onSelectDate={(date: any, rawDate: any) => {
              setWorkDate(date);
              setFormValues((prevState) => ({
                ...prevState,
                workStartDate: rawDate,
              }));
            }}
            itemKey={"startWorkDate"}
            customStyle={{ flex: 2.5, marginRight: 10 }}
          />
        </View>

        <NRMobileTextField
          textual content={formValues.workDescription}
          placeholder={
            appDictionary?.workDescription?.worth ?? t("workDescription")
          }
          isMultiline
          onTextChanged={(textual content: string) => {
            setFormValues((prevState) => ({
              ...prevState,
              workDescription: textual content,
            }));
          }}
          customStyle={types.description}
          inputStyle={types.descriptionInput}
          itemKey={"workDescription"}
        />

        <View type={types.addRoomContainer}>
          <NRButton
            title={appDictionary?.addRoom?.worth ?? t("ADD_ROOM")}
            icon={<PlusIcon />}
            customStyle={types.addRoomButton}
            titleStyle={{ fontSize: 14 }}
            onPress={() => {
              navigation.navigate("AddRoom", {
                onCallBack(room) {
                  setRooms((prevRooms) => [...prevRooms!, room]);
                  setFormValues((prev) => ({
                    ...prev,
                    rooms: [...prev.rooms, room],
                  }));
                },
              });
            }}
          />
          <NRTitleText
            textual content={appDictionary?.rooms?.worth ?? t("ROOMS")}
            fontSize={20}
          />
        </View>

        <FlatList
          knowledge={rooms}
          scrollEnabled={false}
          contentContainerStyle={{
            paddingBottom: 20,
            backgroundColor: "crimson",
          }}
          keyExtractor={(merchandise, index) => index.toString()}
          renderItem={({ merchandise, index }) => (
            <NRRoomPreview
              identify={merchandise.roomName}
              measurement={`${merchandise.peak} x ${merchandise.width}`}
              size={merchandise?.size?.toString()!}
              description={merchandise.workDescription}
              colorList={merchandise?.colours}
              onEditClick={() => {
                navigation.navigate("AddRoom", {
                  room: merchandise,
                  onCallBack(room) {
                    setRooms((prevRooms) =>
                      prevRooms?.map((r) => (r === merchandise ? room : r))
                    );
                  },
                });
              }}
              onDeleteClick={() => {
                const temp = priceQuote?.rooms;
                setRooms(temp?.filter((tempItem) => tempItem !== merchandise) ?? []);
              }}
            />
          )}
        />

        {rooms?.size == 0 && (
          <NRMediumText
            textual content={
              appDictionary?.continueToAddRoom?.worth ??
              t("CONTINUE_TO_ADD_ROOM")
            }
            fontSize={24}
            customStyle={{ marginTop: 16 }}
          />
        )}
      </KeyboardAwareScrollView>

      <NRCitySheet
        refRBSheet={refCityRBSheet}
        title={
          appDictionary?.[AddPriceQuoteFields[3].placeholder]?.worth ??
          t(AddPriceQuoteFields[3].placeholder)
        }
        peak={cities?.size < 10 ? cities?.size * 70 : 700}
        onChangeValue={(textual content: string) => {
          setTimeout(() => {
            getCities(textual content);
          }, 300);
        }}
      >
        <FlatList
          knowledge={cities}
          showsVerticalScrollIndicator={false}
          onEndReached={handleLoadMore}
          onEndReachedThreshold={0.5}
          keyExtractor={(merchandise, index) => `${index}_search`}
          renderItem={({ merchandise, index }: any) => {
            return (
              <NRPickerText
                textual content={merchandise?.cityName}
                onSelect={() => {
                  setFormValues((prevData: any) => {
                    return {
                      ...prevData,
                      metropolis: merchandise?.cityName,
                    };
                  });
                  refCityRBSheet?.present?.shut();
                }}
              />
            );
          }}
        />
      </NRCitySheet>

      <NRFooterButton
        title={appDictionary?.save?.worth ?? t("SAVE")}
        isSecondaryVisible={route?.params?.id !== ""}
        isShareVisible={route?.params?.id !== ""}
        secondaryTitle={appDictionary?.share?.worth ?? t("SHARE")}
        onPress={() => {
          if (validateFields()) {
            createUpdatePriceOfferApi();
          }
        }}
        onSecondaryClick={() => {
          downloadAndSharePdf(priceQuote?.pdfLink!);
        }}
      />
      {isLoading && <NRLoading />}
    </View>
  );
};

export default AddPriceQuote;

const types = StyleSheet.create({
  container: {
    flex: 1,
    flexGrow: 1,
    backgroundColor: COLORS.SCREEN_BG,
  },
  errorText: {
    textAlign: "left",
    marginLeft: 40,
    colour: "#C99A00",
    fontSize: 12,
    fontFamily: FONT.RubikMedium,
    marginTop: 4,
  },
  description: {
    width: WIDTH - 28,
    peak: 200,
    marginTop: 20,
    alignSelf: "middle",
    textAlignVertical: "high",
  },
  descriptionInput: {
    textAlignVertical: "high",
    alignSelf: "baseline",
    paddingTop: 10,
  },
  addRoomContainer: {
    flexDirection: "row-reverse",
    justifyContent: "space-between",
    marginTop: 30,
    paddingBottom: 16,
    alignItems: "middle",
    borderBottomWidth: 1.5,
    borderBottomColor: "#7B7B85",
    marginHorizontal: 20,
  },
  addRoomButton: {
    width: "auto",
    paddingHorizontal: 15,
    peak: 35,
  },
});