React Native Workshop

App.js

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, FlatList, CheckBox } from 'react-native';

/**
 * 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 list = [
  {
    task: "Do my homework",
    finished: true,
    key: "0"
  },
  {
    task: "Cook Dinner - Veggies",
    finished: true,
    key: "2"
  },
  {
    task: "Wash the dishes",
    finished: false,
    key: "1"
  }
]

function FlatListItem ({ item }) {
  const [val, setValue] = useState(
    (item.finished)
      ? "🅱️"
      : "🤯"
  )

  function handleTouchStart (event) {
    item.finished = !item.finished
    if (item.finished)
    setValue(
      (item.finished)
        ? "🅱️"
        : "🤯"
    )
  }
  
  return (
    <View style={styles.flatListItem} onTouchStart={handleTouchStart}>
      <Text>{val}</Text>
      <Text style={styles.item}> {item.task}</Text>
    </View>
  )
}

export default function App () {
  return (
    <View style={styles.container}>
      <FlatList
        data={list}
        renderItem={({ item }) => <FlatListItem item={item} />}
        ></FlatList>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 40
  },
  flatListItem: {
    display: 'flex',
    flexDirection: 'row',
    padding: 6
  }
})