synchronized calendar with interpreter

screens/main/Calendar.js

 import React, { Component } from 'react';
 import {StyleSheet,View} from 'react-native';
-import CalendarPicker from 'react-native-calendar-picker';
-
+import { Calendar } from 'react-native-calendars';
 
 export default class Calendario extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      markedDates: this.props.route.params.markedDates,
       selectedStartDate: null,
       interpreter_id : this.props.route.params.Intereprete_id,
       mapflag : this.props.route.params.Flag,
       I_username: this.props.route.params.I_Username,
     };
     this.onDateChange = this.onDateChange.bind(this);
-    
   }
 
+  componentDidMount(){
+    this.forceUpdate();
+    this.setState({markedDates: this.props.route.params.markedDates});
+  };
+
   onDateChange(date) {
     this.setState({
       selectedStartDate: date,
     });
-    console.log(date)
-    console.log(this.props.route.params.Flag)
     
-    if(this.state.mapflag == false){
-      this.props.navigation.navigate('StateTime', {Appointment: date._d, int_id : this.state.interpreter_id, 
-        Flag: this.state.mapflag, I_Token: this.state.i_token, U_Token: this.state.u_token
-        ,Username: this.state.username, I_Username: this.state.I_username});
-    }
-    else{
-      this.props.navigation.navigate('Map', {Appointment_Date: date._d, int_id : this.state.interpreter_id, 
-        Flag: this.state.mapflag, I_Token: this.state.i_token, U_Token: this.state.u_token
-        ,Username: this.state.username, I_Username: this.state.I_username});
+    if(this.state.markedDates[date.dateString] != undefined){
+      if(this.state.markedDates[date.dateString].selected == true){
+        if(this.state.mapflag == false){
+          this.props.navigation.navigate('StateTime', {Appointment: date._d, int_id : this.state.interpreter_id, 
+            Flag: this.state.mapflag, I_Token: this.state.i_token, U_Token: this.state.u_token
+            ,Username: this.state.username, I_Username: this.state.I_username});
+        }
+        else{
+          this.props.navigation.navigate('Map', {Appointment_Date: date._d, int_id : this.state.interpreter_id, 
+            Flag: this.state.mapflag, I_Token: this.state.i_token, U_Token: this.state.u_token
+            ,Username: this.state.username, I_Username: this.state.I_username});
+        }
+      }
     }
   }
   
   render() {
     const { selectedStartDate } = this.state;
     const today = new Date();
-    console.log(today)
-    const appointment = selectedStartDate ? selectedStartDate.toString() : '';
-    console.log(this.props.route.params)
+    //const appointment = selectedStartDate ? selectedStartDate.toString() : '';
     return (
       <View style = {styles.container}>
-        <CalendarPicker
+        <Calendar
+          markedDates={this.state.markedDates}
           minDate={today}
-          onDateChange={this.onDateChange}
+          onDayPress={this.onDateChange}
           selectionMode="singleDay"
           scrollMode="oneMonth"
           monthsAfter={24}
           
-        />
-        
+        />   
         </View>
     );
   }
     backgroundColor: '#FFFFFF',
     marginTop: 100,
   },
-});
-   
-  
-
+});