이번에는 리액트 네이티브 v0.63에 새로 도입된 컴포넌트인 Pressable을 사용했습니다(이전에 배운 Touchable* 컴포넌트와 비슷합니다).

Pressable 컴포넌트는 TouchableWithoutFeedback과 성격이 비슷하지만, 기능이 더 많습니다. android_ripple Props를 설정해 안드로이드에서 물결 효과를 보여줄 수도 있고, 스타일을 설정할 때 pressed 값을 인식해 컴포넌트가 눌리면 동적인 스타일을 적용할 수도 있습니다.

이 컴포넌트의 경우 iOS 환경에서는 버튼을 눌렀을 때 투명도를 가지게 설정했고, 안드로이드에서는 물결 효과가 나타나게 만들었습니다.

styles.wrapper에서는 position: 'absolute' 스타일을 부여했는데요. 이 설정을 통해 컴포넌트의 위치를 좌푯값 left, right, top, bottom으로 지정할 수 있습니다. 앞의 코드에서는 right와 bottom 값을 지정해 우측 모서리에서 16dp만큼의 여백을 두었습니다.

그리고 컴포넌트에 그림자 스타일을 적용해줬는데요. iOS와 안드로이드는 그림자 설정을 위한 스타일 이름이 다른 것에 주의하세요. 또한, 안드로이드에서 물결 효과가 원 밖으로 나가지 않도록 overflow를 설정해줬습니다. iOS에서는 overflow: 'hidden' 스타일이 적용되면 그림자도 보여지지 않기 때문에 안드로이드에서만 해당 스타일을 적용하도록 만들었습니다.

컴포넌트를 다 작성했으면 FeedsScreen에서 방금 만든 컴포넌트를 불러와 사용해보세요. 그리고 styles.block에 flex: 1을 넣어주세요. 만약 이 값을 넣지 않으면 해당 View가 비어있을 때는 높이가 0으로 간주됩니다. 그러면 방금 만든 컴포넌트에서 position: 'absolute' 설정이 제대로 작동하지 않아 화면에 나타나지 않을 것입니다.