[React Native] TextInput returnKeyType이 적용이 되지 않는 경우

얼마 전 프로젝트를 진행할 때 textInput에서 returnKeyType을 적용해야하는 경우가 있어 적용을 했습니다.

returnKeyType은 키보드 우측 하단에 있는 버튼을 어떤 타입으로 할 건지를 결정하는 prop입니다.

아래 링크와 사진을 참고하시면 이해에 도움이 될 것입니다.

https://reactnative.dev/docs/textinput#returnkeytype

TextInput · React Native

단순히 TextInput의 props로 returnKeyType 속성을 적용해주면 되는 간단한 문제였는데요, 적용이 되지 않아 당황했습니다.

구글링을 해도 답이 나오지 않아 이것저것 해보다가 원인을 찾았는데요, 원인은 바로 props에 multiline이 true로 적용되어있는 경우는 returnKeyType이 적용되지 않는다는 것이었습니다.

<TextInput
	multiline={false}
  	returnKeyType={"done"}
/>

따라서 위와 같은 상황에서는 returnKeyType이 적용이 안되고 엔터 버튼이 적용되어 있고, 원하는 returnKeyType을 입력하기 위해서는 아래와 같이 multiline을 false로 바꾸거나 multiline 속성을 적용해주지 않아야 합니다.

<TextInput
	multiline={false}
  	returnKeyType={"done"}
/>