[인스타그램 클론코딩] 댓글 UI 구현1 - 여러가지 대안들.. 그리고 문제점

댓글을 입력하기 위해 가장 기본적인 텍스트 입력기인 TextInput을 사용해 보기로 했습니다.

TextInput은 Home 스크린에 있는 ScrollView 안에서 랜더링되는 다수의 Post 컴포넌트마다 포함되어 있습니다.

Home.js

결과 및 문제점

• iOS에서 키보드가 나타날 때 TextInput을 가립니다. 영상의 스크롤은 모두 직접한 것입니다.
• TextInput이 화면 상단에 있어서 키보드와 겹치지 않더라도 뭔가 어색합니다.
• 영상으로 확인할 수는 없지만 실제 ScrollView의 높이는 키보드 만큼 작아졌습니다. 그렇다고 ScrollView 내부 높이까지 작아지는 것은 아니고, 스크롤 좌표에도 영향이 없기 때문에, 키보드가 TextInput을 가립니다.
• 멀티라인이 지원되지 않습니다. 다음줄로 넘어가면 직접 스크롤해서 내용을 확인해야 합니다. 

이러한 문제를 해결하기 위한 컴포넌트들을 찾아봤습니다.

1. KeyboardAvoidingView

키보드가 나타나면 키보드 높이만큼 높이가 줄어드는 컴포넌트입니다. 리액트 네이티브에서 기본적으로 제공됩니다.

딱 이것만 관여합니다.

키보드가 나타날 때, KeyboardAvoidingView 안에 있는 ScrollView의 높이는 줄어들지만, ScrollView 내부의 컴포넌트나 스크롤 좌표에 영향을 미치지는 않습니다.

그래서 ScrollView가 KeyboardAvoidingView를 꽉 채우고 있다면 아무런 차이점을 느끼지 못할 것입니다.

KeyboardAvoidingView with ScrollView 1

Home.js

결과 영상 및 문제점

KeyboardAvoidingView를 사용하지 않았을 때와 달라진 것이 없습니다.

 

참고

다음과 같이 KeyboardAvoidingView 안에서 ScrollView 밖에 있는 컴포넌트가 있는 경우에 의미가 있는 컴포넌트입니다.

KeyboardAvoidingView with ScrollView 2

2. KeyboardAwareScrollView

커스텀된 ScrollView입니다. 해당 ScrollView 안에 있는 TextInput이 터치됐을 때, 키보드와 TextInput이 겹친다면, 자동으로 스크롤을 내려줍니다. 

설치 방법과 사용법은 여기서 확인할 수 있습니다.

Home.js

결과 영상 및 문제점

• 키보드와 TextInput이 겹칠 때, 자동으로 스크롤이 내려갔습니다. (Good)
• 키보드와 TextInput이 겹치지 않을 때, 아무런 영향이 없습니다.
• 멀티라인이 지원되지 않습니다. 

3. InputScrollView

역시 커스텀된 ScrollView입니다. 해당 ScrollView 안에 있는 TextInput이 터치됐을 때, 자동으로 커서가 잘 보이는 적당한 위치로 스크롤됩니다.

설치 방법, 사용법, 사용 영상은 여기서 확인할 수 있습니다.

TextInput이 화면 상단에 위치해서 키보드와 겹치지 않아도 적당한 위치로 스크롤되며, 멀티라인까지 지원한다고 합니다.

단, 다른 컴포넌트에 싸여있으면 안되고, TextInput이 해당 ScrollView 바로 밑의 컴포넌트어이야 한다고 개발자가 명시해 놨습니다. (확인)

그런데 한 번 써봤습니다.

Home.js

결과 영상 및 문제점

• 키보드와 TextInput이 겹칠 때, 자동으로 스크롤이 내려갔습니다.(Good)
• 키보드와 TextInput이 겹치지 않을 때, 자동으로 스크롤이 올라갔습니다 (Good)
• 키보드와 TextInput 사이의 거리는 충분히 조절 가능할 것 같습니다.
• 하지만! TextInput이 다른 컴포넌트 안에 있어서 그런지 멀티라인이 지원되지 않습니다.

그래서 그냥 인스타그램의 댓글 입력 방식을 카피해 보기로 했습니다.

• [인스타그램 클론코딩] 댓글 UI 구현2 - 스택 네비게이션을 이용한 댓글 입력창
• [인스타그램 클론코딩] 댓글 UI 구현3 - 원하는 컴포넌트 위치로 스크롤