How to scroll flatlist to bottom in react native

Question

I am making a react native appliation in which i am implementing a chat facility in my application.I chat screen after fetching message from server i want to display the chat like in whats app , i mean i want to scroll to bottom the flat list here is code what i am doing currently,

<ScrollView style={{width:'100%',paddingBottom:100,backgroundColor:'#F5F0F0',flex:1}}>
  <FlatList
    style={{marginBottom:70,}}
    data={this.state.chats}
    numColumns={1}
    onContentSizeChange={ () => { this.myFlatListRef.scrollToEnd({animated:true}) } }
    ref={ (ref) => { this.myFlatListRef = ref } }
    onLayout={ () => { this.myFlatListRef.scrollToEnd({animated:true}) } }
    showsVerticalScrollIndicator={false}
    renderItem={this.renderItem}
  />
</ScrollView>

i have also tried setting timeout in componentDidMount like this

 async componentDidMount(){

     setTimeout(() => {
       this.refs.myFlatListRef.scrollToEnd({animated: true});
     }, 100);



    var result  = this.props.navigation.getParam('result')

    this.setState({
      user_id : result['to_id'],
      user_name : result['name'],
      user_image : result['image'],

    })


    this.timer = setInterval(()=> this.fetchMessage(), 3000)
     this.fetchMessage()


  }

But above both does not works ? Why ? How can i scroll flat list to bottom ? Thanks in advance !