I am implementing a word search facility in my React Native app. I have a MobX store, wordStore
. Each text change triggers a database query via the setFilter
action. This all works under the hood as I can see from console debug output.
However, the WordList
component seems to disappear as soon as any updates are triggered, i.e. if I set a default filter string it shows matching items in the list, but as soon as any text changes it disappears.
Is there anything I'm missing? The strange thing is the WordList.render()
method is executed even though it is not visible.
EDIT: Rendering the array's .toString()
method works fine from the containing component, but strangely iterating over the array also displays the same behaviour, disappearing on update.
The containing component:
const WordSearch = observer(class WordSearch extends React.Component {
constructor(props) {
super(props);
}
render() {
let words = wordStore.getWords(); // For debugging
return (
<View>
<TextInput
style={styles.textInput}
onChangeText={(filter) => wordStore.setFilter (filter)}
value={wordStore.filter}
/>
<Text>{words.toString()}</Text> <!-- This works -->
<View style={{flex:1}} key={wordStore.filter}> <!-- This disappears too -->
{words.map((word, i) => {
console.log ('word: '+word);
return <View style={{flex:1}} key={i}>
<Text>{word}</Text>
</View>
})}
</View>
<WordList {...this.props} />
</View>
);
}
// ...
});
and the WordList component:
const WordList = observer(class WordList extends Component {
constructor(props) {
super(props);
this.dataSource = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
})
}
componentWillReact() {
console.log("I will re-render, since the words have changed!");
}
componentWillUpdate() {
console.log("Will update")
let words = wordStore.getWords();
this.dataSource = this.dataSource.cloneWithRows(words);
console.log ("words:");
console.log (words);
}
render() {
return (
<View style={styles.container}>
<ListView
key={wordStore.words}
dataSource={this.dataSource}
renderRow={this.renderWordRow}
style={styles.listView}
/>
</View>
)
}
renderWordRow = (word, sectionID, rowID) => {
console.log ('rendering word row: '+word)
return (
<TouchableHighlight
underlayColor="grey">
<View style={styles.rowContainer}>
<Text style={styles.title}>{word}</Text>
</View>
</TouchableHighlight>
);
}
});
export default WordList;