Невозможно прокрутить плоский список в react-native-svg

Question

Я создал прямоугольник с помощью response-native-svg и добавил плоский список внутри этого прямоугольника. Он показывает все элементы, но я не могу прокручивать список. Пожалуйста, проверьте, не хватает ли мне чего-то или чего?

<Svg style={styles.container}>
    <Defs>
        <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="0.6">
            <Stop offset="0" stopColor="red" stopOpacity="1" />
            <Stop offset="1" stopColor="yellow" stopOpacity="1" />
        </LinearGradient>
    </Defs>
    <Rect x="0" y="0" width="100%" height="100%" fill="url(#grad)"></Rect>
    <FlatList
        contentContainerStyle={styles.flatListContainer}
        data={DATA}
        renderItem={this.renderData}
        horizontal
        showsHorizontalScrollIndicator={false}
        keyExtractor={(item) => item.id}
    />
    </ScrollView>
</Svg>

Я тоже пробовал добавить ScrollView в FlatList, но это не сработало.

<ScrollView>
    <FlatList .../>
</ScrollView>

(Пробуем реагировать-native- svg впервые)

Answer 1

Добавить стиль с помощью

{flex : 1}

в компоненте FlatList.