How do I read an already populated TextInput in React-Native?

Question

I have a TextInput below : Normally I am able to read TextInput when there is a change , the problem is the TextInput for password is populated with a default password . So the user may not need to edit(change) it - therefore not triggering onChangeText method .

import React,{Component} from 'react'
import {View, Text, TextInput } from 'react-native'

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = { 
      username: '', 
      password: 12345 
    }
  }

  onChangeText = (key, val) => {
    this.setState({ [key]: val})
  }

  render() { 
    return (
      <View style={styles.container}>
          <Text>Login Form</Text>
          <TextInput
            placeholder='Username'
            onChangeText={val => this.onChangeText('username', val)}
            style={styles.input}
            value={this.state.username}
          />
          <TextInput
            placeholder='Password'
            onChangeText={val => this.onChangeText('password', val)}
            style={styles.input}
            value={this.state.password}
            secureTextEntry={true}
          />      
      </View>
    );
  }
}

Now , my question is how do I read TextInputs which are not being changed ?

Answer 1

change TextInput value prop to defaultValue . i think that might work. TextInput value prop does't allow to modify existing value.

 <TextInput placeholder='Password' onChangeText={val => this.onChangeText('password', val)} style={styles.input} defaultValue={this.state.password} secureTextEntry={true} /> 

Answer 2

There is a way to get TextInput value directly from the component via refs .

If the input receives text from value prop you can use _lastNativeText method as in the example below.

export default class App extends Component {

  state = {
    text: 'Hello!'
  }

  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.printTextInputValue();
  }

  printTextInputValue = () => {
    const input = this.inputRef.current;
    console.log(input._lastNativeText);
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput value={this.state.text} ref={this.inputRef} />
        <Button onPress={this.printTextInputValue} title="Get input value"  />
      </View>
    );
  }
}

If the TextInput uses defaultValue prop use _getText method to read the initial value.

export default class App extends Component {

  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.printDefaultInputValue();
  }

  printDefaultInputValue = () => {
    const input = this.inputRef.current;
    console.log(input._getText());
  }

  printTextInputValue = () => {
    const input = this.inputRef.current;
    console.log(input._lastNativeText);
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput defaultValue="Hello Default!" ref={this.inputRef} />
        <Button onPress={this.printTextInputValue} title="Get input value"  />
      </View>
    );
  }
}

Do note however that these methods are not officially documented and may be removed in future versions of React Native, so use them at your own discretion.