react-native-vector-icons의 아이콘은 다음과 같이 사용할 수 있습니다.

import Icon from 'react-native-vector-icons/MaterialIcons';
const deleteIcon = <Icon name="delete" size={32} color="red" />;

import하는 부분의 'react-native-vector-icons/MaterialIcons'에서 MaterialIcons 대신 다른 폰트를 사용할 수도 있습니다. Icon 컴포넌트의 name 부분에 검색해서 확인한 아이콘의 이름을 넣으면 됩니다. size 및 color Props를 사용해 아이콘의 크기 및 색상을 변경할 수도 있습니다.

자, 그러면 이 컴포넌트를 TodoItem 컴포넌트에서 텍스트의 우측 부분에 렌더링해봅시다.

components/TodoItem.js

import React from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

function TodoItem({id, text, done, onToggle}) {
  return (
    <View style={styles.item}>
      <TouchableOpacity onPress={() => onToggle(id)}>
        <View style={[styles.circle, done && styles.filled]}>
          {done && (
            <Image
              source={require('../assets/icons/check_white/check_white.png')}
            />
          )}
        </View>
      </TouchableOpacity>
      <Text style={[styles.text, done && styles.lineThrough]}>{text}</Text>
      {done ? (
        <Icon name="delete" size={32} color="red" />
      ) : (
        <View style={styles.removePlaceholder} />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  (...)
  removePlaceholder: {
  width: 32,
  height: 32,
  },
});

export default TodoItem;