TouchableOpacity 컴포넌트에서 설정한 activeOpacity Props는 터치했을 때 적용할 투명도입니다. 값을 설정하지 않으면 기본값은 0.2로 설정됩니다.

▲ 그림 3-33 TouchableOpacity 사용

안드로이드에서는 TouchableOpacity 대신 TouchableNativeFeedback을 사용해봅시다. 이때 주의할 점이 있습니다. 해당 컴포넌트를 iOS에서 사용하면 오류가 발생하기 때문에 조건부 렌더링을 잘 처리해야 합니다.

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>
    ) : (
      <TouchableNativeFeedback>
        <View style={styles.buttonStyle}>
          <Image
            source={require('../assets/icons/add_white/add_white.png')}
          />
        </View>
      </TouchableNativeFeedback>
    )}
    </View>
  );
}

(...)