I am using a custom item which displays an underline on some Android phones. I want to get rid of that underline. I'm trying to use the underlineAndroidProperty and as soon as I save changes, the underline is gone. However, when I navigate to other screens and come back, the changes are no longer applied and the underline is still there. I tested this on multiple screens but somehow the underline exists always. How else can I get rid of the underline?
type SearchInputProps = { iconName: string; addressType: string; textChangeHandler: (fieldName: string, text: string) => void; handleFocus: (fieldName: string) => void; userTypedAddress: string; placeholder: string;};export const SearchInput: React.FunctionComponent<AddressSearchInputProps> = ({ addressType, iconName, textChangeHandler, handleFocus, userTypedAddress, placeholder,}) => { return (<Item rounded style={styles.searchField}><Icon name={iconName} color="#31C283" style={styles.searchIconStyles} /><Input underlineColorAndroid="transparent" placeholder={placeholder} onChangeText={(text) => { textChangeHandler(addressType, text); }} autoFocus={true} onFocus={() => { handleFocus(addressType); }} style={styles.searchText} value={userTypedAddress} /></Item> );};const styles = StyleSheet.create({ searchField: { backgroundColor: 'white', width: moderateScale(300, 0.3), height: verticalScale(40), marginVertical: moderateScale(3), borderRadius: verticalScale(10), }, searchIconStyles: { fontSize: moderateScale(15), paddingHorizontal: moderateScale(10, 0.2), color: '#20CA86', }, startingSearchIconStyles: { fontSize: moderateScale(15), paddingHorizontal: moderateScale(12, 0.5), color: '#20CA86', }, searchText: { fontSize: moderateScale(14), },});