Warning when using the `SectionList` sample from the tutorial

[gabrielweyer]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

I'm not using react-native directly, instead I'm using create-react-native-app which I installed via npm.

Environment:

• OS: Win 10 Pro Version 1703 (OS Build 15063.608)
• Node: 6.9.1
• Yarn: not installed
• npm: 4.6.1
• Watchman: not installed (as far as I know)
• Xcode: not installed
• Android Studio: not installed

Packages: (wanted => installed)

Not too sure about this one, ran npm list --depth=0

+-- expo@21.0.2
+-- jest-expo@21.0.2
+-- react@16.0.0-alpha.12
+-- react-native@0.48.4
+-- react-native-scripts@1.5.0
`-- react-test-renderer@16.0.0-alpha.12

npm ERR! peer dep missing: react@>=15.4.0, required by react-native-branch@2.0.0-beta.3
npm ERR! peer dep missing: react@> 15.0.0, required by react-native-gesture-handler@1.0.0-alpha.22

Target Platform:

Nexus 5 - Android 6.0.1

Steps to Reproduce

1. Go to the Using List Views tutorial
2. Copy the sample from the SectionList
3. Run the app

Expected Behavior

I expected to see no warning in the app.

Actual Behavior

A warning was displayed at the bottom of the screen:

It also appears in the PowerShell console:

6:37:49 PM: VirtualizedList: missing keys for items, make sure to specify a key property on each item or provide a custom keyExtractor.
- node_modules\expo\src\Logs.js:187:24 in newConsoleFunc
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:76:15 in warn
- ... 77 more stack frames from framework internals

Reproducible Demo

import React, { Component } from 'react';
import { AppRegistry, SectionList, StyleSheet, Text, View } from 'react-native';

export default class SectionListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'D', data: ['Devin']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => SectionListBasics);