TextInput

• 키보드를 이용해서 앱에 텍스트 넣을 때 사용하는 컴포넌트
• core componen
• props : auto-correction, auto-capitalization, placeholder text, 키보드 타입 등

onChangeText : 사용자의 input 값 변경 시 호출
onSubmitEditing : 텍스트 제출 시 호출될 함수를 받는다
onFocus

• 어떤 props들은 muliline에 따라 사용 가능한지 여부가 달라진다
• multiline=true : 한쪽에서만 적용된 border styles 사용 불가능
  그러므로 병행하고 싶으면 View 안에 TextInput을 사용해서 View에 스타일을 넣어 줘야 한다
• 디폴트 : 바닥에 border가 있다
  padding: 시스템에서 제공하는 bg-img에 의해 패딩이 결정되고 변경 불가능
  그러므로 해결 방법
  1. height를 명시적으로 설정하지 않거나
  2. border의 display를 없애는 방식 : ex.underlineColorAndroid to transparent.

cf. Android text selection에서 주의할 점

Note that on Android performing text selection in an input can change the app's activity windowSoftInputMode param to adjustResize.
This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify windowSoftInputMode in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.

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

const PizzaTranslator = () => {
  const [text, setText] = useState('');
  //text가 계속 바뀌니까 state에 저장 
  
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text.split(' ').map((word) => word && '🍕').join(' ')}
        //띄어쓰기는 피자로 번역하지 않기 위해 && 사용 
      </Text>
    </View>
  );
}

export default PizzaTranslator;