UUID 만들기

보통은 글을 만들 때, 고유한 식별번호인 UUID를 많이 사용하지만. 최근에 nanoid라는 것도 사용한다.

이번엔 nanoid를 사용해볼 예정이다.

근데 이거 문제가 많아서 그냥 넘어가자.. 화딱지 나네..

바닥에도착했을 때 FAB숨기기

onEndReachedThreshold

스크롤이 바닥에 가까워질때 호출하는 props

다시 바닥과 멀어지면 나타나야하는데…

ScrollView Props를 사용하는 것이 좋다.

onScroll에서

contentOffset, 맨 상단과의 거리 layoutMeasurement : 현재 보여지는 거리

contentSize 목록 전체의 높이 그래서 contentOffset + layoutMeasurement = contentSize 라면

현재 스크롤은 바닥인것이다.

아 예외가 있는데

스크롤이 생성되지 않는 화면이 경우에는 contentSize가 layoutMeasurement 보다 작으므로 음수가 된다.

그러므로 음수가 아닌경우and 0 에 가까워진 경우를 체크하여 바닥에 가까운지 확인해주면 된다

<FlatList
	data={data}
	renderItem={({ item }) => <ListItem item={item} />}
	keyExtractor={item => String(item.id)}
	windowSize={5}
	ItemSeparatorComponent={Separator}
	ListHeaderComponent={View}
	ListHeaderComponentStyle={{ height: 10 }}
	onScroll={({
		nativeEvent: { contentSize, contentOffset, layoutMeasurement },
	}) => {
		const distance =
			contentSize.height - (contentOffset.y + layoutMeasurement.height);
		setIsBottom(!(distance > 20 || contentOffset.y === 0));
	}}
/>

위처럼 FlatList에 onScroll 이벤트를 매겨서 작업해주면 됨!