react-native-persian-calendar-modal/main/Calendar.js

Persian Calendar Modal Component for React Native

import React, { useState, useContext } from 'react';
import { Dimensions } from 'react-native';
import { View,Text } from 'native-base';
import Modal from "react-native-modal";
import PersianCalendar from './PersianCalendar';
import {JALALI_TYPE} from './helper';
import { CalendarContext } from './context';
import ModalHeader from './ModalHeader';


const Calendar = (props) => {

  const [calType, setCalType] = useState(JALALI_TYPE);
  const calendarContext = useContext(CalendarContext);

  const MiladiCalendar = () => {
    return (
      <View>
        <Text>
          miladi Calendar
        </Text>
      </View>
    )
  };

  const changeCalType = (type) => {
    setCalType(type);
  };

  let modalheight = Dimensions.get('window').height-50 ;


  return (
      <CalendarContext.Provider
          value={{
            hideModal: props.hideModal,
            setCalDate:props.setCalDate,
            value:props.date,
            format: props.format,
          }}
      >
        <Modal
               isVisible={props.visibleModal}
               hasBackdrop={true}
               onBackButtonPress={props.hideModal}
               onBackdropPress={props.hideModal}
               {...props.modalProps}
        >
          <View style={{
              // height:500,

              // flexDirection: 'column',
              // justifyContent: 'center',
              // alignItems: 'center'
          }}>
            <ModalHeader />

            {calType === JALALI_TYPE ?
                <PersianCalendar
                    calType={calType}
                    changeCalType={changeCalType}
                />
                :
                MiladiCalendar()
            }
          </View>
        </Modal>
      </CalendarContext.Provider>

  )
};

export default Calendar;