Add basic getItemLayout and add fallback for issue with initialScroll…

…Index not rendering first item until user scroll (see description)

Follow issue here: facebook/react-native#13202

initial state of scrollindex can be removed, as well as the timeout + ref

src/components/ListItem.js

@@ -42,6 +42,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',    
     justifyContent: 'center',    
     alignSelf: 'stretch',
+    height: 600
   },
   header: {
     backgroundColor: '#8866ee',

src/containers/MainScreen.js

@@ -11,14 +11,24 @@ import ContextMenu from '../components/ContextMenu';
 import ListItem from '../components/ListItem';
 import ListItemSeparator from '../components/ListItemSeparator';
 
+const initialScrollIndex = 6;
+
 class MainScreen extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      scrollIndex: 6
+    };
+  }
+
   static navigationOptions = {
     title: 'Main Screen',
   };
 
   _keyExtractor = (item, index) => item;
   _getItem = (items, index) => items.get(index);
   _getItemCount = (items) => (items.size || 0);
+  _getItemLayout = (data, index) => ({length: 600, offset: 600 * index, index: index})
   _renderItem = ({item}) => (
     <ListItem
       id={item}
@@ -35,6 +45,10 @@ class MainScreen extends React.Component {
     />
   )
 
+  componentDidMount() {
+    setTimeout(() => {this.refList.scrollToIndex({animated: true, index: this.state.scrollIndex}), 300});
+  }
+
   render() {  
     const calendar = this.props.calendar;
     const addMonthsAfter = this.props.addMonthsAfter;
@@ -43,6 +57,7 @@ class MainScreen extends React.Component {
     return (
       <View style={styles.container}>
         <VirtualizedList
+          ref={node => this.refList = node}
           style={styles.list}
           contentContainerStyle={styles.listContentContainer}
           ListFooterComponent={(<Text>Bottom</Text>)}        
@@ -51,7 +66,9 @@ class MainScreen extends React.Component {
           renderItem={this._renderItem}
           getItem={this._getItem}
           getItemCount={this._getItemCount}
+          getItemLayout={this._getItemLayout}
           keyExtractor={this._keyExtractor}
+          initialScrollIndex={this.state.scrollIndex - 1} // subtract 1 due to https://github.com/facebook/react-native/issues/13202
           //ItemSeparatorComponent={ListItemSeparator}
           onEndReached={addMonthsAfter}
           //showsVerticalScrollIndicator={false}