TypeError: undefined is not an object (evaluating 'this._layouts[i].x')

I’m trying to implement search (as the user types in the search box) on the list. However, I’m getting the following error TypeError: undefined is not an object (evaluating 'this._layouts[i].x').

When the search string (value) is empty and the list is updated with all the elements, the error occurs. I also tried different conditions such as returning originalList when value is ‘’, but it throws the same error as the list is updated with all the elements.

This is my code-

constructor(props) {
	super(props);
	let list = [{ name: 'Item1' }, { name: 'Item2' }];

	this._dataProvider = new DataProvider((r1, r2) => {
		return r1.name !== r2.name;
	});

	this.state = {
		list,
		originalList: _.clone(list),
		dataProvider: this._dataProvider.cloneWithRows(list)
	};
}

search(value) {
	this.setState(prevState => {
		return {
			list: _.filter(prevState.originalList, item=> {
				return value == '' || _.includes(item.name, value);
			})
		};
	});
}

render() {
	return (
		<Input
			placeholder="Search"
			autoFocus
			onChangeText={value => {
				this.search(value);
			}}
		/>
		<RecyclerListView
			layoutProvider={this._layoutProvider}
			dataProvider={this.state.dataProvider.cloneWithRows(this.state.list)}
			rowRenderer={this._rowRenderer.bind(this)}
		/>
	);
}

Any help would be much appreciated.

[keshavhub]

Hey @sksin28 Thanks for pointing out this issue but even after making the change you recommended, still the issue exists. I got a workaround(hack) for this but still didn’t find a good solution.

[sksin28]

The issue has been resolved. The dataprovider was not passed correctly which I believe resulted in dataprovider and list not being in sync.

So that no one else faces this issue, this is what my earlier code looked like-

import * as React from "react";
import { Text, View, TextInput } from "react-native";

import _ from "lodash";

import {
  DataProvider,
  LayoutProvider,
  RecyclerListView
} from "recyclerlistview";

export default class App extends React.Component {
  constructor(props) {
    super(props);

    let list = [{ name: "Item 1" }, { name: "Item 2" }];

    this._dataProvider = new DataProvider((r1, r2) => {
      return r1.name !== r2.name;
    });

    this._layoutProvider = new LayoutProvider(
      index => {
        return 1;
      },
      (type, dim) => {
        dim.width = 400;
        dim.height = 120;
      }
    );

    this.state = {
      list,
      originalList: _.clone(list),
      dataProvider: this._dataProvider.cloneWithRows(list)
    };
  }

  search(value) {
    this.setState(prevState => {
      return {
        list: _.filter(prevState.originalList, item => {
          return value == "" || _.includes(item.name, value);
        })
      };
    });
  }

  _rowRenderer(type, item) {
    return (
      <View>
        <Text>{item.name}</Text>
      </View>
    );
  }

  render() {
    return (
      <View style={{ marginTop: 50, width: 400, height: 400 }}>
        <TextInput
          style={{ width: "100%" }}
          placeholder="Search"
          placeholderTextColor="red"
          onChangeText={value => {
            this.search(value);
          }}
        />
        <RecyclerListView
          layoutProvider={this._layoutProvider}
          dataProvider={this.state.dataProvider.cloneWithRows(this.state.list)}
          rowRenderer={this._rowRenderer.bind(this)}
        />
      </View>
    );
  }
}

After changing the dataprovider property, the code looks like-

import * as React from "react";
import { Text, View, TextInput } from "react-native";

import _ from "lodash";

import {
  DataProvider,
  LayoutProvider,
  RecyclerListView
} from "recyclerlistview";

export default class App extends React.Component {
  constructor(props) {
    super(props);

    let list = [{ name: "Item 1" }, { name: "Item 2" }];

    this._dataProvider = new DataProvider((r1, r2) => {
      return r1.name !== r2.name;
    });

    this._layoutProvider = new LayoutProvider(
      index => {
        return 1;
      },
      (type, dim) => {
        dim.width = 400;
        dim.height = 120;
      }
    );

    this.state = {
      list,
      originalList: _.clone(list)
    };
  }

  search(value) {
    this.setState(prevState => {
      return {
        list: _.filter(prevState.originalList, item => {
          return value == "" || _.includes(item.name, value);
        })
      };
    });
  }

  _rowRenderer(type, item) {
    return (
      <View>
        <Text>{item.name}</Text>
      </View>
    );
  }

  render() {
    return (
      <View style={{ marginTop: 50, width: 400, height: 400 }}>
        <TextInput
          style={{ width: "100%" }}
          placeholder="Search"
          placeholderTextColor="red"
          onChangeText={value => {
            this.search(value);
          }}
        />
        <RecyclerListView
          layoutProvider={this._layoutProvider}
          dataProvider={this._dataProvider.cloneWithRows(this.state.list)}
          rowRenderer={this._rowRenderer.bind(this)}
        />
      </View>
    );
  }
}

@naqvitalha Thanks anyways.