React-Native Notes Application (Dumb Example)

Here is a super dumb note taking application example which you can write a note and read all notes. Sure, you need nativebase installed in order to run this application.

Read Tab
Write Tab

notes.db

CREATE TABLE "notes" (
	"id"	INTEGER PRIMARY KEY AUTOINCREMENT,
	"title"	TEXT,
	"body"	TEXT,
	"author"	TEXT,
	"created"	TEXT
)

PHP Backend – Insert

<?php

$title = $_POST['title'];
$body = $_POST['body'];
$author = $_POST['author'];
$created = date('h:i:s d/m/Y');

$db = new SQLite3('notes.db');
$stmt = $db->prepare("INSERT INTO notes (title,body,author,created) VALUES (:title,:body,:author,:created)");
$stmt->bindValue(':title', $title, SQLITE3_TEXT);
$stmt->bindValue(':body',$body, SQLITE3_TEXT);
$stmt->bindValue(':author',$author, SQLITE3_TEXT);
$stmt->bindValue(':created',$created, SQLITE3_TEXT);
$stmt->execute();

PHP Backend – Read

<?php
header('Content-Type: application/json; charset=utf-8');
header('Access-Control-Allow-Origin: *');

$db = new SQLite3('notes.db');
$results = $db->query('SELECT * FROM notes');
$json = array();

while ($row = $results->fetchArray(SQLITE3_ASSOC)) {
   $json[] = $row;
}

echo json_encode($json);

App.js

import React from 'react';
import { FlatList } from 'react-native';
import { Container, Header, Card, CardItem, Text, Body, Icon,
Tabs, Tab, Form, Item, Input, Button, Right } from 'native-base';
export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { dataSource: null, title: null, body: null, author: null}
    this.handleTitleChange = this.handleTitleChange.bind(this);
    this.handleBodyChange = this.handleBodyChange.bind(this);
    this.handleAuthorChange = this.handleAuthorChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleTitleChange(title) {
    this.setState({title: title});
  }
  handleBodyChange(body) {
    this.setState({body: body});
  }
  handleAuthorChange(author) {
    this.setState({author: author});
  }

  handleSubmit() {
    fetch('INSERT_BACKEND_URL', { 
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    headers: {
      'Content-Type' : 'application/x-www-form-urlencoded',
    },
    body: "title=" + this.state.title + "&body=" + this.state.body + "&author=" + this.state.author,
    });
  }
  componentDidMount() {
    setInterval(() => {
      return fetch('READ_BACKEND_URL')
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({
            dataSource: responseJson,
          }, function () {
          });
        })
        .catch((error) => {
          console.error(error);
        });
    }, 1000);
  }

  render() {
    return (
      <Container>
       <Header hasTabs />
       <Tabs>
        <Tab heading="Read">
      <FlatList
        data={this.state.dataSource}
        renderItem={({ item }) =>
          <Card>
            <CardItem header>
              <Text><Icon name="paper" /> {item.title}</Text>
            </CardItem>
            <CardItem>
              <Body>
                <Text>{item.body}</Text>
              </Body>
            </CardItem>
            <CardItem footer>
              <Text><Icon name="person" /> {item.author}</Text>
              <Right /><Text>{item.created}</Text>
            </CardItem>
          </Card>
        }
        keyExtractor={({ id }, index) => id}
      />
      </Tab>
      <Tab heading="Write">
      <Form onSubmit={this.handleSubmit}>
        <Item>
          <Input placeholder="title" onChangeText={this.handleTitleChange} />
        </Item>
        <Item>
          <Input placeholder="body" onChangeText={this.handleBodyChange} />
        </Item>
        <Item last>
          <Input placeholder="author" onChangeText={this.handleAuthorChange} />
        </Item>
          <Button onPress={this.handleSubmit}><Text>Save</Text></Button>
      </Form>
      </Tab>
      </Tabs>
      </Container>
    );

  }
}