Search code examples
reactjsreact-nativereact-native-textinput

how to get text from MKTextField


Hello I am using a floating label (MKTextField) in React native app. I want to know how to get the text from it. I tried to look online but could not find it.

Using react native material kit "react-native-material-kit": "^0.5.1",

could you please suggest

Thanks R

<TextfieldWithFloatingLabel_Card ref="tiNumber"/>

const TextfieldWithFloatingLabel_Card = MKTextField.textfieldWithFloatingLabel()
.withPlaceholder('Last 4 digits of your dopay card')
.withStyle(styles.textfieldWithFloatingLabel)
.withTextInputStyle({flex: 1})
.withFloatingLabelFont({
  fontSize: 12,
  fontWeight: '200',
  color: colors.primaryColor
})
.withKeyboardType('numeric')
.build();

Solution

  • There are multiple props for getting text. consider below code

    <TextfieldWithFloatingLabel_Card ref="tiNumber"/>
    
    const TextfieldWithFloatingLabel_Card = MKTextField.textfieldWithFloatingLabel()
    .withPlaceholder('Last 4 digits of your dopay card')
    .withStyle(styles.textfieldWithFloatingLabel)
    .withTextInputStyle({flex: 1})
    .withFloatingLabelFont({
      fontSize: 12,
      fontWeight: '200',
      color: colors.primaryColor
    })
    .withKeyboardType('numeric')
    .withOnEndEditing((e) => console.log('EndEditing', e.nativeEvent.text))
    .withOnSubmitEditing((e) => console.log('SubmitEditing', e.nativeEvent.text))
    .withOnTextChange((e) => console.log('TextChange', e))
    .withOnChangeText((e) => console.log('ChangeText', e))
    .build();