Skip to content

Instantly share code, notes, and snippets.

@cooperka
Last active June 18, 2020 05:36
Show Gist options
  • Save cooperka/b5ba65ed562832ed76be6bd5f4137936 to your computer and use it in GitHub Desktop.
Save cooperka/b5ba65ed562832ed76be6bd5f4137936 to your computer and use it in GitHub Desktop.
Migrating from ListView to FlatList in React Native.
-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>
);
}
}
@fernandamaiait
Copy link

Saved mine too! S2

@nihp
Copy link

nihp commented Dec 10, 2019

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>
     )
   }
 };

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment