diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx index 1f2d069a..ee3d939d 100644 --- a/src/components/modal/index.tsx +++ b/src/components/modal/index.tsx @@ -2,7 +2,7 @@ import { isIOS } from '@consts' import { useKeyboardCtx } from '@src/context/Keyboard' import { useThemeContext } from '@src/context/Theme' import { highlight as hi, HighlightKey, mainColors, Theme } from '@styles' -import { KeyboardAvoidingView, Modal, StyleSheet, View } from 'react-native' +import { KeyboardAvoidingView, Modal, StyleSheet, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native' import { useSafeAreaInsets } from 'react-native-safe-area-context' interface IMyModalProps { @@ -12,6 +12,7 @@ interface IMyModalProps { success?: boolean hasNoPadding?: boolean close?: () => void + onBackdropPress?: () => void children: React.ReactNode } @@ -22,11 +23,12 @@ export default function MyModal({ success, hasNoPadding, close, + onBackdropPress, children }: IMyModalProps) { const { color, highlight } = useThemeContext() - const { isKeyboardOpen} = useKeyboardCtx() + const { isKeyboardOpen } = useKeyboardCtx() const insets = useSafeAreaInsets() const getCorrectStyle = () => { @@ -69,14 +71,22 @@ export default function MyModal({ onRequestClose={close} testID='testCoinSelectionModal' > - - - {children} - - + + + + {children} + + + + : null @@ -92,6 +102,9 @@ const styles = (pref: Theme, h: HighlightKey) => StyleSheet.create({ left: 0, backgroundColor: 'rgba(0, 0, 0, .5)', }, + modalContainer: { + flex: 1, + }, common: { backgroundColor: pref.BACKGROUND, alignItems: 'center',