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

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