CODEWITHSUNDEEP
arrayssqlitereact-nativereact-native-flatlist
Khalil Ahmed
Khalil Ahmed

Reputation: 11

How to pop results from sqlite in Array in react-native?

I am a completely newbie in react native and i am trying to learn it. I want to get results from SQLite and pop them in the array which i could then use in Flat list to display .. Here is my Code: 

    //imports

import React,{Component} from 'react';
import {View,Text,FlatList} from 'react-native';



//create component

var SQLite = require('react-native-sqlite-storage')
var db=SQLite.openDatabase({name: 'test.db', createFromLocation: '~sqliteexample.db'})

class DbTask extends Component {


    constructor(props){
        super(props)

        this.state={
            data: []

        };

        db.transaction((tx)=>{

            tx.executeSql('Select * from `pet`',[],(tx,results)=>{

               var len=results.rows.length;
                for(let i=0; i<len; i++){
                 var row=results.rows.item(i);
                 this.state.data.push(row.owner);

                 }


            });

        });

    };


    render(){

        return(
        <View>

           <FlatList data={this.state.data} 
           renderItems={
            ({item})=> <Text>{item.owner}</Text>

           }
           > </FlatList>
        </View>
        );

     }

}


export default DbTask;

I tried to add some alerts in For loop and it showed me correct names of the owners . But i don't get it , either i am not able to push them in the "data" array or my Flat list isn't working.

Any help would be appreciated. Thanks in advance. Regards.

Upvotes: 0

Views: 1841

Answers (1)

Khalil Ahmed
Khalil Ahmed

Reputation: 11

P.S : I modified my database a little so other than that the problem was in my flat-List. Just modified the flat-List like below and it worked like a charm: 

<FlatList 
    data={this.state.data} 
    keyExtractor={((item, index) => "itemNo-" + index)}
    renderItem={({item}) => (
        <View style={{flex:1 , flexDirection:'row',justifyContent:'flex-start',marginBottom:10}}>
            <View style={{paddingLeft:20,width:60}}>
            <Text>{item.Number}</Text>
            </View>
            <View style={{paddingLeft:40,width:120}}>
            <Text>{item.Owner}</Text>
            </View>
            <View style={{paddingLeft:50,width:150}}>
            <Text>{item.PetName}</Text>
            </View>
        </View>
    )
  }
/>

Upvotes: 1

Related Questions