Пользовательский интерфейс в Flatlist не отображается правильно после второго раза ⇐ CSS

[Anonymous]

У меня есть экран, где у меня есть Flatlist с разными цветами, выбранными на странице цветов, и настраивая их цвет, используя обратный вызов. Теперь проблема в том, что в Android все в порядке, но в iOS элемент Flatlist вырезается только верхняя левая часть видна. Впервые запуск приложения все в порядке, но второй раз, когда. Я ввожу на эту страницу. Проблема возникает. //i.sstatic.net/ixad8eew.png " /> < /p>
Когда я введен на экран во второй раз или позже:

Это код моего экрана.
import { RouteProp } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import * as React from "react";
import { Text, View, StyleSheet } from "react-native";
import { AppStackParams } from "../../Constants/AppStackParams";
import { COLORS } from "../../Constants/colors";
import NRUserNavigationBar from "../../Components/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/types";
import NRTextField from "../../Components/NRTextField";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { FONT } from "../../Constants/FontConstant";
import NRMobileTextField from "../../Components/NRMobileTextField";
import { WIDTH } from "../../Helper/DeviceDimension";
import NRButton from "../../Components/NRButton";
import PlusIcon from "../../Assets/SVG/PlusIcon";
import NRTitleText from "../../Components/NRTitleText";
import NRMediumText from "../../Components/NRMediumText";
import NRFooterButton from "../../Components/NRFooterButton";
import NRCitySheet from "../../Components/NRCitySheet";
import NRPickerText from "../../Components/NRPickerText";
import RBSheet from "react-native-raw-bottom-sheet";
import {
downloadAndSharePdf,
shareLink,
showErrorAlert,
toFormattedDate,
} from "../../Utils/CommonFunctions";
import { useAppDispatch, useAppSelector } from "../../Redux/store/store";
import { initialState, updateLoading } from "../../Redux/reducers/reducers";
import {
CreatePriceOfferService,
getCitiesService,
GetMyPriceQuoteByIdService,
UpdatePriceOfferService,
} from "../../Redux/services/services";
import NRRoomPreview from "../../Components/NRRoomPreview";
import NRLoading from "../../Components/NRLoading";
import { isAndroid } from "../../Helper/ResponsiveFunctions";

type Props = {
navigation: NativeStackNavigationProp;
route: RouteProp;
};

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

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

// Get Price offer by id
const getPriceQuotes = async (id: string) => {
dispatch(updateLoading(true));
const result: any = await GetMyPriceQuoteByIdService(id);
dispatch(updateLoading(false));
if (result?.status) {
const quote = result?.data?.data;
setPriceQuote(quote);
console.log(quote);

setFormValues({
clientName: quote?.clientName ?? "",
totalPrice: quote?.totalPrice.toString() ?? "",
phoneNumber: quote?.phoneNumber ?? "",
city: quote?.city ?? "",
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(result?.message);
}
};

//Get cities
const getCities = async (
search?: string,
page?: number,
isInitial = false
) => {
const result = await getCitiesService(search, page);
if (result?.status) {
setMetaData(result?.metaData);
if (result?.data?.length > 0) {
if (search || isInitial) {
setCities(result?.data);
} else {
setCities((prevData: any) => [...prevData, ...result?.data]);
}
} else {
if (search) {
setCities([]);
}
}
} else {
showErrorAlert(result?.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 {
const newErrors: { [key: string]: string } = {};
if (!formValues?.clientName?.trim())
newErrors.clientName =
appDictionary?.clientNameRequired?.value ?? t("CLIENT_NAME_REQUIRED");
else if (!formValues?.totalPrice?.trim())
newErrors.totalPrice =
appDictionary?.totalPriceRequired?.value ?? t("TOTAL_PRICE_REQUIRED");
else if (
!formValues?.phoneNumber?.trim() ||
!/^\d{10,}$/.test(formValues?.phoneNumber.trim())
)
newErrors.phoneNumber =
appDictionary?.vaildPhoneRequired?.value ?? t("PHONE_REQUIRED");
else if (!formValues?.city?.trim())
newErrors.city = appDictionary?.cityRequired?.value ?? t("CITY_REQUIRED");
else if (!formValues?.workStartDate?.trim())
newErrors.workStartDate = appDictionary?.required?.value ?? t("REQUIRED");
else if (!formValues?.workEstimation?.trim())
newErrors.workEstimation =
appDictionary?.required?.value ?? t("REQUIRED");
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};

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

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

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

const openPicker = (index: number) => {
switch (index) {
case 3:
refCityRBSheet?.current?.open();
break;
}
};

return (

{
navigation.goBack();
}}
onHomeClick={() => {
navigation.popToTop();
}}
/>


index.toString()}
renderItem={({ item, index }) => (

{
openPicker(index);
}}
onSelectDate={(date: any, rawDate: any) => {
handleChange(item?.key, date);
}}
onValueChange={(value: string) => {
handleChange(item?.key, value);
}}
/>
{errors[item.key] && (

{errors[item.key]}

)}

)}
/>


{
setFormValues((prevState) => ({
...prevState,
workEstimation: text,
}));
}}
customStyle={{ flex: 1.5 }}
/>
{
setWorkDate(date);
setFormValues((prevState) => ({
...prevState,
workStartDate: rawDate,
}));
}}
itemKey={"startWorkDate"}
customStyle={{ flex: 2.5, marginRight: 10 }}
/>


{
setFormValues((prevState) => ({
...prevState,
workDescription: text,
}));
}}
customStyle={styles.description}
inputStyle={styles.descriptionInput}
itemKey={"workDescription"}
/>


{
navigation.navigate("AddRoom", {
onCallBack(room) {
setRooms((prevRooms) => [...prevRooms!, room]);
setFormValues((prev) => ({
...prev,
rooms: [...prev.rooms, room],
}));
},
});
}}
/>



index.toString()}
renderItem={({ item, index }) => (
{
navigation.navigate("AddRoom", {
room: item,
onCallBack(room) {
setRooms((prevRooms) =>
prevRooms?.map((r) => (r === item ? room : r))
);
},
});
}}
onDeleteClick={() => {
const temp = priceQuote?.rooms;
setRooms(temp?.filter((tempItem) => tempItem !== item) ?? []);
}}
/>
)}
/>

{rooms?.length == 0 && (

)}


{
setTimeout(() => {
getCities(text);
}, 300);
}}
>
`${index}_search`}
renderItem={({ item, index }: any) => {
return (
{
setFormValues((prevData: any) => {
return {
...prevData,
city: item?.cityName,
};
});
refCityRBSheet?.current?.close();
}}
/>
);
}}
/>


{
if (validateFields()) {
createUpdatePriceOfferApi();
}
}}
onSecondaryClick={() => {
downloadAndSharePdf(priceQuote?.pdfLink!);
}}
/>
{isLoading && }

);
};

export default AddPriceQuote;

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


Подробнее здесь: https://stackoverflow.com/questions/793 ... r-2nd-time