[React Native] Android에서 그림자가 잘릴 때

문제 상황

React Native를 이용해 프로젝트를 진행하고 있는데, IOS에서는 정상적으로 보이는 그림자가 Android에서는 좌우로 잘려 보인다.

 

저 데이터는 백엔드가 넣었습니다.. 저는 모르는 일이에요..

 

원인

const GeneralCommunity: React.FC = () => {
  const { postList, getPostListByBoardId } = useCommunityContext();
  const { tokenHeader } = useContext(AuthContext);

  useEffect(() => {
    if (!tokenHeader) return;
    getPostListByBoardId(tokenHeader, 1, 0);
  }, [tokenHeader]);

  return (
    <GradientBackground>
      <FlatList
      style={styles.container}
        contentContainerStyle={styles.contentContainer}
        data={postList.general}
        renderItem={({ item }) => (
          // 그림자 효과가 적용된, FlatList 내부의 컴포넌트
          <PostCard
            postInfo={item}
            onPress={() => console.log("네비게이션" + item.postId)}
            key={item.postId}
          />
        )}
      ></FlatList>
    </GradientBackground>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 16,
  },
  contentContainer: {
    gap: 16,
    paddingVertical: 24,
  },
});

export default GeneralCommunity;

 

 

해당 그림자가 적용된 컴포넌트들은 모두 FlatList 내부에서 렌더링된다.

내부 컴포넌트에 따라 스크롤 옵션을 부여해주는 FlatList 그리고 ScrollView의 속성에는 style과 contentContainerStyle이 존재한다.

style은 'FlatList 컴포넌트 자체 영역'을
contentContainerStyle은 FlatList 내부에서 '내부 컴포넌트들이 렌더링될 영역'을 정의한다.

padding을 contentContainerStyle이 아닌 style에 적용했기 때문에, 내부 컴포넌트들의 좌우 크기와 FlatList 내부 렌더링 영역의 좌우 크기가 완전히 동일해져서 좌우 그림자가 잘려보이게 된 것이다.

 

해결 방법

원인을 파악하면 간단히 해결 방법을 떠올릴 수 있겠다. 단순하게 padding을 style에서 contentContainerStyle로 옮기면 된다. 위와 유사한 구조를 가지는 ScrollView에도 위 해결 방법을 적용할 수 있다.