React Native textinput 입력 안 되는 버그

결론부터 말하면 textinput이 numeric인 상황에서 padding을 0으로 두면, 한 번 입력하고 입력을 다 지워서 value가 ""이 되면 다시 키보드를 아무리 두드려도 더 이상 onChangeText의 설정해둔 함수가 반응하지 않는다. 

 

문제의 발견

이 글에서의 앱을 개발하던 도중, TextInput옆에 Text로 "회"라는 글자를 적어야하는데, TextInput과 Text가 같은 위치에 있게 하기 위해서 TextInput에 padding을 0으로 설정했다. 그리고 그게 문제의 시작이였다. 

아무리 입력을 해도 ""상태가 한 번이라도 되면 입력이 먹지 않는 버그가 났는데, 그게 어떻게 CSS때문일 것이라고 유추를 하겠는가...

 

아무튼 실험을 위해서 기본적으로 젤 간단하게 했다. 

import { StatusBar } from "expo-status-bar";
import { useState } from "react";
import { StyleSheet, Text, TextInput, View } from "react-native";

export default function App() {
    const [value, setValue] = useState();

    const onChange = (val) => {
        setValue(val);
    };
    return (
        <View style={styles.container}>
            <Text>밑에 입력하세요</Text>
            <TextInput
                keyboardType="numeric"
                style={styles.textinput}
                onChangeText={onChange}
                value={value}
            />
            <Text>위에 입력하세요</Text>
            <StatusBar style="auto" />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
    textinput: {
        fontSize: 15,
        padding: 0,
    },
});

이 상황에서 

 

저렇게 입력을 했다가 싹 다 지우고 다시 입력하려고 키보드를 아무리 두드려도 입력이 안된다. 

 

여러가지 조건에서 테스트 해봤는데 keyBoardType이 numeric인 상황에서만 이런 버그가 발생했다. 똑같은 상황에서 기본 키보드의 경우 문제가 없었다. 또한, margin, border는 0으로 해도 영향이 없다. 딱 padding만 영향이 있다. 이유는 잘 모르겠다. (몇 시간 뒤 입대라 찾아볼 시간이 없다...ㅜㅜ) 그래도 같은 문제를 겪고 있는 사람이 있다면 혹시라도 도움되었으면 해서 글 쓴다. 

 

 

해결방법1

저 문제는 ""이 되는 순간 발생한다.

<TextInput
  placeholder=" "
  keyboardType="numeric"
  style={styles.textinput}
  onChangeText={onChange}
  value={value}
/>

딱 placeholder = " " 로 한 줄만 추가해주면 해결이 된다. placeholder="" 로 설정하면 똑같은 오류가 또 난다. 아마 null이 되면 문제가 생기는 거로 추측된다. 

 

해결방법2

야매로 패딩을 0.01이런식으로 미세하게 주는 것이다. UI도 크게 벗어나지 않고, 저거만으로도 해결이 된다.

저거도 조금 벗어나면 딱 한 방향만 줘도 된다. 

textinput: {
  fontSize: 15,
  padding: 0,
  paddingLeft: 0.01
 }

상하좌우 딱 한 방향이라도 미세한 패딩이 있으면 해결이 된다. 

 

---

슈발 이게 왜 문제냐고, 이거 ai한테 물어보면 싹 다 onChangeText함수를 지적하거나 주변 다른 UI가 문제라면서 이상한 소리한다. 해결방법도 어처구니가 없다. 

하필이면 numeric키보드인 상황에서 placeholder도 없는 진짜 너무 특수한 상황이 겹쳤네...