react-native-elements searchbar set "cancel" string to icon - reactjs

Question

I want replace the "Cancel" Text on the Searchbar button (See a screenshot on the bottom) with an Icon (See the code on the bottom).
This it the render part with the default props:
render() {
const _a = this.props, { theme, cancelButtonProps, cancelButtonTitle, clearIcon, containerStyle, leftIconContainerStyle, rightIconContainerStyle, inputContainerStyle, inputStyle, placeholderTextColor, showLoading, loadingProps, searchIcon, showCancel } = _a, attributes = __rest(_a, ["theme", "cancelButtonProps", "cancelButtonTitle", "clearIcon", "containerStyle", "leftIconContainerStyle", "rightIconContainerStyle", "inputContainerStyle", "inputStyle", "placeholderTextColor", "showLoading", "loadingProps", "searchIcon", "showCancel"]);
const { hasFocus, isEmpty } = this.state;
const { style: loadingStyle } = loadingProps, otherLoadingProps = __rest(loadingProps, ["style"]);
const { buttonStyle, buttonTextStyle, color: buttonColor, disabled: buttonDisabled, buttonDisabledStyle, buttonDisabledTextStyle } = cancelButtonProps, otherCancelButtonProps = __rest(cancelButtonProps, ["buttonStyle", "buttonTextStyle", "color", "disabled", "buttonDisabledStyle", "buttonDisabledTextStyle"]);
return (<View style={StyleSheet.flatten([
styles.container,
{ backgroundColor: theme.colors.white },
containerStyle,
])}>
<Input testID="searchInput" renderErrorMessage={false} {...attributes} onFocus={this.onFocus} onBlur={this.onBlur} onChangeText={this.onChangeText} ref={(input) => {
this.input = input;
}} inputStyle={StyleSheet.flatten([styles.input, inputStyle])} containerStyle={{
paddingHorizontal: 0,
}} inputContainerStyle={StyleSheet.flatten([
styles.inputContainer,
{ backgroundColor: theme.colors.platform.ios.searchBg },
hasFocus && { marginRight: this.state.cancelButtonWidth },
inputContainerStyle,
])} leftIcon={renderNode(Icon, searchIcon, defaultSearchIcon(theme))} leftIconContainerStyle={StyleSheet.flatten([
styles.leftIconContainerStyle,
leftIconContainerStyle,
])} placeholderTextColor={placeholderTextColor || theme.colors.platform.ios.grey} rightIcon={<View style={{ flexDirection: 'row' }}>
{showLoading && (<ActivityIndicator key="loading" style={StyleSheet.flatten([{ marginRight: 5 }, loadingStyle])} {...otherLoadingProps}/>)}
{!isEmpty &&
renderNode(Icon, clearIcon, Object.assign(Object.assign({}, defaultClearIcon(theme)), { key: 'cancel', onPress: this.clear }))}
</View>} rightIconContainerStyle={StyleSheet.flatten([
styles.rightIconContainerStyle,
rightIconContainerStyle,
])}/>
<View style={StyleSheet.flatten([
styles.cancelButtonContainer,
{
opacity: this.state.cancelButtonWidth === null ? 0 : 1,
right: hasFocus ? 0 : -this.state.cancelButtonWidth,
},
])} onLayout={(event) => this.setState({ cancelButtonWidth: event.nativeEvent.layout.width })}>
<TouchableOpacity accessibilityRole="button" onPress={this.cancel} disabled={buttonDisabled} {...otherCancelButtonProps}>
<View style={[buttonStyle, buttonDisabled && buttonDisabledStyle]}>
<Text style={[
styles.buttonTextStyle,
buttonColor && { color: buttonColor },
buttonTextStyle,
buttonDisabled &&
(buttonDisabledTextStyle || styles.buttonTextDisabled),
]}>
{cancelButtonTitle}
</Text>
</View>
</TouchableOpacity>
</View>
</View>);
}
}
SearchBar.defaultProps = {
value: '',
cancelButtonTitle: 'Cancel',
loadingProps: {},
cancelButtonProps: {},
showLoading: false,
onClear: () => null,
onCancel: () => null,
onFocus: () => null,
onBlur: () => null,
onChangeText: () => null,
searchIcon: { name: 'ios-search' },
clearIcon: { name: 'ios-close-circle' },
showCancel: false,
};
Its looking like this:
Now I want to replace this "Cancel" with an Icon:
const defaultCancelIcon = (theme) => ({
type: 'material',
size: 25,
color: theme?.colors?.platform?.android?.grey,
name: 'arrow-back',
});
Since I havent worked with edited react-native-elements yet, I dont dont really know how to do this. I tried to change the defaultProps, but it didnt change anything. How can I do this?

Answer 1

type
<YourIconName />
instead of 'cancel', like
SearchBar.defaultProps = {
value: '',
cancelButtonTitle: <YourIconName />,
loadingProps: {},
...
};
I think it should work