native-base#Form JavaScript Examples

ArticlesForm = ({
  error, loading, success, onFormSubmit, defaultValues,
}) => {
  const {
    register, handleSubmit, errors, setValue,
  } = useForm({ defaultValues });

  useEffect(() => {
    register({ name: 'email' }, { required: errorMessages.missingEmail });
  }, [register]);

  return (
    <Container>
      <Content padder>
        <Header
          title="Example form"
          content="When you submit the form, it'll simply save to your redux store"
        />

        {error && <Messages message={error} />}
        {loading && <Messages type="info" message="Loading..." />}
        {success && <Messages type="success" message={success} />}

        <Form>
          <Item stackedLabel>
            <Label>Email*</Label>
            <Input
              type="text"
              autoCapitalize="none"
              placeholder="[email protected]"
              keyboardType="email-address"
              defaultValue={defaultValues.email || ''}
              onChangeText={(value) => setValue('email', value)}
            />
          </Item>
          {errors.email && <Text>{errors.email.message}</Text>}

          <Spacer size={20} />

          <Button block onPress={handleSubmit(onFormSubmit)} disabled={loading}>
            <Text>{loading ? 'Loading' : 'Submit'}</Text>
          </Button>
        </Form>
      </Content>
    </Container>
  );
}

render () {
        const { loading, error, success } = this.props;
        const { email } = this.state;

        return (
            <KeyboardAvoidingView
                style={{ backgroundColor: commonColor.backgroundColor, flex: 1 }}
                behavior={(Platform.OS === 'ios') ? 'padding' : null}
                enabled
                keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>
                <ScrollView contentContainerStyle={{ height: 400 }}>
                    <StatusBar style="light"/>
                    <Container style={{ backgroundColor: commonColor.backgroundColor }}>
                        <Content padder>
                            <Card style={{ backgroundColor: commonColor.backgroundColor }}>
                                {error && <View style={{ margin: 10 }}><Messages message={error}/></View>}
                                {success &&
                                <View style={{ margin: 10 }}><Messages type="success" message={success}/></View>}
                                <Form>
                                    <Item floatingLabel style={{ margin: 15 }}>
                                        <Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
                                            {i18n.t('login.forgotLabel')}
                                        </Label>
                                        <Input
                                            style={{ color: '#fff', fontFamily: 'Montserrat' }}
                                            autoCapitalize="none"
                                            value={email}
                                            keyboardType="email-address"
                                            disabled={loading}
                                            onChangeText={v => this.handleChange('email', v)}
                                        />
                                    </Item>

                                    <Spacer size={20}/>

                                    <ButtonH2t text={'login.forgotBtn'} loading={loading} onPress={this.handleSubmit}/>
                                </Form>
                            </Card>
                        </Content>
                    </Container>
                </ScrollView>
            </KeyboardAvoidingView>
        );
    }

MakeTransaction = ({ onPressSubmit, ...extraProps }) => {
  const [toAddress, setToAddress] = useState("0x19e03255f667bdfd50a32722df860b1eeaf4d635");
  const [amount, setAmount] = useState("1");
  const [units, setUnits] = useState("wei");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  return (
    <Container>
      <Content>
        <Form>
          <Item>
            <Label
              children="Address:"
            />
            <Input
              onChangeText={setToAddress}
              value={toAddress}
            />
          </Item>
          <Item
          >
            <Label
              children="Amount:"
            />
            <Input
              onChangeText={setAmount}
              value={amount}
            />
          </Item>
          <Item
            last
          >
            <Label
              children="Units:"
            />
            <Picker
              onValueChange={setUnits}
              selectedValue={units}
            >
              <Picker.Item label="Wei" value="wei" />
              <Picker.Item label="Kwei" value="kwei" />
              <Picker.Item label="Mwei" value="mwei" />
              <Picker.Item label="Gwei" value="gwei" />
              <Picker.Item label="Finney" value="finney" />
              <Picker.Item label="Ether" value="eth" />
            </Picker>
          </Item>
        </Form>
        <View
          style={styles.errorContainer}
        >
          {(!!error) && (
            <Text
              style={styles.error}
              children={error.message}
            />
          )} 
        </View>
        <View
          style={styles.buttonContainer}
        >
          <Button
            disabled={loading}
            style={styles.button}
            onPress={e => Promise
              .resolve()
              .then(() => [
                setLoading(true),
              ])
              .then(() => onPressSubmit(e, toAddress, amount, units))
              .then(() => setLoading(false))
              .catch(
                (e) => {
                  setError(e);
                  setLoading(false);
                },
              )}
            primary
            rounded
          >
            {(!!loading) && (
              <Spinner
                size={20}
              />
            )}
            <Text
              children="Send"
            />
          </Button>
        </View>
      </Content>
    </Container>
  );
}

