Calling child from parent

BookedData.js

import React, { Component } from 'react';
import { View, Text, StyleSheet, Dimensions} from 'react-native';

export default class BookedDate extends Component {
    constructor(props) {
        super(props);
      }
  render() {
    return (
      <View style={styles.container}>
         <View style={{flexDirection: 'row',borderTopWidth: 0.192, padding: 5, borderColor: '#00a3ee' }}>
                     <View style={{ flex: 0.25 ,borderRadius: 4, paddingTop: 8 , paddingRight: 5 ,alignItems: 'center'}}>
                        <Text style={{ color: '#00a3ee', fontSize: 25 }}>{this.props.date}</Text>
                        <Text style={{ color: '#00a3ee', fontSize: 12 }}>{this.props.day}</Text>
                     </View>
                    <View style={{ flex: 0.75, flexWrap: 'wrap', padding: 3 }}>
                       <Text style={{ color: '#d9d9d9', textAlign: 'left' }}>{this.props.body}</Text>
                   </View>         
           </View>
      </View>
    );
  }
}

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

Calendar.js

import React, { Component } from 'react';
import Icons from 'react-native-vector-icons/Ionicons';
import { 
  View, 
  StyleSheet, 
  BackHandler,
  TextInput,
  Text, 
  Dimensions, 
  TouchableOpacity, 
  Modal, 
  TouchableWithoutFeedback, 
  ScrollView,
  AsyncStorage,
} from 'react-native';
import { NavigationStyle } from '../../common/NavigatorStyle'; 
import Header from '../../common/ViewOwnProfileDashBoard'; 
import {Calendar, CalendarList} from 'react-native-calendars';
import url from '../../common/api-constants';
import BookedDate from './BookedDate';


const ACCESS_TOKEN = 'access_token';

export default class CalendarsScreen extends Component {
  
  static navigatorStyle = NavigationStyle;

  componentWillMount() {
    this.getCall();
  }

  constructor(props) {
    super(props);
    this.state = {
      isModalVisible: false,
      pickerDisplayed: false,
      text: '',
      Token: '52adc46b1a3ed66e2ba334b5b30aea014f9d05bf711f5dc3036c0e5b4bf5c12d',
      events: []
    };
    this.onDayPress = this.onDayPress.bind(this);
  }

  // componentWillMount() {
  //   this.getToken()
  // }

  // async getToken() {
  //   try {
  //     let token = await AsyncStorage.getItem(ACCESS_TOKEN);
  //     console.log(`the token is ${token}`);
  //     this.setState({ Token: token })
  //   } catch (error) {
  //     console.log('Something Went Wrong');
  //   }
// http://13.127.136.45/api/v1/profile/availability?access_token=8de7cc67016138b48fdc1272461bb71342b895603cb69eb29e274ac13a59e66c&id=575
  // }


  togglePicker = () => {
    this.setState({
    pickerDisplayed: !this.state.pickerDisplayed
    });
  }
  
  toggleModal = () =>
  this.setState({ isModalVisible: !this.state.isModalVisible });

  getCall = () => {
    //this.togglePicker();
    fetch(`${url}/profile/availability?access_token=${this.state.Token}&id=575`, {
      method: 'GET',
    })
      .then(res => res.json())
      .then( data => {
        data.availability.map(data => {
          this.setState(prevState => ({
            events: [...prevState.events, data]
          }))
        }) 
      }) 
    }
    
  availability = () => {
    this.togglePicker();
    fetch(`${url}/availability?access_token=${this.state.Token}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        booked_date: this.state.selected,
        body: this.state.text
      })
    })
      .then(res => res.json())
      .then( data => {
        this.setState(prevState => ({
          events: [...prevState.events, data]
        }))
      }) 
    }

  render() {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.header}>
          <Header 
           Search={()=>this.search()}
          color="#ffff" colors='#ffff' Colors='#ffff' colorss='#00a3ee' navigator={this.props.navigator} />
          </View>
          <View style={styles.arrowContainer}>
          <TouchableOpacity style={{ paddingLeft: 25 }}><Icons size={25} name='md-arrow-back' color='#ffffff' /></TouchableOpacity> 
          </View>
        <CalendarList
          onDayPress={this.onDayPress}
          style={styles.calendar}
          horizontal={true}
          pagingEnabled={true}
          markedDates={{[this.state.selected]: {selected: true, disableTouchEvent: true }}}
          theme={{
            calendarBackground: '#232323',
            textSectionTitleColor: '#ffb901',
            dayTextColor: '#ffb901',
            todayTextColor: 'white',
            selectedDayTextColor: '#00a3ee',
            monthTextColor: '#ffb901',
            selectedDayBackgroundColor: '#232323',
            //arrowColor: 'white',
            textDisabledColor: '#707070',
            'stylesheet.calendar.header': {
              week: {
                marginTop: 3,
                flexDirection: 'row',
                justifyContent: 'space-between',
              },
            }
          }}
        />
           <View style={{ paddingTop: 10 }}>
              {(this.state.events.length > 0) ? this.state.events.map((data) => {
                return <BookedDate body={data.availability.body} date={data.date} day={data.day} key={data.availability.id}/>
              })  :  null}     
           </View>
           <View style={{ marginTop: 75 }}>
           <Modal 
                transparent visible={this.state.pickerDisplayed} animationType={'none'}
                onRequestClose={() => {
                }}
            >   
                   <TouchableWithoutFeedback onPress={() => this.togglePicker()}>
                    <View style={styles.modalStyle}>
                    <View style={styles.outerView}>
                                <Text style={{ color: '#00a3ee', fontWeight: 'bold', fontSize: 15 }}>{this.state.selected}</Text>
                                <TouchableOpacity onPress={() => this.availability()} style={styles.modalsStyle}><Icons size={28} name='md-arrow-forward' color='#00a3ee' /></TouchableOpacity>
                    </View>
                      <View style={{padding: 10 }}>
                      <TextInput
                        style={{fontSize: 15 }}
                        multiline = {true}
                        numberOfLines = {4}
                        onChangeText={(text) => this.setState({text})}
                        value={this.state.text}
                        />
               <TouchableOpacity style={{ paddingTop: 5, paddingLeft: 180 }}><Icons size={28} name='md-trash' color='#00a3ee' /></TouchableOpacity>

                      </View>
            </View>
            </TouchableWithoutFeedback>
            </Modal>
            </View>
      </ScrollView>
    );
  }

  async onDayPress(day) {
   await this.setState({
      selected: day.dateString
    });
    console.log(this.state.selected);
    this.togglePicker();
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 2,
    backgroundColor: '#232323'
  },
  header: {
  flex: 0.18, 
  marginTop: 10
  },
  arrowContainer: {
    marginTop: 20,
    flexDirection: 'row',
    },
  calendar: {
    paddingTop: 5,
    borderColor: '#eee',
    height: 350
  },
  text: {
    textAlign: 'center',
    borderColor: '#bbb',
    padding: 10,
    backgroundColor: '#eee'
  },
  modalStyle: {
    backgroundColor: '#ffffff', 
    alignSelf: 'center',
    marginTop: '60%',
    width: 225, 
    height: 225,
    borderRadius: 8
  },
  modalsStyle: {
    alignItems: 'flex-end',
},
outerView: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 15
},
});