backgroundColor hiding the clearButtonMode's X in Input of react-native-elements

Question

  <Input
    autoFocus
    containerStyle={styles.search}
    placeholder="Search..."
    onChangeText={this.Search}
    inputContainerStyle={{ borderBottomWidth: 0 }}
    clearButtonMode="always"
    placeholderTextColor={theme.firstColor.hex}
  />

const styles = StyleSheet.create({
  search: {
    backgroundColor: "white", // <--- This is hiding the X button
    paddingLeft: 20,
    borderRadius: 10,
    borderColor: theme.secondColor,
    width: 300,
    height: 50,
  }
});

Basically, backgroundColor: "white" is hiding the clearButtonMode's X button, is there any workaround for this?

Answer 1

As my researching, react-native-elements does not support Input clear button styling, yet.

So, I think you should try to customize it, something like this:

import {Icon, Input} from 'react-native-elements';

<Input
    ...
    rightIcon={
        <Icon
            containerStyle={{
                marginRight: normalize(10)
            }}
            name={'ios-close'} type={'ionicon'} color="#7384B4" size={22}
            onPress={() => {
                this.setState({email: ''});
            }}
        />
    }
/>

Hope it help ^^.