react native elements input border bottom issue, with radius

Question

How can I change the bottom border of an Input with RNElements, so that it matches the other sides?

styling:

inputStyle: {
        borderWidth: 0,
        borderLeftWidth: 1,
        borderRightWidth: 1,
        borderTopWidth: 1,
        borderBottomWidth: 1, // toggle to 0 doesn't help
        borderRadius: 5,
        borderBottomLeftRadius: 5,
        borderBottomRightRadius: 5,
      },

I see the underlying RN Input has a note about this:

TextInput has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this are to either not set height explicitly, in which case the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColorAndroid to transparent.

I have tried other recommendations from this forum, and also not setting a height, setting default underlineColorAndroid: 'transparent', on my theme, and borderWidth: 0, but no success.

Answer 1

    <Input
      containerStyle={{ borderWidth: 0 }}
      inputContainerStyle={{
        borderWidth: 0,
        borderLeftWidth: 1,
        borderRightWidth: 1,
        borderTopWidth: 1,
        borderBottomWidth: 2,
        borderRadius: 5,
        borderBottomLeftRadius: 5,
        borderBottomRightRadius: 5
      }}
      placeholder="Email"
    />

I think you use inputStyle={{}}. Let's give a try to inputContainerStyle={{}}.