Functional = () => {
  const [min_Vis, setMin_Vis] = useState(0);
  const [max_vis, setMax_vis] = useState(10);


  let datasetObject;
  let dataSetsValue = [];
  let dataStyle = {};
  let legendStyle = {};
  let xAxisStyle = {};
  let valueLegend = [];

  const [dropdownSelect, setDropdownSelect] = useState('earned');

  const get_month_name_from_data = data_month_string => {
    const month_name = [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ];
    const year = data_month_string.substr(2, 2);
    const month = data_month_string.substr(5, 2);
    const index = parseInt(month) - 1;
    const display_string = month_name[index] + '/' + year;
    // console.log(display_string)
    return display_string;
  };

  const getRandomColor = () => {
    let color = '#0000ff';
    return color;
  };

  const [finalData, setFinalData] = useState([]);

  const get_data = async () => {
    const auth_key = await AsyncStorage.getItem('auth_key');
    fetch('http://chouhanaryan.pythonanywhere.com/api/profit/', {
      headers: { Authorization: `Token ${auth_key}` },
    })
      .then((res) => res.json())
      .then(data => {
        // this temp variable is a dummy data object which is being used because it has more months in its data
        // const total = temp;

        /* uncomment this below line to display data from endpoint in the graph and comment the above line */
        const total = data;

        const my_data = Object.keys(total).map(key => {
          return { month: key, value: total[key] };
        });
        setFinalData(my_data);
        setMax_vis(my_data.length);
      })
      .catch(err => console.log(err));
  };

  useEffect(() => {
    get_data();
  }, []);

  let dummy_time = [];


  // for x axis values
  for (let i = 0; i < finalData.length; i++) {
    // console.log(i)
    if (finalData[i].month != 'Total') {
      const month_name = get_month_name_from_data(finalData[i].month);
      dummy_time.push(month_name);
    }
  }

  // for y axis values
  for (let i = 0; i < finalData.length; i++) {
    if (finalData[i].month != 'Total')
      valueLegend.push({ y: finalData[i].value.Total[dropdownSelect] });
  }

  let time = dummy_time;


  legendStyle = {
    enabled: true,
    textColor: processColor('blue'),
    textSize: 12,
    position: 'BELOW_CHART_RIGHT',
    form: 'SQUARE',
    formSize: 14,
    xEntrySpace: 10,
    yEntrySpace: 5,
    formToTextSpace: 5,
    wordWrapEnabled: true,
    maxSizePercent: 0.5,
  };

  dataStyle = {
    dataSets: dataSetsValue,
  };
  xAxisStyle = {
    valueFormatter: time,
    axisMinimum: min_Vis,
    axisMaximum: max_vis,
    granularity: 1,
  };
  const markers = {
    enabled: true,
    digits: 2,
    backgroundTint: processColor('teal'),
    markerColor: processColor('#F0C0FF8C'),
    textColor: processColor('white'),
  };



  datasetObject = {
    values: valueLegend,
    // label: 'Total profit',
    label: dropdownSelect === 'earned' ? 'Earned' : 'Spent',
    config: {
      lineWidth: 1,
      drawCubicIntensity: 0.4,
      circleRadius: 3,
      drawHighlightIndicators: false,
      color: processColor(getRandomColor()),
      drawFilled: true,
      fillColor: processColor(getRandomColor()),
      fillAlpha: 40,
      circleColor: processColor(getRandomColor()),
      drawValues: true,
    },
  };
  dataSetsValue.push(datasetObject);

  const renderLine = () => {
    return (
      <View style={{ alignItems: 'center' }}>
        <Content style={{ height: 100, marginTop: -70 }}>
          <Form
            style={{
              borderWidth: 1,
              borderColor: '#0006',
              flex: 0.8,
              borderRadius: 5,
              marginTop: 70
            }}>
            <Picker
              note
              style={{ borderColor: '#0f0', borderWidth: 1, width: 200 }}
              mode='dropdown'
              selectedValue={dropdownSelect}
              onValueChange={(value, index) => setDropdownSelect(value)}
            >
              <Picker.Item label="Earned" value="earned" />
              <Picker.Item label="Spent" value="spent" />
            </Picker>
          </Form>
        </Content>
        <TouchableOpacity onPress={() => console.log(dropdownSelect)}>
        </TouchableOpacity>
        <LineChart
          style={styles.bar}
          visibleRange={{
            x: { min: 0, max: 10 },
          }}
          autoScaleMinMaxEnabled={false}
          animation={{
            durationX: 300,
          }}
          data={dataStyle}
          chartDescription={{ text: '' }}
          legend={legendStyle}
          marker={markers}
          xAxis={xAxisStyle}
          drawGridBackground={false}
          drawValues={false}
          dragDecelerationFrictionCoef={0.95}
          dragEnabled
          borderColor={processColor('teal')}
          borderWidth={1}
          drawBorders={true}
        />
      </View>
    );
  };

  return renderLine();
}

