react native - use flatlist instead scrollview -

i've following code, works fine can connect api , fetch data, since i'm getting huge list of threads how can refactor code using flatlist instead?

thanks

import react, { component } 'react'; import { scrollview } 'react-native'; import axios 'axios'; import threaddetail './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; 

export default class topiclist extends component {       constructor() {            super(props);             this.state = {                 threads: []            }      }       componentwillmount() {            .... // same 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: haven't tested this