use flatlist instead scrollview - react-native

Question

I've the following code, it works fine I can connect to an API and fetch the data, since I'm getting a huge list of threads how can I refactor the code using Flatlist instead?
thanks
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import axios from 'axios';
import ThreadDetail from './ThreadDetail';
class TopicList extends Component {
state = {
threads: []
};
componentWillMount() {
axios.get('https://xxxxxxx.devmn.net/api/v1/forums/threads?topic_id=2418', {
headers: {
'client-id': 'a0f21e'
}
})
.then(response => this.setState({ threads: response.data.threads }));
}
renderThreads() {
return this.state.threads.map(thread =>
<ThreadDetail key={thread.thread.id} thread={thread.thread} />
);
}
render() {
return (
<ScrollView style={styles.listStyle}>
{this.renderThreads()}
</ScrollView>
);
}
}
const styles = {
listStyle: {
backgroundColor: 'purple'
}
}
export default TopicList;

Answer 1

export default class TopicList extends Component {
constructor() {
super(props);
this.state = {
threads: []
}
}
componentWillMount() {
.... // same as your code
}
renderItem({index, item}) {
return <ThreadDetail thread={item.thread} />
}
render() {
return <View>
<FlatList
data={this.state.threads}
renderItems={this.renderItem}
keyExtractor={(item, index) => item.thread.id} />
</View>
}
}
note: I haven't tested this