내가 만드는 앱의 "키보드 높이"를 자동화하기

"키보드 높이"

내가 만드는 앱에서는 키보드 높이를 실시간으로 저장해두고 사용할 수 있도록 도와주는 모듈을 만들어두고 사용한다.

이 이유는, 키보드 높이에 따라서 키보드 위로 올라와야 하는 요소들이 필요한 경우가 빈번하기 때문이다.

함수의 이름은 useKeyboardHeight 이다. 작성해보자.

---

파일경로: /src/ui/hooks/useKeyboardHeight.ts

---

import {useEffect, useState} from 'react';

import {Keyboard} from 'react-native';

const useKeyboardHeight = () => {

const [keyboardHeight, setKeyboardHeight] = useState(0);

useEffect(() => {

const keyboardWillShowListener = Keyboard.addListener(

'keyboardWillShow',

e => {

setKeyboardHeight(e.endCoordinates.height);

},

);

const keyboardDidShowListener = Keyboard.addListener(

'keyboardDidShow',

e => {

setKeyboardHeight(e.endCoordinates.height);

},

);

const keyboardWillHideListener = Keyboard.addListener(

'keyboardWillHide',

() => {

setKeyboardHeight(0);

},

);

const keyboardDidHideListener = Keyboard.addListener(

'keyboardDidHide',

() => {

setKeyboardHeight(0);

},

);

return () => {

keyboardWillShowListener.remove();

keyboardDidShowListener.remove();

keyboardWillHideListener.remove();

keyboardDidHideListener.remove();

};

}, []);

return keyboardHeight;

};

export default useKeyboardHeight;

---

이제 이 파일 내용을 그대로 hbs 파일을 만들고 템플릿 코드에 넣어준다.

---

파일경로: /src/automationReactNative/index.ts

---

...

const fileInfoList: FileInfo[] = [

...

{path: 'src/ui/hooks', name: 'useKeyboardHeight', ext: 'ts'},

...

];

...

---

이제 코드를 실행해 본다.

잘 생성되었다!

이제 키보드 높이 계산 함수도 생각없이 사용할 수 있겠지 ...