modal not working correctly in native base - react-native

Question

I want when i click the button, opening the modal. But modal is not opening correctly. And it is not readable.
Here is in my modal code :
<Modal
isOpen={showModal}
>
<Modal.Content top="-60" maxWidth={400} height={300}>
<Modal.CloseButton />
<Modal.Header> bilgiler</Modal.Header>
<Modal.Body>
<Text>09.08.2001</Text>
{/* <Select
minWidth="200"
accessibilityLabel="Choose Service"
placeholder="Son ölçüm tarihi seçiniz.."
_selectedItem={{
bg: "teal.600",
endIcon: <CheckIcon size="5" />
}} mt={1}
>
</Select>*/}
<Text>Adi ve soyadi</Text>
</Modal.Body>
<Modal.Footer>
<Button.Group space={2}>
<Button variant="ghost" colorScheme="blueGray" onPress={() => setShowModal(false)} >
Çıkış
</Button>
<Button onPress={() => setShowModal(false)} >
Kaydet
</Button>
</Button.Group>
</Modal.Footer>
</Modal.Content>
</Modal>
and pressable code :
<Box flex="1" >
<Pressable left={290} top="-35" onPress={() => setShowModal(true)}>
<Image size={7} source={require('../assets/clock.png')} />
</Pressable>
</Box>
I try to change pressable but it not working

Answer 1

Try this
Create a component for Model to reuse or use can have it in screen itself.
Modal.js
const Mdal = ({ ...props }) => {
const { onInputChanged, showModal, onClose, header, inputTitle, ...p }
= props;
const [isOpen, setIsOpen] = useState(false);
return (
<Modal
isOpen={showModal}
onClose={onClose}
_backdrop={{
_dark: {
bg: "coolGray.800",
},
bg: "warmGray.50",
}}
>
<Modal.Content borderWidth={2} width="500" maxWidth="93%" maxH="600">
<Modal.CloseButton />
<Modal.Header flexDirection="row">{header}</Modal.Header>
<Modal.Body>
<Text>Your View</Text>
</Modal.Body>
<Modal.Footer background={COLOR.card_action_bg}>
<Button.Group space={2}>
<Button
colorScheme="warmGray"
onPress={() => {
onInputChanged("if any passing value");
}}
>
Save
</Button>
<Button
colorScheme="red"
onPress={() => {
onClose();
}}
>
Cancel
</Button>
</Button.Group>
</Modal.Footer>
</Modal.Content>
</Modal>
);
};
export default Mdal;
In the screen where you want modal :
import { Model } from "the path if it is as component"
const [showModal, setShowModal] = useState(false);
Place it inside your view
<Modal
onInputChanged={onInputChanged}
showModal={showModal}
onClose={() => setShowModal(false)}
header={"(" + ticketId + ") - " + action}
inputTitle={"Reason for transfer"}
/>
onInputChanged - is the function
const onInputChanged = (changedText) => {
//received selected value in changedText
}
change the state of showModal to true on your pressable view(onPress) ->
setShowModal(true);