Functional = () => {
  const [min_Vis, setMin_Vis] = useState(0);
  const [max_vis, setMax_vis] = useState(10);


  let datasetObject;
  let dataSetsValue = [];
  let dataStyle = {};
  let legendStyle = {};
  let xAxisStyle = {};
  let valueLegend = [];

  const [dropdownSelect, setDropdownSelect] = useState('earned');

  

  const getRandomColor = () => {
    let color = '#0000ff';
    return color;
  };

  

  const [finalData, setFinalData] = useState([]);

  const get_data = async () => {
    const auth_key = await AsyncStorage.getItem('auth_key');
    fetch('http://chouhanaryan.pythonanywhere.com/api/profit/', {
      headers: { Authorization: `Token ${auth_key}` },
    })
      .then((res) => res.json())
      .then(data => {
        // this temp variable is a dummy data object which is being used because it has more months in its data
        // const total = temp['Total'];

        /* uncomment this below line to display data from endpoint in the graph and comment the above line */
        const total = data['Total'];

        const my_data = Object.keys(total).map(key => {
          return { product: key, value: total[key] };
        });
        setFinalData(my_data);
        setMax_vis(my_data.length);
      })
      .catch(err => console.log(err));
  };

  useEffect(() => {
    get_data();
  }, []);

  let dummy_time = [];


  // for x axis values
  for (let i = 0; i < finalData.length; i++) {
    // console.log(i)
    if (finalData[i].product != 'Total') {
      dummy_time.push(finalData[i].product);
    }
  }

  // for y axis values
  for (let i = 0; i < finalData.length; i++) {
    if (finalData[i].product != 'Total')
      valueLegend.push({ y: finalData[i].value[dropdownSelect] });
  }

  let time = dummy_time;


  legendStyle = {
    enabled: true,
    textColor: processColor('blue'),
    textSize: 12,
    position: 'BELOW_CHART_RIGHT',
    form: 'SQUARE',
    formSize: 14,
    xEntrySpace: 10,
    yEntrySpace: 5,
    formToTextSpace: 5,
    wordWrapEnabled: true,
    maxSizePercent: 0.5,
  };

  dataStyle = {
    dataSets: dataSetsValue,
  };
  xAxisStyle = {
    valueFormatter: time,
    axisMinimum: min_Vis,
    axisMaximum: max_vis,
    granularity: 1,
  };
  const markers = {
    enabled: true,
    digits: 2,
    backgroundTint: processColor('teal'),
    markerColor: processColor('#F0C0FF8C'),
    textColor: processColor('white'),
  };



  datasetObject = {
    values: valueLegend,
    // label: 'Total profit',
    label: dropdownSelect === 'earned' ? 'Earned' : 'Spent',
    config: {
      lineWidth: 1,
      drawCubicIntensity: 0.4,
      circleRadius: 3,
      drawHighlightIndicators: false,
      color: processColor(getRandomColor()),
      drawFilled: true,
      fillColor: processColor(getRandomColor()),
      fillAlpha: 40,
      circleColor: processColor(getRandomColor()),
      drawValues: true,
    },
  };
  dataSetsValue.push(datasetObject);

  const renderLine = () => {
    return (
      <View style={{ alignItems: 'center' }}>
        <Content style={{ height: 100, marginTop: -70 }}>
          <Form
            style={{
              borderWidth: 1,
              borderColor: '#0006',
              flex: 0.8,
              borderRadius: 5,
              marginTop: 70
            }}>
            <Picker
              note
              style={{ borderColor: '#0f0', borderWidth: 1, width: 200 }}
              mode='dropdown'
              selectedValue={dropdownSelect}
              onValueChange={(value, index) => setDropdownSelect(value)}
            >
              <Picker.Item label="Earned" value="earned" />
              <Picker.Item label="Spent" value="spent" />
            </Picker>
          </Form>
        </Content>
        <TouchableOpacity onPress={() => console.log(dropdownSelect)}>
        </TouchableOpacity>
        <BarChart
          style={styles.bar}
          visibleRange={{
            x: { min: 0, max: 10 },
          }}
          autoScaleMinMaxEnabled={false}
          animation={{
            durationX: 300,
          }}
          data={dataStyle}
          chartDescription={{ text: '' }}
          legend={legendStyle}
          marker={markers}
          xAxis={xAxisStyle}
          drawGridBackground={false}
          drawValues={false}
          dragDecelerationFrictionCoef={0.95}
          dragEnabled
          borderColor={processColor('teal')}
          borderWidth={1}
          drawBorders={true}
        />
      </View>
    );
  };

  return renderLine();
}

