Migrating from ListView to FlatList in React Native.

ListView to FlatList.diff

-import { Text, View, ListView } from 'react-native';
+import { Text, View, FlatList } from 'react-native';

 import style from './styles';
 import listData from './listData';

 class App extends Component {

-  constructor(props) {
-    super(props);
-
-    const dataSource = new ListView.DataSource({
-      rowHasChanged: (r1, r2) => r1 !== r2,
-      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
-    });
-
-    this.state = {
-      dataSource: dataSource.cloneWithRowsAndSections(listData),
-    };
-  }
-
-  componentWillReceiveProps(newProps) {
-    this.setState({
-      dataSource: this.state.dataSource.cloneWithRows(newProps.listData),
-    });
-  }
-
-  renderRow(rowData) {
-    return <Text style={style.row}>{rowData}</Text>;
+  renderItem({ item, index }) {
+    return <Text style={style.row}>{item}</Text>;
   }

  render() {
    return (
      <View style={style.container}>
         <Text style={style.welcome}>
           Welcome to React Native!
         </Text>
-        <ListView
-          dataSource={this.state.dataSource}
-          renderRow={this.renderRow}
+        <FlatList
+          data={listData}
+          renderItem={this.renderItem}
         />
      </View>
    );
  }

}

How will the beginners know what's inside of listData? Should provide whole code.

@cerberus2px It should be an array of your objects.

[ { name: 'Some person', phone: '902830928903', time:'10:30am' }, { name: 'Some person', phone: '902830928903', time:'10:30am' }, { name: 'Some person', phone: '902830928903', time:'10:30am' }, { name: 'Some person', phone: '902830928903', time:'10:30am' }, { name: 'Some person', phone: '902830928903', time:'10:30am' }, { name: 'Some person', phone: '902830928903', time:'10:30am' }, { name: 'Some person', phone: '902830928903', time:'10:30am' }, { name: 'Some person', phone: '902830928903', time:'10:30am' } ]

thank you! saved my day

Saved mine too! S2

I am getting object values after migrating from ListView to Flatlist. Onselect need to return the output in array format.

renderOptionList = () => {
   const {
     noResultsText,
     listViewProps,
     keyboardShouldPersistTaps,
     keyExtractor,
   } = this.props

   const { ds } = this.state;
   if (!ds.length) {
     return (
     <FlatList
       data={ds}
         keyExtractor={keyExtractor||this.keyExtractor}
         {...listViewProps}
         renderItem={() => (
           <View style={styles.noResults}>
             <Text style={styles.noResultsText}>{noResultsText}</Text>
           </View>
         )}
       />
     )
   } else {
     return (
       <FlatList
         keyExtractor={keyExtractor||this.keyExtractor}
         {...listViewProps}
         data={ds}
         renderItem={this.renderOption}
       />
     )
   }
 };

 renderOption = ({item}) => {
   const {
     selectedOption,
     renderOption,
     optionTextStyle,
     selectedOptionTextStyle
   } = this.props;

   const { key, label } = item
   let style = styles.optionStyle;
   let textStyle = optionTextStyle||styles.optionTextStyle;
   if (key === selectedOption) {
     style = styles.selectedOptionStyle;
     textStyle = selectedOptionTextStyle ||styles.selectedOptionTextStyle
   }

   if (renderOption) {
     return renderOption(item, key === selectedOption)
   } else {
     return (
       <TouchableOpacity activeOpacity={0.7}
         style={style}
         onPress={() => this.props.onSelect(item)}
       >
         <Text style={textStyle}>{label}</Text>
       </TouchableOpacity>
     )
   }
 };