TextField - ClearButton customizations

[zrina1314]

I need to customize the clean button component because I'm using svg ICONS

[Inbal-Tish]

@zrina1314 Hi. What do you need to change in the ClearButton? Is passing buttonProps instead of custom element can be enough?

[zrina1314]

My intent is to replace the default ClearButton icon。 But now it seems you can't replace ICONS, just style them. Even ICONS aren't styled perfectly.

1. Allow me to change ICONS and icon styles

 return (
    <View reanimated style={style} testID={`${testID}.container`}>
      <Button
        link
        iconSource={Assets.internal.icons.xFlat}     ////  I want to change this
        iconStyle={styles.clearIcon}                    ////  I want to change this
        onPress={clear}
        hitSlop={hitSlop}
        accessible={hasValue}
        accessibilityLabel={'clear'}
        testID={testID}
      />
    </View>
  );

OR

2. Allow me to replace Button with my own Icon component // The IconFont component is a 'react-native-vector-icons' wrapper component, which is a Font icon

 return (
    <View reanimated style={style} testID={`${testID}.container`}>
      <Button
        link
       
        iconSource={<IconFont name='icon_m_clear' size={20} color={Colors.grey100}   onPress={clear}/> }       ////  I want to change this
        onPress={clear}
        hitSlop={hitSlop}
        accessible={hasValue}
        accessibilityLabel={'clear'}
        testID={testID}
      />
    </View>
  );