nuevo_articulo.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button, Image, TextInput, ScrollView, Alert } from 'react-native';
import {List, ListItem, Col, Row} from 'native-base'
import { FontAwesome, AntDesign, Ionicons, MaterialIcons } from '@expo/vector-icons';
import * as SQLite from 'expo-sqlite';

import * as ImagePicker from 'expo-image-picker';
import * as Permissions from 'expo-permissions';


const db = SQLite.openDatabase('aalmarketapp.db');
export default class AppMarket extends Component {
  constructor(props) {
    super(props);
    this.state = {
      image_front: 'https://i.ibb.co/1MB9qpV/camera-front.png',
      image_back: 'https://i.ibb.co/1LfQKdX/camera-back.png',
      cod_producto: '',
      descripcion: '',
      detalles : '',
      precio: '',
      otros: '',
      card_front: '',
      card_back: ''
    };
  }

  componentDidMount(){
    db.transaction(tx => {
      tx.executeSql('CREATE TABLE IF NOT EXISTS productos(productos_id INTEGER PRIMARY KEY AUTOINCREMENT, cod INT(20), descripcion VARCHAR(100), detalles VARCHAR(255), precio VARCHAR(10), otros VARCHAR(255), card_front BLOB, card_back BLOB)',[]);
    });

  }


  _pickImageGaleryFront = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 0.5,
      base64: true
    });

    if (!result.cancelled) {

      this.setState({image_front : result.uri, card_front: result.base64});
    }

  }

  _pickImageCameraFront = async () => {
    let result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 0.5,
      base64: true
    });

    if (!result.cancelled) {
      this.setState({image_front : result.uri, card_front: result.base64});
    }
  }

  _pickImageGaleryBack = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 0.5,
      base64: true
    });

    if (!result.cancelled) {

      this.setState({image_back : result.uri, card_back: result.base64});
    }

  }

  _pickImageCameraBack = async () => {
    let result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 0.5,
      base64: true
    });

    if (!result.cancelled) {
      this.setState({image_back : result.uri, card_back: result.base64});
    }
  }

  GuardarForm(){
    const { cod_producto } = this.state;
    const { descripcion } = this.state;
    const { detalles } = this.state;
    const { precio } = this.state;
    const { otros } = this.state;
    const { card_front } = this.state;
    const { card_back } = this.state;

    if(cod_producto != "" && descripcion != ""){
      this.insert_producto(cod_producto,descripcion,detalles,precio,otros,card_front,card_back)
    }else{
      Alert.alert('Error','No se pudo guardar el registro');
    }

  }

  insert_producto(cod,descripcion,detalles,precio,otros,card_front,card_back){

    var query = "INSERT INTO productos (productos_id, cod, descripcion, detalles, precio, otros, card_front, card_back) VALUES (null,?,?,?,?,?,?,?)";
    var params = [cod,descripcion,detalles,precio,otros,card_front,card_back];
    db.transaction((tx) => {
      tx.executeSql(query,params, (tx,results) => {
        console.log(results);
        Alert.alert("Exito","Registro almacenado");
      },function(tx,err){
        Alert.alert("Error","Registro no guardado");
        return;
      });
    });

  }

  render() {

  return (
  <ScrollView>



    <View style={styles.body}>
      <TextInput value={this.state.cod_producto} onChangeText={(val) => this.setState({cod_producto: val})} placeholder="Código de Producto" placeholderTextColor="black" maxLength={12} style={{borderWidth : 1, borderColor: 'blue', padding : 5, marginTop : 10, width: '80%'}}></TextInput>
      <TextInput value={this.state.descripcion} onChangeText={(val) => this.setState({descripcion: val})} placeholder="Descripción de producto" placeholderTextColor="black" style={{borderWidth : 1, borderColor: 'blue', padding : 5, marginTop : 10, width: '80%'}}></TextInput>
      <TextInput value={this.state.detalles} onChangeText={(val) => this.setState({detalles: val})} placeholder="Detalles" placeholderTextColor="black" style={{borderWidth : 1, borderColor: 'blue', padding : 5, marginTop : 10, height: 130, width: '80%'}}></TextInput>
      <TextInput value={this.state.precio} onChangeText={(val) => this.setState({precio: val})} placeholder="Precio" placeholderTextColor="black" maxLength={12} style={{borderWidth : 1, borderColor: 'blue', padding : 5, marginTop : 10, width: '80%'}}></TextInput>
      <TextInput value={this.state.otros} onChangeText={(val) => this.setState({otros: val})} placeholder="Otros" placeholderTextColor="black" maxLength={12} style={{borderWidth : 1, borderColor: 'blue', padding : 5, marginTop : 10, height: 110, width: '80%'}}></TextInput>
    </View>
    <View style={styles.card}>
      <Ionicons name="md-photos" color={'green'} size={35} onPress={this._pickImageGaleryFront}></Ionicons>
      <MaterialIcons name="add-a-photo" color={'blue'} size={35} onPress={this._pickImageCameraFront}></MaterialIcons>
      <Image source={{ uri: this.state.image_front }} style={styles.logo} ></Image>

      <Ionicons name="md-photos" color={'green'} size={35} onPress={this._pickImageGaleryBack}></Ionicons>
      <MaterialIcons name="add-a-photo" color={'blue'} size={35} onPress={this._pickImageCameraBack}></MaterialIcons>
      <Image source={{ uri: this.state.image_back }} style={styles.logo} ></Image>
    </View>
    <View style={styles.footer_form}>
        <Button rounded success type="outline" title="Guardar Registro" onPress={() => {this.GuardarForm()}}/>
    </View>
  </ScrollView>
  );
}

}

const styles = StyleSheet.create({
    card: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },container : {
      flex : 1,
      flexDirection : 'column',
      backgroundColor : 'green'
    },
    header : {
      flex: 0.3,
      flexDirection : 'row',
      marginTop : 40
    },
    headerLeft : {
      flex: 1,


    },
    headerRight : {
      flex : 1,

    },
    footer_form : {
      flex: 1,
      flexDirection : 'row',
      marginTop : 25,
      alignItems: 'center',
      justifyContent: 'center',
    },
    body :{
      marginTop : 25,
      flex: 1,
      alignItems : 'center',
      justifyContent : 'center'
    },
    card :{
      marginTop : 25,
      flex: 1,
      alignItems : 'center',
      justifyContent : 'center'
    },
    logo : {
      flex: 1,
      flexDirection : 'column',
      width : 100,
      height : 100,
      borderWidth : 1,
      borderColor: 'red',
      padding : 5,
      marginTop : 10,
      resizeMode : 'contain'
    },
  });