js_react_native__egghead/row.js

import React, { Component } from "react";
import {
  StyleSheet,
  Switch,
  Text,
  TouchableOpacity,
  View
} from "react-native";

const styles = StyleSheet.create({
  complete: {
    textDecorationLine: "line-through"
  },
  container: {
    alignItems: "flex-start",
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 10
  },
  destroy: {
    color: "#cc9a9a",
    fontSize: 20
  },
  text: {
    color: "#4d4d4d",
    fontSize: 24
  },
  textWrap: {
    flex: 1,
    marginHorizontal: 10
  }
});

class Row extends Component {
  render() {
    // console.log("Row.render", this.props);
    const { complete } = this.props;
    return (
      <View style={styles.container}>
        <Switch
          value={complete}
          onValueChange={this.props.onComplete}
        />
        <View style={styles.textWrap}>
          <Text style={[styles.text, complete && styles.complete]}>{this.props.text}</Text>
        </View>
        <TouchableOpacity onPress={this.props.onRemove}>
          <Text style={styles.destroy}>X</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Row.propTypes = {
  complete: React.PropTypes.bool,
  onComplete: React.PropTypes.func,
  onRemove: React.PropTypes.func,
  text: React.PropTypes.string
};

export default Row;