Component disappears on update

Question

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;

Answer 1

This was a silly mistake. It was due to the flex not being set in the containing view. The correct code for the above example:

    <View style={{flex:1}}>
      <TextInput
        style={styles.textInput}
        onChangeText={(filter) => wordStore.setFilter (filter)}
        value={wordStore.filter}
      />
      <WordList {...this.props} />
    </View>