Grocery_Police/Product.js

import React, { Component } from 'react';
import { StyleSheet, TextInput, View, Alert, TouchableOpacity, Text, ScrollView, Platform,Picker} from 'react-native';
import DatePicker from 'react-native-datepicker';
import RNPickerSelect, { defaultStyles } from 'react-native-picker-select';

const food=[{label:'food',value:'food'},{label:'not food',value:'notfood'}];

export default class Product extends Component {
  
  constructor(props) {

    super(props)

    this.state = {
      uid:'1234',
      lid:'5678',
      name_p: '',
	    bought_date:'',
      expiration_date:'',
      type:'fresh',
      quantity:'',
      notes:'',
      renew:'1',
      picked:'no'

    }
  }
  
  insertList_Function = () => {
    this.setState({ picked: "yes" })
    fetch('https://ada.uprrp.edu/~laura.gonzalez19/4030/insert_productsss.php', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({

    name_p: this.state.name_p,

    lid: this.state.lid,
		
		uid: this.state.uid,
		
		bought_date:this.state.bought_date,
		
		expiration_date:this.state.expiration_date,
		
		type:this.state.type,
		
		quantity:this.state.quantity,
		
		renew:this.state.renew,
		
		notes:this.state.notes,

      })

    }).then((response) => response.json())
      .then((responseJson) => {
        // Showing response message coming from server after inserting records.
        Alert.alert(responseJson);
      });


  }

  render() {
    return (


      <View style={styles.MainContainer}>
      
        <Text style={{ fontSize: 25, color: "#3414B3", textAlign: 'center', marginBottom: 15 }}>Add Products!</Text>

		<TextInput
          placeholder="Product Name"
          onChangeText={data => this.setState({ name_p: data })}
          underlineColorAndroid='transparent'
          style={styles.TextInputStyleClass}
        />
       
		<DatePicker
          style={styles.TextInputStyleClass}
          mode="date" // The enum of date, datetime and time
          placeholder="Bought"
          format="YYYY-MM-DD"
          date={this.state.bought_date}
          confirmBtnText="Confirm"
          cancelBtnText="Cancel"
          customStyles={{
            dateIcon: {
              position: 'absolute',
              left: 0,
              top: 4,
              marginLeft: 0,
            },
            dateInput: {
              marginLeft: 36,
            },
          }}
          onDateChange={data => this.setState({bought_date:data}) }
          
        />
  		<DatePicker
          style={styles.TextInputStyleClass}
          mode="date" // The enum of date, datetime and time
          date={this.state.expiration_date}
          placeholder="Expiration"
          format="YYYY-MM-DD"
          confirmBtnText="Confirm"
          cancelBtnText="Cancel"
          customStyles={{
            dateIcon: {
              position: 'absolute',
              left: 0,
              top: 4,
              marginLeft: 0,
            },
            dateInput: {
              marginLeft: 36,
            },
          }}
          onDateChange={data => this.setState({expiration_date:data}) }
          
        />

<TextInput 
  placeholder="Quantity"
  style={styles.TextInputStyleClass}
  keyboardType = 'number-pad'
  onChangeText = {(text)=> this.setState({quantity: text})}
  value = {this.state.quantity}
/>

		<TextInput
          placeholder="Notes"
          onChangeText={data => this.setState({ notes: data })}
          underlineColorAndroid='transparent'
          style={styles.TextInputStyleClass}
        />

 

          <RNPickerSelect
          placeholder={{label: 'Select type of food...',color: '#9EA0A4',}}
            items={ [{label: 'Fruit',value: 'fruit'}, {label: 'Meat',value: 'meat'}]}
            selectedValue={this.state.type}
            onValueChange={(itemValue, itemIndex) =>this.setState({type: itemValue})}
            style={pickerSelectStyles}
            useNativeAndroidPickerStyle={false}
          />


        <RNPickerSelect
            placeholder={{label: 'Select to renew or not...',color: '#9EA0A4',}}
            items={ [{label: 'Renew',value: '1'}, {label: 'Do not Renew',value: '0'}]}
              selectedValue={this.state.renew}
              onValueChange={(itemValue, itemIndex) => this.setState({renew: itemValue})} 
              style={pickerSelectStyles}
            useNativeAndroidPickerStyle={false}
          />


      <TouchableOpacity style={styles.button} onPress={this.insertList_Function} >

          <Text style={styles.text}>+</Text>

        </TouchableOpacity>


		<Text style={{ fontSize: 15, color: "#3414B3", textAlign: 'center', marginTop: 20, marginBottom: 15 }}>Start adding your products </Text>


      </View>

    );
  }
}

const styles = StyleSheet.create({

  MainContainer: {

    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    margin: 10
  },

  TextInputStyleClass: {
    color: 'gray',
    textAlign: 'center',
    marginBottom: 7,
    height: 40,
    width: '80%',
    borderWidth: 1,
    borderColor: '#3414B3'
  },

  button: {
	  height:50,
    width: 50,
    paddingTop: 2,
    paddingBottom: 2,
    backgroundColor: '#3414B3',
    borderRadius: 100,
    marginTop: 20
  },

  text: {
    color: '#fff',
    fontSize: 32,
    textAlign: 'center',
    padding: 0
  },

}

);

const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 16,
    borderWidth: 1,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderColor: '#3414B3',
    color: 'gray',
    marginTop: 20,
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  inputAndroid: {
    justifyContent: 'center',
    borderWidth: 1,
    alignItems: 'center',
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    
    paddingTop: 2,
    paddingBottom: 2,
    borderColor: '#3414B3',
    marginBottom: 7,
    height: 40,
    width: 270,
    color: 'gray',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
});