React Native Example App.js

App.js

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TextInput, Button, FlatList, Image } from 'react-native';
import { AsyncStorage } from 'react-native';

function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

/**
 * A computer language has 3 main parts:
 * 1. Syntax
 * 2. A Static environment
 * 3. A Dynamic environment
 *
 * The syntax the format of the input. The struction of the
 * brackets and equals which map to operations in code.
 *
 * The static environment is what you can reason about by reading
 * the source code. What you see in the static environment doesn't
 * change. A number is a number, a function is a function.
 *
 * The dynamic environment is what happens at runtime. It is the
 * running state of your application.
 *
 * Javascript is said to be a "dynamic" language, because it
 * tends to resolve a lot of data types and function scopes at
 * runtime in the dynamic environment, instead of in the static
 * environment. This makes the syntax and logical comparison a bit
 * simpler. But it also makes some things a bit more tricky.
 */

/**
 * Data types:
 * Number:    123
 * String:    'Words in quotes'
 *            "Double Quotes work too"
 *            `Backticks are "template" strings - more later`
 * Boolean:   true|false
 * Object:    { objectKey: "Any value - string in this case" }
 * Array:     [ "A list", "of values", 123, "Can be mixed type - not recommended" ]
 * Function:  A type you can "call".
 */

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 40
  },
  flatListItem: {
    display: 'flex',
    flexDirection: 'row',
    padding: 6,
    justifyContent: "space-between",
    width: '100%'
  },
  item: {
    textAlign: 'left'
  },
  theList: {
    width: '100%'
  },
  textWrapper: {
    display: 'flex',
    flexDirection: 'row',
    paddingLeft: 10
  },
  textInput: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    flex: 9
  },
  textButton: {
    flex: 1
  }
})

const makeFinishedEmoji = (finished) =>
  (finished)
    ? "🅱️"
    : "🤯"

/**
 * Get list of items for the App component (getAllKeys)
 * Inside FlatListItem, we'll pull out the object from persistent storage (getItem())
 */

function FlatListItem ({ item }) {
  const [todo, setTodo] = useState({})

  useEffect(() => {
    AsyncStorage.getItem(item.key).then((result) => setTodo(JSON.parse(result)))
  }, [item.key])

  async function handleTouchStart (event) {
    todo.finished = !todo.finished
    await AsyncStorage.setItem(item.key, JSON.stringify(todo))
    const result = await AsyncStorage.getItem(item.key)
    setTodo(JSON.parse(result))
  }

  if (!todo) {
    return <div>Loading</div>
  }

  return (
    <View style={styles.flatListItem} onTouchStart={handleTouchStart}>
      <Text>{makeFinishedEmoji(todo.finished)}</Text>
      <Text style={styles.item}> {todo.task}</Text>
      <Image
          source={{ uri: "https://images.unsplash.com/photo-1514852451047-f8e1d1cd9b64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3424&q=80" }}
          style={{
            width: 5049 / 100,
            height: 3112 / 100
          }}
        />
    </View>
  )
}

// Fixture
// AsyncStorage.setItem(
//   'test key 0',
//   JSON.stringify({
//     task: "Do my homework",
//     finished: true,
//     dueDate: "June 14, 2020"
//   })
// )
// AsyncStorage.setItem(
//   'test key 1',
//   JSON.stringify({
//     task: "Cook Dinner - Veggies",
//     finished: true
//   })
// )
// AsyncStorage.setItem(
//   'test key 2',
//   JSON.stringify({
//     task: "Wash the dishes",
//     finished: false
//   })
// )

export default function App () {
  const [todoList, setTodoList] = useState([])
  useEffect(() => {
    AsyncStorage.getAllKeys().then((result) => setTodoList(result))
  }, [])

  const [text, setText] = useState('')

  const handleNewTodo = async () => {
    await AsyncStorage.setItem(uuidv4(), JSON.stringify({
      task: text,
      finsihed: false
    }))
    const result = await AsyncStorage.getAllKeys()
    setTodoList(result)
    setText('')
  }

  return (
    <View style={styles.container}>
      <View style={styles.textWrapper}>
        <TextInput
          style={styles.textInput}
          onChangeText={text => setText(text)}
          text={text}
        />
        <Button
          style={styles.textButton}
          title="Add"
          onPress={handleNewTodo}
        />
      </View>
      <FlatList
        data={todoList}
        style={styles.theList}
        renderItem={({ item }) => <FlatListItem item={{ key: item }} />}
        ></FlatList>

      <Image
          source={{ uri: "https://images.unsplash.com/photo-1514852451047-f8e1d1cd9b64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3424&q=80" }}
          style={{
            width: 5049 / 20,
            height: 3112 / 20
          }}
        />
    </View>
  );
}