Sell = ({navigation}) => {
  const [product, setProduct] = useState([]);
  const [selected, setSelected] = useState('key1');
  const [list, setProductsList] = useState([]);

  const [customerName, setCustomerName] = useState('');
  const [phoneNumber, setPhoneNumber] = useState('');
  const [address, setAddress] = useState('');

  const onPickerValueChange = (item_name, item_index, product_index) => {
    setSelected(item_name);
    console.log('this is name:', item_name);
    console.log('this is index:', item_index);
    console.log('which prod no.?:', product_index);
    let copy = [...product];
    copy[product_index].name = item_name;
    console.log(copy);
    setProduct(copy);
  };

  useEffect(() => {
    setProduct([{name: 'Pick a value', price: '', amount: ''}]);
    apiFetch();
  }, []);

  const apiFetch = async () => {
    const auth_key = await AsyncStorage.getItem('auth_key');
    fetch('http://chouhanaryan.pythonanywhere.com/api/productlist/', {
      method: 'GET',
      headers: {
        Authorization: `Token ${auth_key}`,
      },
    })
      .then(res => res.json())
      .then(data => {
        console.log(data);
        setProductsList(data.results);
      })
      .catch(err => console.log(err));
  };
  const sellprod = async () => {
    await product.forEach(async product => {
      const formData = new FormData();
      formData.append('name', product.name);
      formData.append('quantity', parseInt(product.amount));
      formData.append('latest_selling_price', parseFloat(product.price));
      var myHeaders = new Headers();
      const auth_key = await AsyncStorage.getItem('auth_key');

      myHeaders.append('Authorization', `Token ${auth_key}`);

      fetch('http://chouhanaryan.pythonanywhere.com/api/sell/', {
        method: 'POST',
        headers: myHeaders,
        body: formData,
        redirect: 'follow',
      })
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log('error', error));

    
    });
  };

  return (
    <Container style={{backgroundColor: '#F3F9FB'}}>
      <Content>
        <Body>
          <Text style={styles.heading}>Sell Items</Text>
          
          {/* separator line above name, phone no. and address fields */}
          <View style={{ flex: 1, flexDirection: 'row', marginBottom: 10 }}>
            <View
              style={{
                borderColor: '#0004',
                borderWidth: 1,
                width: '90%',
                alignSelf: 'center',
                borderRadius: 2,
                marginBottom: -10,
                marginTop: 5,
              }}
            />
          </View>

          {/* customer name */}
          <Item floatingLabel style={styles.inputBox}>
            <Label style={styles.label}>Customer Name</Label>
            <Input
              style={styles.inputArea}
              value={customerName}
              onChangeText={value => setCustomerName(value)}
            />
          </Item>

          {/* phone number */}
          <Item floatingLabel style={styles.inputBox}>
            <Label style={styles.label}>Phone number</Label>
            <Input
              style={styles.inputArea}
              keyboardType='number-pad'
              value={phoneNumber}
              onChangeText={value => setPhoneNumber(value)}
            />
          </Item>

          {/* address */}
          <Item floatingLabel style={styles.inputBox}>
            <Label style={styles.label}>Address</Label>
            <Input
              style={styles.inputArea}
              value={address}
              onChangeText={value => setAddress(value)}
            />
          </Item>

          {product.map((product_item, product_index) => {
            return (
              <View
                key={product_index}
                style={{width: Dimensions.get('window').width}}>
                {/* for the separating line */}
                <View
                  style={{
                    borderColor: '#0004',
                    borderWidth: 1,
                    width: '90%',
                    alignSelf: 'center',
                    borderRadius: 2,
                    marginBottom: -10,
                    marginTop: 5,
                  }}
                />

                <Text style={styles.product_titles}>
                  Product {product.length == 1 ? '' : product_index + 1}
                </Text>
                <View
                  style={{
                    justifyContent: 'space-evenly',
                    flexDirection: 'row',
                  }}>
                  {/* <Label style={styles.label}>Product Name</Label> */}
                  <Text style={[styles.label, {alignSelf: 'center'}]}>
                    Product Name
                  </Text>
                  <Form
                    style={{
                      borderWidth: 1,
                      borderColor: '#0006',
                      flex: 0.8,
                      borderRadius: 5,
                    }}>
                    <Picker
                      note
                      mode="dropdown"
                      selectedValue={product[product_index].name}
                      onValueChange={(item_name, item_index) => {
                        onPickerValueChange(
                          item_name,
                          item_index,
                          product_index,
                        );
                      }}>
                      {/* <Picker.Item label='plz pick' value={-1} /> */}
                      {list.map((picker_item, picker_index) => (
                        <Picker.Item
                          key={picker_index}
                          // label={picker_item.name + " ("+picker_item.quantity+")"}
                          label={picker_item.name}
                          value={picker_item.name}
                        />
                      ))}
                    </Picker>
                  </Form>
                </View>

                <Item floatingLabel style={styles.inputBox}>
                  <Label style={styles.label}>Price</Label>
                  <Input
                    style={styles.inputArea}
                    keyboardType="numeric"
                    onChangeText={value =>
                      (product[product_index].price = parseFloat(value.trim()))
                    }
                  />
                </Item>

                <Item floatingLabel style={styles.inputBox}>
                  <Label style={styles.label}>No. of Items</Label>
                  <Input
                    style={styles.inputArea}
                    keyboardType="numeric"
                    onChangeText={value =>
                      (product[product_index].amount = parseInt(value.trim()))
                    }
                  />
                </Item>
              </View>
            );
          })}

          <TouchableOpacity
            onPress={() => {
              console.log(product);
              if (
                product[product.length - 1].name &&
                product[product.length - 1].price &&
                product[product.length - 1].amount
              ) {
                let copy = [...product];
                copy.push({name: '', price: '', amount: ''});
                setProduct(copy);
              } else {
                Alert.alert(
                  `Please fill all details for product ${product.length}`,
                );
              }
            }}
            style={styles.addButton}>
            <Icon name="plus" color="#4796BD" size={25} style={styles.icon} />
            <Text style={styles.addButtonText}>Add Product</Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={async () => {
              let all_unique = true;
              console.log('product', product);
              console.log('list', list);
              if (product.length != 1) {
                for (let i = 0; i < product.length; i++) {
                  for (let j = i + 1; j < product.length; j++) {
                    if (product[i].name == product[j].name) {
                      all_unique = false;
                      break;
                    }
                  }
                }
              }
              if (!all_unique) {
                console.log('same names');
                Alert.alert('please select all unique items');
              } else if (
                product[product.length - 1].name == '' ||
                product[product.length - 1].price == '' ||
                product[product.length - 1].amount == ''
              ) {
                Alert.alert(
                  `Please fill valid details for product ${product.length}`,
                );
              } else {
                let enough_stock = true;
                let shortage_products = [];

                for (let i = 0; i < product.length; i++) {
                  const product_object = product[i];
                  for (let j = 0; j < list.length; j++) {
                    const list_item_object = list[j];
                    if (
                      product_object.name == list_item_object.name &&
                      product_object.amount > list_item_object.quantity
                    ) {
                      shortage_products.push(product_object.name);
                      enough_stock = false;
                      break;
                    }
                  }
                }
                if (!enough_stock) {
                  Alert.alert(
                    `Not enough stock in inventory for ${shortage_products}`,
                  );
                } else {
                  console.log('finally sold!!');
                  await sellprod();
                  await setProduct([]);
                  await setProduct([{name: '', price: '', amount: ''}]);
                  await setAddress();
                await setAddress('');
                await  setCustomerName();
                await setCustomerName('');
                await setPhoneNumber();
                await setPhoneNumber('')
                }
              }
            }}
            style={styles.sellButton}>
            <Text style={styles.sellButtonText}>Sell</Text>
          </TouchableOpacity>
        </Body>
      </Content>
    </Container>
  );
}

