0

I have a created a rectangle using react-native-svg and added a flatList inside that rectangle, Its showing all the items but I am not able to scroll throught the list. Please check if I am missing something or what?

<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>

I tried adding ScrollView to FlatList also, but it didn't work.

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

(Trying out react-native-svg for first time)

Rahul Syal
  • 545
  • 2
  • 6
  • 21

1 Answers1

0

Add style with

{flex : 1}

in FlatList Component.

  • It didn't work.. list is showing even scroll indicator is visible if I set showsHorizontalScrollIndicator={true} but unable to scroll through the list. – Rahul Syal Aug 02 '20 at 08:44