Skip to content

Instantly share code, notes, and snippets.

@hussainahmad
Last active Mar 3, 2021
Embed
What would you like to do?
Custom ReactModal with fully custom support having OK and Cancel button
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment