I attempted to utilize this sample code to create an alert dialog in my react native app, but I encountered an error on Dialog (marked with ***) stating
TS2322: Type '{ children: Element[]; visible: boolean; onDismiss: () => void; }' is not compatible with type 'IntrinsicAttributes & DialogProps'. Property 'children' does not exist on type 'IntrinsicAttributes & DialogProps'.
Moreover, upon running the app and clicking the open alert dialog button, I received an error message within the app saying Render Error: usePortalContext must be used within a Portal Context, which left me puzzled. The code snippet for the dialog was directly copied from the documentation available at here. Despite following the instructions, it did not work as expected.
import React, {useState} from 'react';
import {
Button,
Dialog,
DialogHeader,
DialogContent,
DialogActions,
Text,
} from '@react-native-material/core';
const Dialog_ = () => {
const [visible, setVisible] = useState(false);
return (
<>
<Button
title="Open Alert Dialog"
style={{margin: 16}}
onPress={() => setVisible(true)}
/>
<Dialog*** visible={visible} onDismiss={() => setVisible(false)}>
<DialogHeader title="Dialog Header" />
<DialogContent>
<Text>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum
eligendi inventore, laboriosam laudantium minima minus nesciunt
pariatur sequi.
</Text>
</DialogContent>
<DialogActions>
<Button
title="Cancel"
compact
variant="text"
onPress={() => setVisible(false)}
/>
<Button
title="Ok"
compact
variant="text"
onPress={() => setVisible(false)}
/>
</DialogActions>
</Dialog>
</>
);
};
export default Dialog_;