코드를 이와 같이 작성하면 안드로이드에서 터치했을 때 물결 효과가 나타납니다. 그런데 지금과 같이 버튼이 사각형이 아닌 원형일 경우 터치했을 때 물결 효과가 원의 바깥까지 나타납니다.

▲ 그림 3-34 원 영역을 침범한 물결 효과

이럴 때는 TouchableNativeFeedback 컴포넌트를 다음과 같이 View 컴포넌트로 감싸고, 해당 컴포넌트에 borderRadius와 overflow 스타일을 설정해주세요. overflow 값을 hidden으로 하면 지정한 영역 외 바깥 영역이 화면에 나타나지 않습니다.

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('');

  return (
    <View style={styles.block}>
      <TextInput
        placeholder="할일을 입력하세요."
        style={styles.input}
        value={text}
        onChangeText={setText}
      />
      {Platform.OS === 'ios' ? (
        <TouchableOpacity activeOpacity={0.5}>
          <View style={styles.buttonStyle}>
            <Image
              source={require('../assets/icons/add_white/add_white.png')}
            />
          </View>
        </TouchableOpacity>
      ) : (
        <View style={styles.circleWrapper}>
          <TouchableNativeFeedback>
            <View style={styles.buttonStyle}>
              <Image
                source={require('../assets/icons/add_white/add_white.png')}
              />
            </View>
          </TouchableNativeFeedback>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  (...)
  circleWrapper: {
    overflow: 'hidden',
    borderRadius: 24,
  },
});

export default AddTodo;