listar_articulos.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';

const db = SQLite.openDatabase('aalmarketapp.db');

export default class AppMarket extends Component {
    constructor(props) {
      super(props);
      this.state = {
        dataTodo : []
      };
    }

    fetchData(search){
        var query = "SELECT * FROM productos WHERE cod='" + search + "'";
        var params = [];
        db.transaction((tx) => {
            tx.executeSql(query, params, (tx,results) => {

              if(results.rows._array.length > 0){
                  this.setState({
                      dataTodo: results.rows._array
                  });
              }

            }, function(tx, err){
                Alert.alert("welcome");
            });
        });
    }

    async handleSearch(val){
        await this.fetchData(val);
    }

    render() {

    const listItem = this.state.dataTodo.map((item) =>

    <List key={item.productos_id}>
        <ListItem>
          <Row>
            <Col>
                <Image style={{width: 150, height: 150}} source={{uri: `data:image/jpeg;base64,${item.card_front}`}}/>
            </Col>
            <Col>
              <Text>{item.cod}</Text>
              <Text>{item.descripcion}</Text>
              <Text>{item.precio}</Text>
              <Text>VER DETALLES</Text>

            </Col>
          </Row>
        </ListItem>
      </List>
      );

        return (
            <ScrollView>
                <View style={styles.footer_form}>
                    <Button rounded success type="outline" title="Mostrar Registro" onPress={() => {this.handleSearch('wap')}}/>
                </View>
                <View>
                    {listItem}
                </View>
            </ScrollView>
            );
    }
}

const styles = StyleSheet.create({
    footer_form : {
      flex: 1,
      flexDirection : 'row',
      marginTop : 25,
      alignItems: 'center',
      justifyContent: 'center',
    },
  });