Remove border of react-native-material-textfield

Question

I'm using react-native-material-textfield instead of react-native TextInput.

some problems:

1) How can I remove border right/left/top?

2) How can I change the color/font-size of the label( here is phone number)?

I tried (inputContainerStyle,labelTextStyle,titleTextStyle) to change but it dose not affect.

  <OutlinedTextField
    autoCorrect={false}
    enablesReturnKeyAutomatically={true}
    label='Phone number'
    keyboardType='phone-pad'
    formatText={formatText}
    labelTextStyle={{color:'red'}}
    onSubmitEditing={onSubmit}
    ref={fieldRef}
  />

try this react-native-materialui-textfield – Ravi Kumar Karunanithi Mar 29 '20 at 07:21 — Ravi Kumar Karunanithi, Mar 29 '20 at 07:21

score 0 · Answer 1 · answered Dec 15 '20 at 02:42

You shouldn't be using 'OutlinedTextField' for that - use 'TextField'.

Use the param 'baseColor' to change the color of the label when in default state, 'tintColor' to change color when in focused state, 'errorColor' to change color of error, and 'textColor' to change color of typing text.

<TextField
    autoCorrect={false}
    enablesReturnKeyAutomatically={true}
    label='Phone number'
    keyboardType='phone-pad'
    formatText={formatText}
    baseColor='red'
    tintColor='red'
    onSubmitEditing={onSubmit}
    ref={fieldRef}
  />

Remove border of react-native-material-textfield

1 Answers1