더북(TheBook)

다음으로 FeedList 컴포넌트를 다음과 같이 수정해주세요.

components/FeedList.js

import React from 'react';
import {FlatList, StyleSheet, View} from 'react-native';
import FeedListItem from './FeedListItem';

function FeedList({logs, onScrolledToBottom}) {
  const onScroll = (e) => {
    const {contentSize, layoutMeasurement, contentOffset} = e.nativeEvent;
    const distanceFromBottom =
      contentSize.height - layoutMeasurement.height - contentOffset.y;

    if (distanceFromBottom < 72) {
      onScrolledToBottom(true);
    } else {
      onScrolledToBottom(false);
    }
  };

(...)

이렇게 하면 스크롤 위치에 따라 hidden 값이 변경될 것입니다. 이제 hidden 값을 Floating WriteButton 컴포넌트에 Props로 전달하고, 애니메이션 효과를 구현해주면 됩니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.