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

[nexquery]

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