Чрезмерное пустое пространство внизу в iOS с SafeAreaView и KeyboardAvoidingView ⇐ IOS

[Anonymous]

Я столкнулся с проблемой слишком большого количества пробелов в нижней части экрана в iOS при использовании SafeAreaView, KeyboardAvoidingView и ScrollView. Макет отлично работает на Android, но на iOS под содержимым появляется нежелательная пустая область.
Вот моя текущая реализация компонента:

Код: Выделить всё

import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import {
ScrollView,
KeyboardAvoidingView,
RefreshControl,
Platform,
} from "react-native";
import { StatusBar } from "expo-status-bar";

const MainView = ({
style,
children,
fixedHeader,
loading,
hasRefresh = false,
refreshing = false,
onRefresh,
onScroll,
needScrollView = true,
needTopEdge = true,
theme,
insets,
}) => {
return (

{fixedHeader}

{needScrollView ? (

{loading ?  : children}

) : (
{loading ?  : children}
)}



);
};

const styles = {
safeAreaView: {
flex: 1,
backgroundColor: "white",
},
scrollViewContent: {
flexGrow: 1,
paddingBottom: 20, // Adding padding
},
};

export default MainView;

#Такая же проблема с пробелами и в этом коде

Код: Выделить всё

import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import React, { ReactNode } from "react";
import { ScrollView, StyleSheet, RefreshControl, NativeSyntheticEvent, NativeScrollEvent } from "react-native";
import { StyleProps } from "react-native-reanimated";
import { ThemedView } from "@/components/ThemedView";
import { useGlobalContext } from "@/context/GlobalProvider";
import ThemedActiveIndicator from "../themedActiveIndicator/ThemedActiveIndicator";

interface Props {
children: React.ReactNode;
style?: StyleProps;
needTopEdge?: boolean;
hasRefresh?: boolean;
refreshing?: boolean;
onRefresh?: () => void;
fixedHeader?: ReactNode;
onScroll?: (e: NativeSyntheticEvent) => void;
loading?:boolean;
needScrollView?:boolean;
addBottomMargin?:boolean;
}

const MainView = ({
children,
style,
needTopEdge = false,
hasRefresh = false,
refreshing = false,
loading=false,
fixedHeader,
onScroll,
onRefresh = () => {},
needScrollView=true,
addBottomMargin=false
}: Props) => {
const { theme } = useGlobalContext();
const inserts = useSafeAreaInsets()
return (


{fixedHeader}
{needScrollView ? (

{loading ?  : children}

) : (
{loading ?  : children}
)}




);
};

const styles = StyleSheet.create({
safeAreaView: { flex: 1, padding: 0, margin: 0 },
keyboardAvoidingView: { flex: 1 },
scrollViewContent: { flexGrow: 1 },
});

export default React.memo(MainView);

Проблема:
На iOS:

• Большое количество В нижней части экрана появляется белое пространство, особенно когда клавиатура отключена.

Что я пробовал:

• Регулировка вертикального смещения клавиатуры в KeyboardAvoidingView.
• Добавление/удаление отступаBottom в contentContainerStyle из ScrollView.
• Обеспечение flexGrow: 1 применяется только там, где это необходимо.
• Отладка с помощью console.log(insets.bottom), чтобы гарантировать правильность расчета вставок безопасной области.

Вопросы:

• Почему это пустое пространство появляется именно на iOS ?
• Есть ли лучший подход к объединению SafeAreaView, KeyboardAvoidingView и ScrollView, чтобы избежать этой проблемы?
• Есть ли какие-либо особенности или альтернативы, специфичные для платформы? рассмотреть?

Будем очень признательны за любую помощь или идеи!

Подробнее здесь: https://stackoverflow.com/questions/792 ... ardavoidin