TextInput 컴포넌트 사용 및 키보드 가림 설정

사용자 입력값 받기

리액트 네이티브에서 사용자의 키보드 입력을 받아낼때는 TextInput 컴포넌트를 사용한다.

import React from 'react';
import {View, StyleSheet, TextInput} from 'react-native';

function AddTodo() {
  return (
    <View style={styles.container}>
      <TextInput 
        placeholder="할일을 입력해주세요." 
        style={styles.input} 
        autoFocus
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 64,
    paddingHorizontal: 16, // 좌우측 패딩
    borderColor: '#bdbdbd',
    borderTopWidth: 1,
    borderBottomWidth: 1,
    justifyContent: 'center',
  },
  input: {
    fontSize: 16,
    paddingVertical: 8, // 상하단 패딩
  },
});

export default AddTodo;

속성과 스타일은 주석으로 설명을 기재해놨고 기본적인 것이므로 따로 설명은 정리하지 않겠다.

 

자동 포커스

TextInput에 autoFocus라는 Prop를 사용해 컴포넌트가 화면에 나타날 때 자동으로 포커스가 잡히게 할 수 있다.

<TextInput ... autoFocus />

 

KeyboardAvoidingView로 키보드가 화면을 가리지 않게 하기

위에서 입력한 TextInput을 클릭해보면 안드로이드와 iOS가 다르게 키보드가 올라오는 것을 알 수 있다.

좌측 안드로이드 / 우측 iOS

안드로이드의 경우는 화면이 줄어들면서 TextInput 컴포넌트가 키보드 상단에 나타나고(우측), iOS의 경우는 키보드가 화면을 가리고 있다. 이럴때 키보다가 화면을 가리지 않게 하려면 keyboardAvoidingView를 사용해야 한다.

import React from 'react';
import {StyleSheet, KeyboardAvoidingView, Platform} from 'react-native';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
import DateHead from './todo/DateHead';
import Empty from './todo/Empty';
import AddTodo from './todo/AddTodo';

const App = () => {
  const date = new Date();
  return (
    <SafeAreaProvider>
      <SafeAreaView edges={['bottom']} style={styles.container}>
        <KeyboardAvoidingView
          behavior={Platform.select({ios: 'padding', android: undefined})}
          style={styles.avoid}>
          <DateHead date={date} />
          <Empty />
          <AddTodo />
        </KeyboardAvoidingView>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  avoid: {
    flex: 1,
  },
});

export default App;

keyboardAvoidingView에서 behavior 속성을 통해 이 컴포넌트의 작동 방식을 정의할 수 있다.

behavior 속성에는 padding, height, position 값들을 넣을 수 있다.

• padding : 키보드가 열렸을 때 뷰 하단의 패딩을 설정한다.
• height : 뷰 높이 자체를 변경한다.
• position : 뷰의 위치를 설정한다.

안드로이드에서는 아무것도 설정하지 않는 것이 잘 작동하는 반면 iOS에서는 값을 설정해줘야 제대로 작동한다.

Platform.OS의 반환값에는 ios, android 두 가지가 있다. 위 코드에서는 Platform.OS에 select 함수를 사용해 ios일때 padding으로 설정했다.

 

이메일 입력 칸 만들기

이메일을 입력할 때 더욱 편하게 입력할 수 있도록 이메일 전용 입력 칸을 만들 수 있다.

<BorderedInput 
  placeholder="이메일" 
  autoCapitalize="none"
  autoCorrect={false}
  autoCompleteType="email"
  keyboardType="email-address"
  ...
  />

• autoCapitalize : 첫 번째 문자 자동 대문자 처리 활성화 설정
• autoCorrect : 자동 수정 기능 활성화 설정
• autoCompleteType : 자동 완성 유형 설정 (안드로이드)
• keyboardType : 키보드 유형 설정

 

비밀번호 입력 칸 만들기(입력한 값 숨기기)

모든 서비스에서는 비밀번호 입력칸을 보이지 않도록 처리해야 한다.

TextInput에 secureTextEntry라는 Props를 활성화 하면 텍스트가 마스킹되어 입력한 값이 보이지 않고 점으로 나타난다.

<TextInput 
  placeholder="비밀번호"
  secureTextEntry
  ...
/>

 

useState로 텍스트 값 관리하기

앞서 블로그 글에 설명한 useState로 위 코드 TextInput의 텍스트 값을 관리해보겠다.

import React, {useState} from 'react';
import {View, StyleSheet, TextInput, Image} from 'react-native';

function AddTodo() {
  const [text, setText] = useState('');

  console.log(text);

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="할일을 입력해주세요."
        style={styles.input}
        value={text}
        onChangeText={setText}
      />
      <View style={styles.button}>
        <Image source={require('../assets/icons/add_white/add_white.png')} />
      </View>
    </View>
  );
}

...

TextInput에 속성 onChangeText로 내용이 변할때 마다 text값이 수정되도록 설정했다.

Console에 로그를 찍어보면 TextInput의 값이 변할 때마다 로그가 찍히는 것을 확인할 수 있다.