React-native Sqlite, force listview to update with new data

Question

I have 2 tables inside a sqlite file and i\m trying to change the content of a listview based on picker selection.

The query is running fine but the listview still shows the old data. How i can force the listview to recycle with the new data?

The new data is shown if i use search input.

  constructor(props) {
    super(props);
    this.state = {
      query: null,
      selected1: 'table01',
      progress: [],
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => { row1 !== row2; },
      }),
      searchText: '',
      filteredData: [],

    };
  }

  componentWillMount() {
    this.callQuery();
  }

  componentWillUnmount() {
    this.closeDatabase();
  }

  callQuery() {
    if (this.state.selected1 === 'table01') {
      this.setState({ query: 'select * from table01' }, this.openDB());
    } else if (this.state.selected1 === 'table02') {
      this.setState({ query: 'select * from table02' }, this.openDB());
    } else {
      console.log('Error creating query');
    }
  }
  openDB() {
    const that = this;
    db.transaction((tx) => {
      tx.executeSql(this.state.query, [], (tx, results) => {
        console.log('Query completed');
        that.setState(that.state);
        const len = results.rows.length;

        this.setState({ progress: [] });

        for (let i = 0; i < len; i++) {
          const row = results.rows.item(i);
          const obj = {
            code: row.cod,
            name: row.name,
          };
          that.state.progress.push(obj);
        }
        that.setState(that.state);
      });
    });
  }




setSearchText = (event) => {
    const searchText = event.nativeEvent.text;
    const text = searchText.toLowerCase();
    const data = this.state.progress;
    const filteredArray = data.filter((item) => {
      if (item.name && item.code) {
        const itemName = item.name.toLowerCase();
        const codeName = item.code.toLowerCase();
        return (itemName.search(text) !== -1 || codeName.search(text) !== -1);
      }
      return false;
    });
    this.setState({
      filteredData: filteredArray,
      searchText,
    });
  };

  onValueChange(key: string, value: string) {
    const newState = {};
    newState[key] = value;
    this.setState(newState);
    this.callQuery();
  }

renderProgressEntry(entry) {
    return (<View>
            <Text style={styles.backTextWhite}>{entry.name}</Text>
        </View>);
  }


render() {
    const ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => { row1 !== row2; } });
    const data = this.state.searchText ? this.state.filteredData : this.state.progress;
    return (
            <Picker
                  mode="dropdown"
                  selectedValue={this.state.selected1}
                  onValueChange={this.onValueChange.bind(this, 'selected1')}
                >
                    <Item label="table01" value="table01" />
                    <Item label="table02" value="table02" />
            </Picker>
            <Input
              onSubmitEditing={this.setSearchText.bind(this)}
              autoCapitalize="none"
              autoCorrect={false}
              returnKeyType="go"
            />
            <ListView
              initialListSize={1}
              pageSize={1}
              removeClippedSubviews
              enableEmptySections
              dataSource={ds.cloneWithRows(data)}
              renderRow={this.renderProgressEntry}
              style={{ flex: 1 }}
            />

Answer 1

The problem was the picker value that was not being set properly, also added arrow function call.

  onValueChange(key: string, value: string) {
    this.setState({
      selected1: value,
    }, () => { this.callQuery(); });
  }