FlatList not scrolling in React-Native

Question

I'm trying to build a news feed on React Native using FlatList . I want it to be similar to Tik Tok's feed, each item in the FlatList occupies the whole screen.

Right now it has the correct layout that I want, but the issue is the feed is not scrollable.

For some reason, the FlatList becomes not scrollable if I set the child to have height: '100%' . When I change it to height: 1000 , it's scrollable, but I don't want to hard code the height.

I would be appreciated if you offer any help at all!

Here is the feed component:

const Feed = () => {

  const renderItem = ({ item, index }) => {
    return (
      <FeedItem
        id={item.id.toString()}
        videoUrl={item.videoUrl}
        index={index}
      />
    )
  }

  return (
      <FlatList
        style={styles.container}
        contentContainerStyle={styles.children}
        data={someData}
        renderItem={renderItem}
        keyExtractor={(item, index) => item.id.toString()}
      />
  );
}

// styles
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column',
    height: '100%'
  },
  children: {
    flexGrow: 1,
  }
})

And here is each item in the feed:

import { Video } from 'expo-av';

const FeedItem = ({ id, videoUrl, index }) => {
  return (
    <Video
      source={{ uri: videoUrl }}
      style={styles.backgroundVideo}
    />
  )
}

const styles = StyleSheet.create({
  backgroundVideo: {
    height: '100%'     // FIXME: problematic
  },
});

Answer 1

This might help

const FeedItem = ({ id, videoUrl, index }) => {
  return (
    <View style={{flex:1}}>
      <Video
        source={{ uri: videoUrl }}
        style={styles.videoStyle}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  videoStyle: {
    height: Screen.height,     // Remove this
    width: Screen.width
  },
});