render () {
        const { loading, error, success } = this.props;
        const { email } = this.state;

        return (
            <KeyboardAvoidingView
                style={{ backgroundColor: commonColor.backgroundColor, flex: 1 }}
                behavior={(Platform.OS === 'ios') ? 'padding' : null}
                enabled
                keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>
                <StatusBar style="light"/>
                <ScrollView>
                    <Container style={{ backgroundColor: commonColor.backgroundColor }}>
                        <Content padder>
                            <Spacer size={60}/>
                            <Text style={{
                                flex: 1,
                                fontSize: 75,
                                fontWeight: '400',
                                fontFamily: 'Montserrat_Bold',
                                color: 'white',
                                textAlign: 'center',
                            }}>
                                {'H2T.'}
                            </Text>
                            <Spacer size={60}/>
                            <Card style={{ backgroundColor: commonColor.backgroundColor }}>
                                {error && <View style={{ margin: 10 }}><Messages message={error}/></View>}
                                {success &&
                                <View style={{ margin: 10 }}><Messages type="success" message={success}/></View>}
                                <Form>
                                    <Item floatingLabel style={{ margin: 15 }}>
                                        <Label style={{
                                            color: '#fff',
                                            fontFamily: 'Montserrat',
                                        }}>{i18n.t('login.fields.email')}</Label>
                                        <Input
                                            style={{ color: '#fff', fontFamily: 'Montserrat' }}
                                            autoCapitalize="none"
                                            value={email}
                                            keyboardType="email-address"
                                            disabled={loading}
                                            returnKeyType={'next'}
                                            onChangeText={v => this.handleChange('email', v)}
                                            onSubmitEditing={() => { this.focusTheField('field2'); }}
                                            blurOnSubmit={false}
                                        />
                                    </Item>
                                    <Item floatingLabel style={{ margin: 15 }}>
                                        <Label style={{
                                            color: '#fff',
                                            fontFamily: 'Montserrat',
                                        }}>{i18n.t('login.fields.password')}</Label>
                                        <Input
                                            getRef={input => { this.inputs['field2'] = input; }}
                                            style={{ color: '#fff', fontFamily: 'Montserrat' }}
                                            secureTextEntry
                                            disabled={loading}
                                            returnKeyType={'go'}
                                            onChangeText={v => this.handleChange('password', v)}
                                            onSubmitEditing={this.handleSubmit}
                                        />
                                    </Item>

                                    <Spacer size={20}/>

                                    <ButtonH2t text={'login.connect'} loading={loading} onPress={this.handleSubmit}/>
                                </Form>
                                <ListItem onPress={Actions.forgotPassword} icon>
                                    <Left>
                                        <Icon style={{ color: 'white' }} name="help-buoy"/>
                                    </Left>
                                    <Body style={{ borderBottomWidth: 0 }}>
                                        <TextI18n style={{ color: 'white' }}>
                                            login.forgotPassword
                                        </TextI18n>
                                    </Body>
                                </ListItem>
                            </Card>
                        </Content>
                    </Container>
                </ScrollView>
            </KeyboardAvoidingView>
        );
    }

