이 코드처럼 JSX를 특정 상수에 담아뒀다가 {} 안에 감싸서 여러 번 보여줄 수 있습니다.

코드를 모두 정리했으니 이제 버튼을 눌렀을 때 텍스트를 비워보겠습니다. 다음과 같이 onPress라는 함수를 만들어 TouchableOpacity와 TouchableNativeFeedback 컴포넌트에 Props로 설정해주세요.

components/AddTodo.js

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

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

  const onPress = () => {
    setText('');
    Keyboard.dismiss();
  };

  const button = (
    <View style={styles.buttonStyle}>
      <Image source={require('../assets/icons/add_white/add_white.png')} />
    </View>
  );

  return (
    <View style={styles.block}>
      <TextInput
        placeholder="할일을 입력하세요."
        style={styles.input}
        value={text}
        onChangeText={setText}
      />
      {Platform.select({
        ios: (
          <TouchableOpacity activeOpacity={0.5} onPress={onPress}>
            {button}
          </TouchableOpacity>
        ),
        android: (
          <View style={styles.circleWrapper}>
            <TouchableNativeFeedback onPress={onPress}>
              {button}
            </TouchableNativeFeedback>
          </View>
        ),
      })}
    </View>
  );
}

(...)

onPress 함수에서 Keyboard.dismiss();는 현재 나타난 키보드를 닫습니다.

이제 텍스트를 입력한 다음에 버튼을 눌러보세요. 텍스트의 내용이 비워졌나요?