DATE PICKER REACT NATIVE USING FLATLIST

import React, { Component, Fragment } from "react";
import { StyleSheet, View, FlatList, Image, Text} from "react-native";
import { Appbar, TextInput, Caption, List, Button} from "react-native-paper";
import { Formik } from 'formik';
import * as yup from 'yup';
import DatePicker from 'react-native-date-picker';

const DATE_SCHEMA = yup.object().shape({
 
  start_date: yup.string()
    .required('Start Date Required'),
  end_date: yup.string()
    .required('End Date Required'),

});
const IMAGE = require("../assets/voice/flag-blue.png");

export default class AlertButton extends Component {

  state = {
    start_date : new Date(),
    end_date : new Date(),
    files : [],
    efiles : [{
      "id": "No Media",
      "userid": "No Media",         
      "filename": ""
    }]
   }

  searchMedia(values){

    var startobjdate = values.start_date.getFullYear()+'-'+(values.start_date.getMonth()+1)+'-'+values.start_date.getDate()+' '+values.start_date.toLocaleTimeString();
   
    var endobjdate = values.end_date.getFullYear()+'-'+(values.end_date.getMonth()+1)+'-'+values.end_date.getDate()+' '+values.end_date.toLocaleTimeString();;


    fetch('http://xxxxxxx/services/searchBydate?startdate='+ startobjdate + '&enddate=' + endobjdate)
    .then(response => response.json())
    .then(data => {
      if(data.status == true){
        this.setState({ files : data.result })
      }
      else {
        this.setState({ files : this.state.efiles })
      }
   
    });

  }

  render() {

    const { files, efiles } = this.state;
    return (
      <View style={styles.container}>  
          <Appbar.Header>
            <Appbar.BackAction
              onPress={this._goBack}
            />
            <Appbar.Content
              title="SELECT MEDIA"
            />       
          </Appbar.Header>   
        <View style={{ paddingVertical : 30 }}>      
          <Formik                           
                initialValues={{ start_date: this.state.start_date, end_date: this.state.end_date }}
                onSubmit={values => this.searchMedia(values)}
                validationSchema={DATE_SCHEMA}
                >
                {({ values, handleReset, handleChange, errors, setFieldTouched, touched, isValid, handleSubmit }) => (
                  <Fragment>
                    <View >
                    <View >
                    <Caption> Select start date</Caption>
                      <DatePicker
                        mode='datetime'
                        fadeToColor='red'
                        textColor='#AA0310'
                        locale= 'en-US'
                        date={values.start_date}
                        onDateChange={handleChange('start_date')}
                        style={{ backgroundColor : "#52B8FF", height : 70, width : 400}}
                      />
                      {touched.start_date && errors.start_date &&
                      <Text style={styles.errorInput} >{errors.start_date}</Text>
                      } 
                      </View>
                    
                      <View >  
                      <Caption> Select end date</Caption>
                      <DatePicker
                        mode='datetime'
                        textColor='#ffffff'
                        date={values.end_date}
                        onDateChange={handleChange('end_date')}
                        style={{ backgroundColor : "#FF5D5D", height : 70, width : 400}}
                      />
                         {touched.end_date && errors.end_date &&
                          <Text style={styles.errorInput} >{errors.end_date}</Text>
                        }                    
                      </View>
                    <View style={styles.inputError}>
                      <Text style={styles.errorApi}>{this.props.error}</Text>
                    </View>                          
                    <View>
                      <Button 
                        mode="contained"  
                        disabled={isValid ? false : true}                  
                        onPress={handleSubmit}
                        style={{ marginHorizontal : 30}}
                        loadingProps={{ size: "small", color: "white" }} 
                        theme={{ colors: { text: '#ffffff', primary: '#08D13E',  underlineColor: 'transparent',} }}               
                      > SEARCH MEDIA                 
                      </Button>
                      <Button 
                        mode="contained"                                         
                        onPress={handleReset}
                        style={{ marginHorizontal : 30, marginTop : 10}}                      
                        theme={{ colors: { text: '#ffffff', primary: '#ccc',  underlineColor: 'transparent',} }}               
                      > RESET                
                      </Button>
                    </View>
                    </View>   
                  
                    </Fragment>
                    )}
                    </Formik> 
       </View>
       
        <FlatList
          keyExtractor={item => item.id}         
          data={files.length > 0 ? files : efiles}
          renderItem={({item}) => this.renderMedia(item)}
          onRefresh={this.renderRefresh}
          refreshing={false}
          onEndReached={this.handleLoadMore}
          onMomentumScrollEnd={this.onMomentumScrollEnd}
          onMomentumScrollBegin={this.onMomentumScrollBegin}
          onEndReachedThreshold={50}
        />
      </View>
    );
  }
  renderRefresh = () => {
    console.log("SEARCH REFRESH")
  }
  handleLoadMore =()=>{
    console.log("SEARCH REFRESH REACHED END")
  }
 
renderMedia(item){
    return(
    <View>
       <List.Item
        title={item.id}
        description={item.filename}
        left={props => <List.Icon {...props} icon="photo" />}
        right={props => <Image {...props} source={IMAGE} style={{ width : 50, height : 50}} />}
      />
    </View>
  )
}

}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5FCFF"
  }
});