render () {
        const { loading, error, success } = this.props;

        return (
            <KeyboardAvoidingView
                style={{ backgroundColor: commonColor.backgroundColor, flex: 1 }}
                behavior={(Platform.OS === 'ios') ? 'padding' : null}
                enabled
                keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>
                <StatusBar style="light"/>
                <ScrollView>
                    <Container style={{ backgroundColor: commonColor.backgroundColor }}>
                        <Content padder>
                            <Card style={{ marginTop: 10, backgroundColor: commonColor.backgroundColor }}>
                                <View padder>
                                    {error && <View style={{ margin: 10 }}><Messages message={error}/></View>}
                                    {success &&
                                    <View style={{ margin: 10 }}><Messages type="success" message={success}/></View>}
                                    <Form>
                                        <Item floatingLabel style={{ margin: 15 }}>
                                            <Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
                                                {i18n.t('login.fields.firstName')}
                                            </Label>
                                            <Input
                                                disabled={loading}
                                                style={{ color: '#fff', fontFamily: 'Montserrat' }}
                                                onChangeText={v => this.handleChange('firstName', v)}
                                            />
                                        </Item>
                                        <Item floatingLabel style={{ margin: 15 }}>
                                            <Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
                                                {i18n.t('login.fields.lastName')}
                                            </Label>
                                            <Input
                                                disabled={loading}
                                                style={{ color: '#fff', fontFamily: 'Montserrat' }}
                                                onChangeText={v => this.handleChange('lastName', v)}
                                            />
                                        </Item>

                                        <Item floatingLabel style={{ margin: 15 }}>
                                            <Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
                                                {i18n.t('login.fields.email')}
                                            </Label>
                                            <Input
                                                disabled={loading}
                                                style={{ color: '#fff', fontFamily: 'Montserrat' }}
                                                autoCapitalize="none"
                                                keyboardType="email-address"
                                                onChangeText={v => this.handleChange('email', v)}
                                            />
                                        </Item>

                                        <Item floatingLabel style={{ margin: 15 }}>
                                            <Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
                                                {i18n.t('login.fields.password')}
                                            </Label>
                                            <Input
                                                disabled={loading}
                                                style={{ color: '#fff', fontFamily: 'Montserrat' }}
                                                secureTextEntry
                                                onChangeText={v => this.handleChange('password', v)}
                                            />
                                        </Item>

                                        <Item floatingLabel style={{ margin: 15 }}>
                                            <Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
                                                {i18n.t('login.fields.confirmPassword')}
                                            </Label>
                                            <Input
                                                disabled={loading}
                                                style={{ color: '#fff', fontFamily: 'Montserrat' }}
                                                secureTextEntry
                                                selectionColor={'white'}
                                                onChangeText={v => this.handleChange('password2', v)}
                                            />
                                        </Item>
                                        <Spacer size={40}/>
                                        <ButtonH2t text={'login.signUp'} loading={loading} onPress={this.handleSubmit}/>
                                    </Form>
                                </View>
                            </Card>
                        </Content>
                    </Container>
                </ScrollView>
            </KeyboardAvoidingView>
        );
    }

