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

Persian Calendar Modal Component for React Native

import React from 'react';
import { persianCalendarCss } from './main.css';
import { View, Text } from 'native-base';
import { Touchable } from './Touchable';
import { JALALI_TYPE, MILADI_TYPE } from './helper';

const ModalHeader = (props) => {

    const { calType, changeCalType } = props
    return (
        <View style={persianCalendarCss.containerType}>
            {props.hasMiladi === true ?
                <View style={persianCalendarCss.viewType}>
                    <Touchable style={[persianCalendarCss.typeJalali, {
                        borderTopLeftRadius: calType === JALALI_TYPE ? 15 : 0,
                        backgroundColor: calType === JALALI_TYPE ? '#fff' : 'gray'
                      }]}
                        onPress={changeCalType}
                        value={JALALI_TYPE}>
                        <Text>
                            شمسی
                       </Text>
                    </Touchable> :


                    <Touchable style={[persianCalendarCss.typeMiladi, {
                        borderTopRightRadius: calType === MILADI_TYPE ? 15 : 0,
                        backgroundColor: calType === MILADI_TYPE ? '#fff' : 'gray'
                    }]}
                        onPress={changeCalType}
                        value={MILADI_TYPE}>
                        <Text>
                            میلادی
                        </Text>
                    </Touchable>
                </View>

                : false
            }
        </View>
    )
};

export default ModalHeader;