title: React Native Saving Input Data
body: <p>I would like to have two text fields:</p>
  
  <ul>
  <li>one that accepts a title</li>
  <li>another that accepts a body (i.e. more text)</li>
  </ul>
  
  <p>...and a submit button:</p>
  
  <ul>
  <li>that saves the title and body that was entered, when clicked</li>
  </ul>
  
  <p>I have researched <strong>TextInput</strong>, <strong>AsyncStorage</strong>, TouchableHighlight and Navigator components as well as a bunch of react-native tutorials. I can't seem to find any consistency - not even from the react-native docs.</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    AsyncStorage,
    TextInput,
    TouchableHighlight
  } from 'react-native';
  
  class PostAndSave extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        messageTitle: '',
        messageBody: ''
      }
    }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text style={styles.welcome}&gt;
            Walker app
          &lt;/Text&gt;
          &lt;TextInput
            placeholder="Title"
            style={{height: 40, borderColor: 'gray', borderWidth: 1}}
            onChange={(event) =&gt; this.setState({messageTitle: event.nativeEvent.text})}
            value={this.state.messageTitle} /&gt;
          &lt;TextInput
            placeholder="Body"
            style={{height: 40, borderColor: 'gray', borderWidth: 1}}
            onChange={(event) =&gt; this.setState({messageBody: event.nativeEvent.text})}
            value={this.state.messageBody} /&gt;
          &lt;TouchableHighlight onPress={this._onPressButton} style={styles.button}&gt;
            &lt;Text style={styles.buttonText}&gt;See all posts&lt;/Text&gt;
          &lt;/TouchableHighlight&gt;
        &lt;/View&gt;
      );
    }
  }
  
  // styles here
  
  AppRegistry.registerComponent('PostAndSave', () =&gt; PostAndSave);
  </code></pre>
  
  <p>I can type into the input fields but cannot figure AsyncStorage out, or how to post <em>new</em> messages as opposed to the overwriting the existing one. I'm mainly looking for help in that area - below I have posted my <em>goal</em> incase the question of why I want to do this comes up.</p>
  
  <p><strong>Goal:</strong></p>
  
  <p>The saved 'post' should then be printed to a view, where it can be pressed (tapped?) to display the contents of the body.</p>
  
  <p>Each time a title and body are submitted they should be saved as a new 'post' and not overwritten.</p>