ScrollView rendering updated components without data in react-native?

Question

I am having my page inside a ScrollView in react-native app. On first load the child components lets say multiple TextInput's render perfectly fine.

Each TextInput has a unique key. When I start updating any of the TextInput field, the other components just collapse. By collapse I mean the component is present but will not show any data. The onPress event works on collapsed components but the text doesn't show up.

One way I found was to add a unique random key on every render but then the focus from the TextInput is lost, which is not a good user experience.

Code:

class App extends React.Component {
  constructor(props) {
   super(props);
   this.state= this.props;
  }

  buildList(data) {
    _.map(data, blog => {
      return(
      <View key={blog.id}>
        <Text>{blog.title}</Text>
        <TextInput
         placeholder={blog.label}
         onChangeText={text => onChangeText(text)}
         value={value}
        />
      </View>
     );
    }
  }

  render() {
    const {
          data
        } = this.state;
    return (
      <View style={mainStyles.pageWrap}>
        <ScrollView style={mainStyles.contentWrap}>
          <View>
            {
              this.buildList(
                data
              )
            }
          </View>
        </ScrollView>
      </View>
    );
  }
}

Answer 1

Went through the documentation and added style={{ flex:1 }} to each child component and that fixed it.

In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.