react-native-material-textfield Doesn't work as a controlled input

Question

I'm using "react-native-material-textfield" for text inputs. I have a View to edit user details it fetch values from api when mounting and set it to state. But after upgrading "react-native-material-textfield" to "0.16.1" that original first name value is not shown in the text input after mounting. What I'm doing wrong here ?

constructor(props) {
    super(props);
    this.state = {
      firstName: '',
    
    };
  }

componentDidMount(props) {
   APIcall().then(data)=>{
    this.setState({
      firstName: data.firstName
    });
  }
}

<TextField
              label="First Name"
              value={this.state.firstName}
              onChangeText={firstName => this.setState({firstName})}
            />

score 1 · Answer 1 · answered Sep 01 '20 at 10:13

I ran into this after upgrading. In version 0.13.0 of the library, it switched to being a fully uncontrolled component according to the release notes.

Changed

defaultValue prop becomes current value on focus

value prop provides only initial value

Based on the current usage docs, there is now a method exposed for setting & getting the value using a ref to the component:

let { current: field } = this.fieldRef;

console.log(field.value());

(Personally, while I can maybe understand this improving performance because typing can often be fast for state updates, I'm not a fan of uncontrolled components since I want my state to drive the UI. I feel like this makes other live updates for validation very fiddly.)

I used `onLayout={this.loadMyInitialValue}` in the TextField object as it is called upon the component is rendered the first time. — Behnam Kamrani, Apr 14 '21 at 21:04

score 0 · Answer 2 · answered Nov 06 '20 at 14:56

In react-native-material-textfield, 'value' prop acts as default. To update the value you need to use ref. Get the ref using React.createRef(), then use setValue function

import React, { Component } from 'react';
import { TextField } from 'react-native-material-textfield';
import { View, Button } from 'react-native';

export default class TestComponent extends Component {
  textField = React.createRef<TextField>();
  constructor(props) {
    super(props);
    this.state = {
      value: 'check',
    };
  }

  onChangeText = () => {
    // Send request via API to save the value in DB
  };

  updateText = () => {
    if (this.textField && this.textField.current) {
      this.textField.current.setValue('test');
    }
  };

  render() {
    return (
      <View>
        <TextField
          label="Test value"
          value={this.state.value}
          onChangeText={this.onChangeText}
          ref={this.textField}
        />
        <Button onPress={this.updateText} />
      </View>
    );
  }
}

Keshav Gera · Answer 3 · 2020-11-25T18:33:38.717

    Touch area in TextView

https://github.com/n4kz/react-native-material-textfield/issues/248

    react-native-material-textfield 
    
    labelTextStyle={{ position: 'absolute', left: '100%' }}
    
     label: {
        fontFamily: fonts.Muli_SemiBold,
        fontSize: 14,
        letterSpacing: 0.1,
            color: colors.gray90,
            position: 'absolute', left: '100%'
      },

 <TextField
    style={style.textInputRight}
    labelTextStyle={style.label}
    labelFontSize={16}}
    onChangeText={value => onTextChange(value)}
                />

react-native-material-textfield Doesn't work as a controlled input

3 Answers3