I am working with ReactNative for the first time. I am trying to build ListViewbased on what the api returns. Here is my component:
'use strict';
var React = require('react-native');
var api = require('../utils/api');
var {
ActivityIndicatorIOS,
ListView,
StyleSheet,
Text,
TextInput,
TouchableHighlight,
View
} = React;
class CheckIn extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
})
};
}
search(searchTerm) {
api.search(searchTerm)
.then((response) => {
this.setState({
isLoading: false,
dataSource: this.state.dataSource.cloneWithRows(response)
})
});
}
renderCustomRow(row) {
return (
<TouchableHighlight style={styles.row}>
<View style={styles.container}>
<Text>{row.name}</Text>
</View>
</TouchableHighlight>
);
}
render() {
return (
<View style={{marginTop: 65}}>
<TextInput
style={styles.search}
placeholder="Search"
onChangeText={(text) => {
this.search(text);
this.setState({isLoading: true});
}}/>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderCustomRow.bind(this)}
style={styles.listView} />
<ActivityIndicatorIOS
animating={this.state.isLoading}
color='#111'
size="large"></ActivityIndicatorIOS>
</View>
)
}
}
var styles = StyleSheet.create({
search: {
height: 40,
padding: 5,
borderBottomWidth: 2,
borderBottomColor: '#000'
}
});
module.exports = CheckIn;
When I enter one letter in the search bar, an activity indicator appears, api returns a valid JSON response (checked using console.log), and then the activity indicator should disappear, but it is not. If I type the second letter, I get the following error:
Cannot read property '_currentElement' of null

Anything I think is missing?
I am using ReactNative 0.14, npm - version 3.5
source
share