인프런 커뮤니티 질문&답변

윈도우+안드로이드 환경에서 KeyboardAwareScrollView가 동작하지 않아 React Native 문서를 보고 KeyboardAvoidingView component를 사용하려고 시도 했습니다.

import Button from "@/components/CustomButton";
import DescriptionInput from "@/components/DescriptionInput";
import TitleInput from "@/components/TitleInput";
import { useCreatePost } from "@/hooks/queries/useCreatePost";
import useKeyboardOffset from "@/hooks/useKeyboardOffset";
import { ImageUri } from "@/types";
import { zodResolver } from "@hookform/resolvers/zod";
import { useNavigation } from "expo-router";
import { useEffect } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { KeyboardAvoidingView, ScrollView, StyleSheet } from "react-native";
import z from "zod";


export default function PostWriteScreen() {
  // ...
  const { isKeyboardShown, keyboardVerticalOffsetValue } = useKeyboardOffset();
  // ...

  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button
          label="Save"
          size="medium"
          variant="standard"
          onPress={postForm.handleSubmit(onSubmit)}
        />
      ),
    });
  });

  // ...

  return (
    <FormProvider {...postForm}>
      <KeyboardAvoidingView
        behavior="padding"
        keyboardVerticalOffset={keyboardVerticalOffsetValue}
        enabled={isKeyboardShown}
        style={{ flex: 1 }}
      >
        <ScrollView
          style={styles.container}
          contentContainerStyle={styles.contentContainer}
        >
          <TitleInput />
          <DescriptionInput />
          <DescriptionInput />
          <DescriptionInput />
          <DescriptionInput />
        </ScrollView>
      </KeyboardAvoidingView>
    </FormProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentContainer: {
    flexGrow: 1,
    padding: 16,
    gap: 16,
  },
});

import { useEffect, useState } from "react";
import { Keyboard } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function useKeyboardOffset() {
  const [isKeyboardShown, setIsKeyboardShown] = useState<boolean>(false);

  const insets = useSafeAreaInsets();
  const verticalInsets = insets.top + insets.bottom;
  const keyboardVerticalOffsetValue = (Keyboard.metrics()?.height || 0) + verticalInsets + 50;

  useEffect(() => {
    const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
      setIsKeyboardShown(true);
    });
    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
      setIsKeyboardShown(false);
    });

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);
  return { isKeyboardShown, keyboardVerticalOffsetValue };
}

단순히 Keyboard 문서를 확인하니 event listener 부분이 있어 그걸 참고하여 metric().height 만큼 offset을 주고 비슷하게 동작은 하도록 작성했습니다. 추가적으로, 아랫 부분이 조금 짤려서 임의로 50을 추가했습니다.

이미 비슷한 질문이 올라 왔길래 '안드로이드 KeyboardAwareScrollView 이슈 수정 & 키보드 상태 커스텀 훅 만들기' 강의 확인하고 훅으로만 분리했는데 강의 중 상세 코드는 다르기도 하고 iOS 환경에서는 테스트를 할 수가 없어서 이런 식으로 짜도 되는지, 그리고 위에서 언급한 50에 해당하는 공간이 왜 필요한지 질문 드립니다.