模态在本机基础上无法正常工作

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);