render () {
        const { loading, error, success } = this.props;
        const {
            firstName, lastName, email, changeEmail, changePassword,
        } = this.state;

        return (
            <Container style={{ backgroundColor: commonColor.backgroundColor }}>
                <StatusBar style="light"/>
                <Content padder>
                    <Header
                        title={i18n.t('profile.myAccount')}
                        content={i18n.t('profile.updateAccount')}
                    />

                    {error && <Messages message={error}/>}
                    {success && <Messages message={success} type="success"/>}

                    <Form>
                        <Item stackedLabel>
                            <Label style={{ fontFamily: 'Montserrat', color: '#fff' }}>
                                {i18n.t('login.fields.firstName')}
                            </Label>
                            <Input
                                value={firstName}
                                style={{ fontFamily: 'Montserrat', color: '#fff' }}
                                disabled={loading}
                                onChangeText={v => this.handleChange('firstName', v)}
                            />
                        </Item>

                        <Item stackedLabel>
                            <Label style={{ fontFamily: 'Montserrat', color: '#fff' }}>
                                {i18n.t('login.fields.lastName')}
                            </Label>
                            <Input
                                value={lastName}
                                style={{ fontFamily: 'Montserrat', color: '#fff' }}
                                disabled={loading}
                                onChangeText={v => this.handleChange('lastName', v)}
                            />
                        </Item>

                        <ListItem icon onPress={() => this.handleChange('changeEmail', !changeEmail)}>
                            <Body>
                                <TextH2t>{i18n.t('login.fields.email')}</TextH2t>
                            </Body>
                        </ListItem>

                        {changeEmail && (
                            <Item stackedLabel>
                                <Label style={{ fontFamily: 'Montserrat', color: '#fff' }}>{i18n.t('login.fields.email')}</Label>
                                <Input
                                    autoCapitalize="none"
                                    value={email}
                                    style={{ fontFamily: 'Montserrat', color: '#fff' }}
                                    keyboardType="email-address"
                                    disabled={loading}
                                    onChangeText={v => this.handleChange('email', v)}
                                />
                            </Item>
                        )}

                        <ListItem icon onPress={() => this.handleChange('changePassword', !changePassword)}>
                            <Body>
                                <TextH2t>{i18n.t('profile.updatePassword')}</TextH2t>
                            </Body>
                        </ListItem>

                        {changePassword && (
                            <View padder>
                                <Item stackedLabel>
                                    <Label style={{ fontFamily: 'Montserrat', color: '#fff' }}>{i18n.t('login.fields.password')}</Label>
                                    <Input
                                        secureTextEntry
                                        style={{ fontFamily: 'Montserrat', color: '#fff' }}
                                        onChangeText={v => this.handleChange('password', v)}
                                        disabled={loading}
                                    />
                                </Item>

                                <Item stackedLabel last>
                                    <Label style={{ fontFamily: 'Montserrat', color: '#fff' }}>{i18n.t('login.fields.confirmPassword')}</Label>
                                    <Input
                                        secureTextEntry
                                        style={{ fontFamily: 'Montserrat', color: '#fff' }}
                                        onChangeText={v => this.handleChange('password2', v)}
                                        disabled={loading}
                                    />
                                </Item>
                            </View>
                        )}

                        <Spacer size={20}/>
                        <ButtonH2t text={'login.update'} onPress={this.handleSubmit}/>
                    </Form>
                </Content>
            </Container>
        );
    }

