title: Textinput with variable Placeholder and clear on buttonclick
body: <p>im a little stuck here in want to have a textinput with the last value commited set as placeholder</p>
  <p>and a button, which</p>
  <ul>
  <li>sets the text to the placeholder variable</li>
  <li>clears the textinput text</li>
  <li>and gives the text from the input to some other function</li>
  </ul>
  <p>my code so far:</p>
  <pre><code>export default class FirstScreen extends Component{
    state = {
    'Username': ''
  }   
  componentDidMount = () =&gt; AsyncStorage.getItem('Username').then((value) =&gt; 
  this.setState({ 'Username': value }))
  
  setUsername = (value) =&gt; {
   AsyncStorage.setItem('Username', value);
   this.setState({ 'Username': value });
  }
  
  
  // initialize empty text for textinputs
   constructor(props) {
   super(props);
     this.state = {text: '',text2: ''};
   }
  
    render(){
      return(
  
  
  
   {/*some ohther code*/}
  
  
  
    &lt;TextInput
        placeholder= {this.state.Username}
        onChangeText={(value) =&gt; this.setState({text: value})}
        //onFocus={({text}) =&gt; this.setUsername(text)}
        value={this.state.text}
        style={{ width: 200, height: 44, padding: 8 }}
      /&gt;
  
        &lt;Button
          title={&quot;Login&quot;}
          onPress={this.clearAndLogin}
          color=&quot;rgb(0, 38, 100)&quot;
         /&gt;
  
  
  
  
  clearAndLogin= () =&gt; {
    this.props.navigation.navigate('Home');
    {/*I gave up on other code here because nothing worked*/}
  };
  </code></pre>
  <h2>edit 07.06.2018 16:39</h2>
  <p>thanks to <a href="https://stackoverflow.com/users/7012018/shubhanu-sharma">Shubhanu Sharma</a> the problem ist mostly done but dtere is a little kink left</p>
  <h3>behaviour at the moment:</h3>
  <p>(values are simplyfied for best possible understanding)</p>
  <ol>
  <li><p>App starts</p>
  <p>Values:</p>
  <pre><code> Asyncstorage-value: &quot;user1&quot;
   Placeholder-value: &quot;user1&quot; (Placeholder loaded correctly from AS)
   Usertextinput-value: &quot;&quot;
  </code></pre>
  </li>
  <li><p>User2 is typing its credentials</p>
  <p>Values:</p>
  <pre><code> Asyncstorage-Value: &quot;user1&quot;
   Placeholder-value: &quot;user1&quot;
   Usertextinput: &quot;user2&quot;
  </code></pre>
  </li>
  <li><p>User2 clicks loginbutton</p>
  <p>Values:</p>
  <pre><code> Asyncstorage-Value: &quot;user2&quot;
   Placeholder-value: &quot;user1&quot;
   Usertextinput: &quot;&quot;
  </code></pre>
  </li>
  <li><p>User2 uses app .... and after that user2 loggs out and shows login-screen again</p>
  <p>Values:</p>
  <pre><code> Asyncstorage-Value: &quot;user2&quot;
   Placeholder-value: &quot;user1&quot; (here ist the mistake, should be &quot;user2&quot;)
   Usertextinput: &quot;&quot;
  </code></pre>
  </li>
  </ol>
  <p>(if I would restart the whole app it would load the correct placeholder but not if i am just sining out (navigate to that screen))</p>
  <h3>desired behaviour</h3>
  <ol>
  <li><p>App starts</p>
  <p>Values:</p>
  <pre><code> Asyncstorage-value: &quot;user1&quot;
   Placeholder-value: &quot;user1&quot; (Placeholder loaded correctly from AS)
   Usertextinput-value: &quot;&quot;
  </code></pre>
  </li>
  <li><p>User2 is typing its credentials</p>
  <p>Values:</p>
  <pre><code> Asyncstorage-Value: &quot;user1&quot;
   Placeholder-value: &quot;user1&quot;
   Usertextinput: &quot;user2&quot;
  </code></pre>
  </li>
  <li><p>User2 clicks loginbutton</p>
  <p>Values:</p>
  <pre><code> Asyncstorage-Value: &quot;user2&quot;
   Placeholder-value: &quot;user2&quot;
   Usertextinput: &quot;&quot;
  </code></pre>
  </li>
  <li><p>User2 uses app .... and after that user2 loggs out and shows login-screen again</p>
  <p>Values:</p>
  <pre><code> Asyncstorage-Value: &quot;user2&quot;
   Placeholder-value: &quot;user2&quot; (!!!!)
   Usertextinput: &quot;&quot;
  </code></pre>
  </li>
  </ol>
  <p>i hope its now more understandable thanks for all!!</p>