Native Base change floatlabel input bottom outline color

Question

I am using react native with native base theme engine. I customized most of the native base elements. I am trying to change the color of border which i pointed in above picture.

I tried to change in components/Item.js

".floatingLabel": {
  "NativeBase.Input": {
    height: 50,
    top: 8,
   borderColor: 'red'
  },
  "NativeBase.Label": {
    top: 8
  },
  "NativeBase.Icon": {
    top: 6
  }
},

And tried to add border manually in Input.js but its not working. There is not much of help online for this. Is this possible?

Answer 1

If you want to change bottom border color of all floating label Items, add borderColor inside ".floatingLabel":{}

".floatingLabel": {
  "NativeBase.Input": {
    height: 50,
    top: 8
  },
  "NativeBase.Label": {
    top: 8
  },
  "NativeBase.Icon": {
    top: 6
  },
  borderColor: "blue"
},

For a single item just override the style of the <Item/>

<Item floatingLabel style={{ borderColor:"blue" }}>
     <Label>Username</Label>
     <Input />
</Item>