이제 물결 효과가 원 안에서만 나타납니다.

앞의 코드를 보면 <View style={styles.buttonStyle}> 부분을 반복해서 작성했는데요. 이 부분을 리팩토링해보겠습니다. 추가로 삼항연산자가 아닌 Platform.select를 사용하는 코드로 전환해보겠습니다.

components/AddTodo.js

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

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

  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}>{button}</TouchableOpacity>,
      android: (
        <View style={styles.circleWrapper}>
          <TouchableNativeFeedback>{button}</TouchableNativeFeedback>
        </View>
      ),
    })}
    </View>
  );
}

(...)