When justifyContent: "center", alignItems: "center", items are not rendered.

Description

When justifyContent: "center", alignItems: "center" items are not rendered.

DropDown.tsx

import { View, StyleProp, ViewStyle, Text, TouchableOpacity, Modal } from "react-native";
import { StyleSheet } from "react-native-unistyles";
import { fp, isp, sp } from "../Utils/Responsive";
import { Ionicons } from "@react-native-vector-icons/ionicons";
import { useState } from "react";
import { FlashList } from "@shopify/flash-list";

interface DropDownProps
{
    // Genel Ayarlar
    placeHolderText?: string;

    // Stiller
    containerStyle?: StyleProp<ViewStyle>;

    // Data
    data?: string[];
}

export function DropDown({ placeHolderText, containerStyle, data }: DropDownProps)
{
    const [placeText, setPlaceText] = useState(placeHolderText ?? "Seçiniz");
    const [acik, setAcik] = useState(false);

    return (
        <View>
            <TouchableOpacity style={[styles.btn, containerStyle]} activeOpacity={1} onPress={() => setAcik(!acik)}>
                <Text style={styles.placeHolderText}>{placeText}</Text>
                <Ionicons name="chevron-down" size={isp(14)} color="#999" />
            </TouchableOpacity>

            <Modal visible={acik} transparent={true} animationType="fade" statusBarTranslucent={true} onRequestClose={() => setAcik(false)}>
                <View style={styles.modalBox}>
                    <View style={styles.modalContainer}>
                        <Text>Manuel Item 1</Text>
                        <Text>Manuel Item 2</Text>
                        <Text>Manuel Item 3</Text>

                        <View style={styles.modalSeparator} />

                        <FlashList
                            data={data ?? []}
                            renderItem={RenderItem}
                            keyExtractor={(item, index) => index.toString()}
                        />
                    </View>
                </View>
            </Modal>
        </View>
    )
}

function RenderItem({ item }: { item: string })
{
    console.log(item);
    // -> FlashList 1
    // -> FlashList 2
    // -> FlashList 3
    return (
        <Text>{item}</Text>
    )
}

const styles = StyleSheet.create(
{
    container:
    {
        flex: 1,
    },

    btn:
    {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: sp(8),
        borderWidth: sp(1),
        borderColor: '#ccc',
        borderRadius: sp(5),
    },

    placeHolderText:
    {
        fontFamily: 'Inter18-Regular',
        fontSize: fp(10),
        color: '#999',
    },

    modalBox:
    {
        flex: 1,
        backgroundColor: "rgba(0,0,0,0.5)",
        justifyContent: "center",
        alignItems: "center",
    },

    modalContainer:
    {
        backgroundColor: '#ffffff',
        width: '80%',
        padding: sp(15),
        borderRadius: sp(10),
        elevation: 6,
    },

    modalSeparator:
    {
        height: sp(1),
        backgroundColor: '#ccc',
        marginVertical: sp(10),
    },
});

CuzdanOlustur.tsx

import { StyleSheet } from "react-native-unistyles";
import { SafeAreaViewComponent } from "../Components/SafeAreaView";
import { StackScreenProps } from "../Constants/StackScreen";
import { Gradient_Container } from "../Constants/TemaGradient";
import Animated from "react-native-reanimated";
import { _FadeInDown } from "../Functions/Animations";
import { fp, sp } from "../Utils/Responsive";
import { IconBox } from "../Components/IconBox";
import { Text, TouchableOpacity } from "react-native";
import TextBox from "../Components/TextBox";
import { DropDown } from "../Components/DropDown";

export function CuzdanOlustur({ navigation, route }: StackScreenProps<'CuzdanOlustur'>)
{
    return (
        <SafeAreaViewComponent colors={Gradient_Container} scrollProps={{ padding: '2.5%', justifyContent: "center", alignItems: "center" }} scrollMode="keyboard-controller">

            <Animated.View style={{ alignItems: "center", marginBottom: sp(20),  }} entering={_FadeInDown(100)}>
                <IconBox icon="wallet" iconColor="#fff" iconSize={30} boxSize={60} boxColor="rgba(255, 255, 255, 0.3)" boxRadius={15} />
                <Text style={styles.iconText}>Yeni Cüzdan Oluştur</Text>
                <Text style={styles.altText}>Cüzdanınızı tanımlayın ve para biriminizi seçin</Text>
            </Animated.View>

            <Animated.View style={styles.kartBox} entering={_FadeInDown(100)}>
                <Text style={styles.boxText}>Cüzdan Adı</Text>
                <TextBox
                    leftIconName="card"
                    placeholder="Cüzdan Adı"
                    fontSize={10}
                    iconSize={17}
                    minHeight={20}
                    containerStyle={{ marginBottom: sp(20) }}
                    autoCorrect={false}
                    autoCapitalize="none"
                    autoComplete="off"
                />

                <Text style={styles.boxText}>Para Birimi</Text>

                <DropDown
                    containerStyle={{ marginBottom: sp(15) }}
                    placeHolderText="Para birimini seçin"
                    data={["FlashList 1", "FlashList 2", "FlashList 3"]}
                />

                <TouchableOpacity style={styles.buton} activeOpacity={0.85}>
                    <Text style={styles.butonText}>Cüzdanı Oluştur</Text>
                </TouchableOpacity>
            </Animated.View>

            <Text style={styles.altText}>Cüzdanınızı oluşturduktan sonra istediğiniz zaman düzenleyebilirsiniz</Text>

        </SafeAreaViewComponent>
    )
}

const styles = StyleSheet.create(
{
    iconTextBox:
    {
        justifyContent: "center",
        alignItems: "center",
    },

    iconText:
    {
        color: '#ffffff',
        fontFamily: "Inter18-Bold",
        fontSize: fp(20),
        textAlign: "center",
        marginTop: sp(10),
    },

    altText:
    {
        color: '#ffffff',
        fontFamily: "Inter18-Regular",
        fontSize: fp(12),
        textAlign: "center",
        marginTop: sp(5),
    },

    kartBox:
    {
        width: '85%',
        backgroundColor: '#ffffff',
        padding: sp(15),
        borderRadius: sp(10),
        elevation: 6,
        marginBottom: sp(15),
    },

    boxText:
    {
        fontFamily: "Inter18-SemiBold",
        fontSize: fp(11),
        color: "rgba(0, 0, 0, 0.7)",
        marginBottom: sp(10),
    },

    buton:
    {
        width: '100%',
        justifyContent: "center",
        alignItems: "center",
        padding: sp(10),
        borderRadius: sp(10),
        backgroundColor: '#0ea5e9',
    },

    butonText:
    {
        color: '#ffffff',
        fontFamily: "Inter18-Bold",
        fontSize: fp(12),
    },
});

Current behavior

Expected behavior

It should look like a Manual Item.

Platform

• iOS
• Android
• Web (if applicable)

Environment

FlashList version:
2.1.0

Checklist

• I've searched existing issues and couldn't find a duplicate
• I've provided a minimal reproduction (Expo Snack preferred)
• I'm using the latest version of @shopify/flash-list
• I've included all required information above

Start with DropDown.tsx and CuzdanOlustur.tsx, then reproduce the Android behavior using FlashList 2.1.0 and the provided data. Compare the modal's manual Text items with the FlashList items and verify that all data entries render inside the centered modal on Android.