Tcomb-form-native: can't change the style for the textinput border

[pgmemk]

I tried to change the style for the textbox in a way that the border is thinner and only the bottom border is showing. The thinner part worked but not the hiding

  textbox: {
    normal: {
      ...
      borderTopColor: '#ffffff',
      borderBottomColor: BORDER_COLOR,
      borderLeftColor: '#ffffff',
      borderRightColor: '#ffffff',
      borderWidth: 0.5,
      marginBottom: 5
    },

[gcanti]

Hi,
Seems a problem upstream https://github.com/facebook/react-native/issues/1509

[alvaromb]

There's a workaround @pgmemk, add the border to the parent view: https://github.com/gcanti/tcomb-form-native/issues/44#issuecomment-167551097

[abuammar]

when i use multiline:{false}, its working fine to get underline to textbox but it is showing error in android platform. "error while updating property 'multiline of a view managed by : AndroidTextInput'
var options = {
stylesheet:mergeFormCss({

textbox: {
   normal: {
     width:300,
     color:'black',
     height:50,
     paddingVertical:15,
     paddingLeft:15,
     underlineColor:'gray',
     underlineColorAndroid: 'gray',
     underlineColorios: 'gray',
    borderBottomWidth:1,
    borderBottomColor:'gray',
    borderWidth:0,
    //Platform.OS === 'ios' ? 'multiline:false': null,
   },
   error: {
     width:300,
     color:'red',
     height:50,
     paddingVertical:15,
     paddingLeft:15,
     borderBottomColor:'gray',
     underlineColorAndroid: 'transparent',
     underlineColorIos: 'transparent',
     borderRadius:5
    //  borderWidth:0,
   }
 },
 underline:{
   normal:{
     borderColor:'red',
   },
 },
 errorBlock: {
  color: 'white'
},

}),
fields: {
current_email: {
placeholder : t.t('Current Email'),
auto: 'placeholders',
error: t.t('current is empty'),

},
new_email: {
  placeholder : t.t('New Email Address'),
  auto: 'placeholders',
  error: t.t('new email is empty'),
  underlineColorAndroid: 'transparent',
  underlineColor:'gray',
  **multiline:{ false },**

},
confirm_new_email: {
  placeholder : t.t('Confirm New Email Address'),
  auto: 'placeholders',
  error: t.t('Confirm new email address is empty'),
  underlineColorAndroid: 'transparent',
  underlineColor:'gray',
  **multiline:{ false },**
},

}
};

[abuammar]

this solved my problem

var options = {
stylesheet:mergeFormCss({
textbox: {
normal: {
width:300,
color:'black',
height:50,
paddingVertical:15,
paddingLeft:15,
underlineColor:'gray',
underlineColorAndroid: 'gray',
underlineColorios: 'gray',
borderBottomWidth:1,
borderBottomColor:'gray',
// borderBottomWidth:1,
// borderBottomColor:'gray',
borderWidth:0,
},
error: {
width:300,
color:'red',
height:50,
paddingVertical:15,
paddingLeft:15,
borderBottomColor:'gray',
underlineColorAndroid: 'transparent',
underlineColor: 'gray',
// borderBottomColor:'gray',
//borderRadius:5
borderWidth:0,
}
},
underline:{
normal:{
borderColor:'red',
},
},
errorBlock: {
color: 'white'
},
}),
fields: {
current_password: {
placeholder : t.t('Old Password'),
auto: 'placeholders',
error: t.t('current password is empty'),
secureTextEntry:true,
...Platform.select({
ios: {
multiline: {false},
},

                  }),
},
new_password: {
  placeholder : t.t('New Password'),
  auto: 'placeholders',
  error: t.t('new password is empty'),
  secureTextEntry:true,
  ...Platform.select({
                        ios: {
                          multiline: {false},
                        },

                  }),
},
confirm_new_password: {
  placeholder : t.t('Confirm New Password'),
  auto: 'placeholders',
  error: t.t('Confirm new password is empty'),
  secureTextEntry:true,
  **...Platform.select({
                        ios: {
                          multiline: {false},
                        },

                  }),**
},

}
};