function ReportForm({ reportCaseTrigger, positions }) {
  const { control, handleSubmit, errors } = useForm();
  const onSubmit = data => {
    Alert.alert("Data submitted");
    reportCaseTrigger(positions);

    // Alert.alert("Form Data", JSON.stringify(data), positions.length);
  };

  return (
    <View>
      <Form>
        <Text style={styles.hintText}>
          On this page you can report if you have got an infection. Please enter
          your details below
        </Text>
        <View style={styles.inputWrapper}>
          <Item>
            <Text>Picker</Text>
            <Controller
              as={e => {
                console.log(e);
                return (
                  <Picker
                    note
                    mode="dropdown"
                    style={{ width: 120 }}
                    selectedValue={"key3"}
                    onValueChange={() => {}}
                  >
                    <Picker.Item label="Wallet" value="key0" />
                    <Picker.Item label="ATM Card" value="key1" />
                    <Picker.Item label="Debit Card" value="key2" />
                    <Picker.Item label="Credit Card" value="key3" />
                    <Picker.Item label="Net Banking" value="key4" />
                  </Picker>
                );
              }}
              control={control}
              name="firstName"
              onChange={args => args[0].nativeEvent.text}
              onChange={e => {
                return "key1";
                // Place your logic here
                return selected;
              }}
              rules={{ required: true }}
              defaultValue=""
              placeholder="Username"
            />
          </Item>
          {errors.firstName && <Text>This is required.</Text>}
          <Item>
            <Controller
              as={Input}
              control={control}
              name="lastName"
              onChange={args => args[0].nativeEvent.text}
              defaultValue=""
              placeholder="Password"
            />
          </Item>
        </View>

        <Text style={styles.hintText}>
          Enter a contact phone number. This can be yours or a doctors phone
          number.
        </Text>
        <View style={styles.inputWrapper}>
          <Item>
            <Label>Contact phone number</Label>
            <Controller
              as={Input}
              control={control}
              name="contact_phone"
              onChange={args => args[0].nativeEvent.text}
              defaultValue=""
            />
          </Item>
        </View>
        <Text style={styles.hintText}>Enter information for you contact.</Text>
        <View style={styles.inputWrapper}>
          <Item style={styles.input}>
            <Label>Contact information</Label>
            <Controller
              as={Input}
              control={control}
              name="contact_information"
              onChange={args => args[0].nativeEvent.text}
              defaultValue=""
              placeholder="Contact information"
            />
          </Item>
        </View>
      </Form>
      {/*
      <Form>
        <Item>
          <Input placeholder="Username" />
        </Item>
        <Item last>
          <Input placeholder="Password" />
        </Item>
        <Button primary onPress={reportButton}>
          <Text>Submit data</Text>
        </Button>
</Form>*/}
      <View style={styles.submitWrapper}>
        <Button primary onPress={handleSubmit(onSubmit)}>
          <Text>Submit</Text>
        </Button>
      </View>
    </View>
  );
}