React-Native <keyboardAvoidingView>

😰 input창이 맨 아래에 있으면 입력시 입력 내용이 안보이게 되는 문제 발생!

• 찾아보니 RN에서 제공하는 <KeyboardAvoidingView>를 사용하여 해결할 수 있다

공식문서

• behavior
  Specify how to react to the presence of the keyboard.
  (Android and iOS both interact with this prop differently. On both iOS and Android, setting behavior is recommended)
  - TYPE : enum('height', 'position', 'padding')
• contentContainerStyle
  The style of the content container (View) when behavior is 'position'.
  - TYPE: View Style
• enabled
  Enabled or disabled KeyboardAvoidingView.
  - default => boolean: true
• keyboardVerticalOffset
  This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases.
  - default => numbe:0

😺 behavior : 키보드가 올라올 때 그 위에 어떤 행동을 수행하게 해준다.

• height : 높이를 지정
  - keyboardVerticalOffset로 값을 설정하면 input창 클릭시 그 높이만큼 키보드위에 input창이 나타나게 됨
• padding : 여백 값을 지정
  - 위와 거의 같은듯하다. 그 padding값만큼 위에 input창이 나타나게 됨
• position :
  • 위치가 지정됨
    
  • input을 클릭후 입력시 맨아래에서 고정되어 작성할 수 있다
    
  • 맨아래로 기준이 되며 keyboardVerticalOffset로 숫자를 지정해주면 input창 클릭시 아래에 그만큼 여백이 더 생긴다.

😺 contentContainerStyle : behavior이 position일 때 View container의 스타일

😺 enabled : KeyboardAvoidingView을 할 것인지 말것인지 (사용할 거면 enabled={true}

😺 keyboardVerticalOffset :

• 유저 스크린의 끝과 네이티브 뷰 사이의 공간이라고 할 수 있겠다(키보드 위~화면 사이)
• 이 높이 지정을 통해 input창만 보일지, 그 위에 다른 내용도 보일지 정할 수 있다

<KeyboardAvoidingView
        behavior="height"
        keyboardVerticalOffset={160 * REM}
        style={{marginTop: Platform.OS === 'ios' ? 48 * REM : 0, flex: 1}}>
     	 <ScrollView>
           ....
                  <View
                    style={{
                      height: 1 * REM,
                      backgroundColor: gray6,
                      marginTop: 30 * REM,
                    }}
                  />
          </ScrollView>

          <View style={{backgroundColor: gray8, height: 90 * REM}}>
            <View
              style={{
                marginTop: 18 * REM,
                marginLeft: 16 * REM,
                flexDirection: 'row',
              }}>
             ...
              <View
                style={{
                  width: 46 * REM,
                  height: 29 * REM,
                  backgroundColor: gray5,
                  borderRadius: 4 * REM,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text
                  color={white}
                  size={14 * REM}
                  style={{padding: 20 * REM}}>
                  제출
                </Text>
              </View>
            </View>
          </View>
        </View>
      </KeyboardAvoidingView>

출처: https://hsl1697.tistory.com/57