Custom ReactModal with fully custom support having OK and Cancel button

ReactModal

import React from "react";
import {Text, View, TouchableOpacity} from "react-native";
import Theme from "../utill/Color";
import Modal from 'react-native-modal';
import Layout from "../utill/Layout";

const ReactModal = (props) => {
    return (

        <Modal
            isVisible={props.isVisible}
            onBackButtonPress={props.onBackButtonPress}
            onBackdropPress={props.onBackdropPress}
            animationOutTiming={props.animationOutTiming
            ? props.animationOutTiming
            : 500}
            animationIn={props.animationIn
            ? props.animationIn
            : 'slideInUp'}
            animationOut={props.animationOut
            ? props.animationOut
            : 'slideOutDown'}
            animationInTiming={props.animationInTiming
            ? props.animationInTiming
            : 500}
            onModalWillHide={props.onModalWillHide}
            onModalHide={props.onModalHide}
            onModalWillShow={props.onModalWillShow}
            onModalShow={props.onModalShow}
            onSwipeStart={props.onSwipeStart}
            onSwipeMove={props.onSwipeMove}
            onSwipeComplete={props.onSwipeComplete}
            onSwipeCancel={props.onSwipeCancel}
            scrollOffset={props.scrollOffset
            ? props.scrollOffset
            : 0}
            scrollOffsetMax={props.scrollOffsetMax
            ? props.scrollOffsetMax
            : 0}
            scrollHorizontal={props.scrollHorizontal
            ? props.scrollHorizontal
            : false}
            style={[
            {
                alignSelf: 'center'
            },
            props.style
        ]}>
            <View
                style={[
                {
                    width: Layout.window.width - Layout.window.width / 8,
                    backgroundColor: Theme.white,
                    borderRadius: 10
                },
                props.containerStyle
            ]}>
                <View
                    style={[
                    {
                        backgroundColor: Theme.primary,
                        alignItems: 'center',
                        justifyContent: 'center',
                        height: 50,
                        borderTopRightRadius: 10,
                        borderTopLeftRadius: 10
                    },
                    props.titleContainerStyle
                ]}>
                    <Text
                        style={[
                        {
                            color: Theme.white,
                            fontWeight: 'bold'
                        },
                        props.titleStyle
                    ]}>{props.title}</Text>
                </View>
                <View
                    style={[
                    {
                        paddingHorizontal: 20,
                        paddingVertical: 20,
                        paddingBottom: 40
                    },
                    props.styleMainView
                ]}>
                    {props.mainView}
                </View>
                <View
                    style={{
                    flexDirection: 'row',
                    height: 40
                }}>
                    <TouchableOpacity
                        style={{
                        flex: 1,
                        backgroundColor: Theme.primary,
                        justifyContent: 'center',
                        alignItems: 'center',
                        borderBottomLeftRadius: 10
                    }}
                        onPress={props.onOKPress}>
                        <Text
                            style={[
                            {
                                color: Theme.white,
                                fontSize: 14
                            },
                            props.styleOkTitle
                        ]}>{`OK`}</Text>
                    </TouchableOpacity>
                    {props.cancel && <TouchableOpacity
                        style={{
                        flex: 1,
                        backgroundColor: Theme.primary,
                        justifyContent: 'center',
                        alignItems: 'center',
                        borderBottomRightRadius: 10
                    }}
                        onPress={props.onCancelPress}>
                        <Text
                            style={[
                            {
                                color: Theme.white,
                                fontSize: 14
                            },
                            props.styleCancelTitle
                        ]}>{`Cancel`}</Text>
                    </TouchableOpacity>}
                </View>

            </View>
        </Modal>
    );
}

export default ReactModal