components/TransparentCircleButton.js

import React from 'react';
import {Platform, Pressable, StyleSheet, View} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

function TransparentCircleButton({name, color, hasMarginRight, onPress}) {
  return (
    <View
      style={[styles.iconButtonWrapper, hasMarginRight && styles.rightMargin]}>
      <Pressable
        style={({pressed}) => [
          styles.iconButton,
          Platform.OS === 'ios' &&
            pressed && {
              backgroundColor: '#efefef',
            },
        ]}
        onPress={onPress}
        android_ripple={{color: '#ededed'}}>
        <Icon name={name} size={24} color={color} />
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  iconButtonWrapper: {
    width: 32,
    height: 32,
    borderRadius: 16,
    overflow: 'hidden',
  },
  iconButton: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 32,
    height: 32,
    borderRadius: 16,
  },

  rightMargin: {
    marginRight: 8,
  },
});

export default TransparentCircleButton;

이 컴포넌트에서는 4개의 Props를 받아오도록 설정했습니다.

그리고 컴포넌트를 분리하는 과정에서 iOS의 경우 버튼을 클릭할 때 배경색을 설정하도록 처리해줬습니다.

컴포넌트 작성이 끝났으면 기존에 만든 버튼들을 방금 만든 컴포넌트로 대체해주세요.