Why FlatList scrolling is not working properly?

Question

The scrolling it's very hard to achieve I have to tap a hundred times to finally manage it scroll a bit and then stops again, here is my component:

<LinearGradient
          colors={['#00000000', '#00000088', '#000000FF']}
          style={styles.root}>
          <>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                flexShrink: 1,
                marginBottom: 10,
              }}>
              <FlatList
                ref={commentsRef}
                showsVerticalScrollIndicator={false}
                onContentSizeChange={() => {
                  commentsRef.current.scrollToEnd({animated: true});
                }}
                data={comments}
                renderItem={({item}) => (
                  <UserCard
                    style={{marginTop: 10}}
                    color="#fff"
                    user="John Doe"
                    img="https://i1.imagetwist.com/th/15980/cwp7m7y8bjpg.jpg">
                    <Text style={{color: '#fff'}}>{item}</Text>
                  </UserCard>
                )}
                style={{height: '100%', marginBottom: 20}}
              />
        </View>
      </>
    </LinearGradient>

And this is the styles.root

  root: {
    paddingHorizontal: 15,
    maxHeight: deviceHeight * 0.3,
    paddingBottom: 30,
    paddingTop: 10,
  }

The UserCard is a View and the root styles it has is a flexDirection:"row"

The reason I have

<>
</>

is because after the View that is containing the FlatList I have another View that appears below but I don't think that's cause the scroll to not work?