CODEWITHSUNDEEP
typescriptreact-native
Grand Skunk
Grand Skunk

Reputation: 39

Dialog Error react native - children doesn't exist on type intrinsicattributes and dialogprops

I've tried using this sample code for an alert dialog in my react native app, but it gives me an error on Dialog (where I've put the ***) saying

TS2322: Type '{ children: Element[]; visible: boolean; onDismiss: () => void; }' is not assignable to type 'IntrinsicAttributes & DialogProps'.   Property 'children' does not exist on type 'IntrinsicAttributes & DialogProps'.

And when I run the app then press the open alert dialog button I get the error in the app saying Render Error: usePortalContext must be used within a Portal Context and I'm not sure what this means. The code I used for my dialog was just straight copied and pasted from the docs here https://www.react-native-material.com/docs/components/dialog so I'm not sure why it's not working

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

Upvotes: 0

Views: 775

Answers (2)

Clash Con
Clash Con

Reputation: 31

Don't forget to use the Provider from the react-native-material.

import { Provider } from "@react-native-material/core";

const AppProvider = () => (
    <Provider>
       <App />
    </Provider>
);

Upvotes: 0

Kamotrel
Kamotrel

Reputation: 56

I just got the same error and looking carefully at the example, I saw that the App was wrapped with Provider component:

const AppProvider = () => (
  <Provider>
    <App />
  </Provider>
);

I added the Provider component in my function and in the import part and then the Dialog displayed correctly.

Upvotes: 4

Related Questions