React Native Saving Input Data

Question

I would like to have two text fields:

• one that accepts a title
• another that accepts a body (i.e. more text)

...and a submit button:

• that saves the title and body that was entered, when clicked

I have researched TextInput, AsyncStorage, 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.

Here is what I have so far:

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 (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Walker app
        </Text>
        <TextInput
          placeholder="Title"
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChange={(event) => this.setState({messageTitle: event.nativeEvent.text})}
          value={this.state.messageTitle} />
        <TextInput
          placeholder="Body"
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChange={(event) => this.setState({messageBody: event.nativeEvent.text})}
          value={this.state.messageBody} />
        <TouchableHighlight onPress={this._onPressButton} style={styles.button}>
          <Text style={styles.buttonText}>See all posts</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

// styles here

AppRegistry.registerComponent('PostAndSave', () => PostAndSave);

I can type into the input fields but cannot figure AsyncStorage out, or how to post new messages as opposed to the overwriting the existing one. I'm mainly looking for help in that area - below I have posted my goal incase the question of why I want to do this comes up.

Goal:

The saved 'post' should then be printed to a view, where it can be pressed (tapped?) to display the contents of the body.

Each time a title and body are submitted they should be saved as a new 'post' and not overwritten.

Answer 1

If you want to use Async for this you'll need a function to save the data:

_onPressButton () {
  // Get the data
  let title = this.state.messageTitle
  let message = this.state.messageBody

  // Retrieve the existing messages
  AsyncStorage.getItem('messages', (res) => {
    var messages

    // If this is the first time, set up a new array
    if (res === null) {
      messages = []
    }else {
      messages = JSON.parse(res)
    }

    // Add the new message
    messages.push({
      title: title,
      message: message
    })

    // Save the messages
    AsyncStorage.setItem('messages', JSON.stringify(messages), (res) => {})
  }
}

And you'll want to bind this to your instance:

<TouchableHighlight onPress={this._onPressButton.bind(this)} style={styles.button}>

And to retrieve your messages for use later:

AsyncStorage.getItem('messages', (res) => {
  this.setState({
    messages: res
  })
})