CS52/CheckListPage.js at master · smundada/CS52 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import React, { Component } from 'react';
import { Constants } from 'expo';
import {
  Container,
  Header,
  Button,
  Text,
  Body,
  Form,
  Item as FormItem,
  Input,
  Label,
  Title,
  Content,
  ListItem,
  CheckBox,
  View,
} from 'native-base';
import { Left, Right, Icon } from 'native-base';
import { Actions } from 'react-native-router-flux';

class CheckListItem extends Component {

  constructor(props) {
    super(props);
    this.state = { checked: false };
  }

  onPress = () => {
    const currStatus = this.state.checked;
    this.setState({checked: !currStatus});
  }

  render() {
    const { text } = this.props;
    return (
      <ListItem>
        <CheckBox checked={this.state.checked} onPress={this.onPress} />
        <Body>
          <Text style={{fontSize: 20}}>{ text }</Text>
        </Body>
      </ListItem>
    );
  }
}


export default class CheckListPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chkbox_chk: false,
    };
  }

  check() {
    var checked = this.state.chkbox_chk;
    if (checked == true) {
      this.setState({ chkbox_chk: false });
    } else this.setState({ chkbox_chk: true });
  }

  render() {
    return (
      <Container>
        <Content>
          <CheckListItem text={"Nausea"} />
          <CheckListItem text={"Loss of Appetite"} />
          <CheckListItem text={"Sleeplessness"} />
          <CheckListItem text={"Rashes/Itchiness"} />
          <CheckListItem text={"Stomach Pain/Upset"} />
          <CheckListItem text={"Headache"} />

          <Button large block transparent> </Button>
          <Button large block transparent> </Button>
          <Button large block transparent> </Button>
          <Button block transparent> </Button>

          <Button large block transparent style={{bottom:8}}>
                <Text  large onPress={Actions.search}> Next </Text>
          </Button>
        </Content>
      </Container>
    );
  }
}