Warning when using the SectionList sample from the tutorial #16231
Description
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
- Go to the
Using List Viewstutorial - Copy the sample from the
SectionList - 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);