FlatList

<FlatList
    onRefresh={onRefresh}
    refreshing={refreshing}
    ListHeaderComponent={
      <>
        <Swiper
          horizontal
          loop
          autoplay
          autoplayTimeout={3.5}
          showsButtons={false}
          showsPagination={false}
          containerStyle={{
            marginBottom: 40,
            width: "100%",
            height: SCREEN_HEIGHT / 4,
          }}
        >
          {nowPlaying.map((movie) => (
            <Slide
              key={movie.id}
              backdropPath={movie.backdrop_path}
              posterPath={movie.poster_path}
              originalTitle={movie.original_title}
              voteAverage={movie.vote_average}
              overview={movie.overview}
            />
          ))}
        </Swiper>
        <ListContainer>
          <ListTitle>Trending Movies</ListTitle>
          <TrendingScroll
            data={trending}
            horizontal
            keyExtractor={(item) => item.id + ""}
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={{ paddingHorizontal: 30 }}
            ItemSeparatorComponent={() => <View style={{ width: 30 }} />}
            renderItem={({ item }) => (
              <VMedia
                posterPath={item.poster_path}
                originalTitle={item.original_title}
                voteAverage={item.vote_average}
              />
            )}
          />
                </ListContainer>
        <ComingSoonTitle>Coming soon</ComingSoonTitle>
      </>
    }
    data={upcoming}
    keyExtractor={(item) => item.id + ""}
    ItemSeparatorComponent={() => <View style={{ height: 20 }} />}
    renderItem={({ item }) => (
  posterPath={item.poster_path}
        originalTitle={item.original_title}
        overview={item.overview}
        releaseDate={item.release_date}
      />텍스트~~~~~
      

1. FlatList는 scrollView와 달리 data를 한꺼번에 모두 rendering하지 않음
그래서 다운이 쉽게 되지 않음

https://reactnative.dev/docs/flatlist
https://reactnative.dev/docs/scrollview

2. scrollView는 children을 가질 수 있지만
<ScrollView> <Children /> <ScrollView>

FlatList는 children을 가질 수 없음.
그래서 ListHaederComponent={} 안에 component집어넣음
-ListHeaderComponent={
 <>
 <Swiper>{sdfsdf}</Swiper>
 <ListContainer>
 	<
 </ListContainer>
 		<TrandingScroll />  ===>FlatList Component임
 </>

}
---> ListHeaderComponent는 반드시 fragment로
처음과 끝을 <>  </> 묶어줘야함..

const TarndingScroll = styled.FlatList`

`

3. Data rendering 하는 방법

<FlatList
onRefresh={onRefresh}
refreshing={refreshing}
ListHeaderComponent={}
data={upcoming}
keyExtractor={(item) => item.id + ""}
ItemSeparatorComponent={() => <View style={{ height: 20 }} />}
renderItem={({ item }) => (
posterPath={item.poster_path}
originalTitle={item.original_title}
overview={item.overview}
releaseDate={item.release_date}
)}
/>

FlatList의 새로고침


 const [refreshing, setRefreshing] = useState(false)

const onRefresh = async () => {
  setRefreshing(true)
  await getData()
  setRefreshing(false)
}

const Movies: React.FC<NativeStackScreenProps<any, 'Movies'>> = () => {

typescript의 type도 다시 체크할것!!