How elevate the alert in react native-paper?

Question

I want to shown an alert but my alert make to my app down scroll like this alert image i would like show that alert on the center and elevate it.

i tried with this css, but does not worked nothing

const styles = StyleSheet.create({
  elevatedElement: {
    zIndex: 3000000, 
    elevation: 3000000, 
  },
})

this is my code of the alert

import React, { useState } from 'react'
import { View } from 'react-native';
import { Button, Paragraph, Dialog, Portal, Provider } from 'react-native-paper';

const Alert = ({ show, setShow }) => {


  return (
    <Provider>
      <View>
        <Portal>
          <Dialog visible={show} >
            <Dialog.Title>Alert</Dialog.Title>
            <Dialog.Content>
              <Paragraph>This is simple dialog</Paragraph>
            </Dialog.Content>
            <Dialog.Actions>
              <Button onPress={setShow}>Done</Button>
            </Dialog.Actions>
          </Dialog>
        </Portal>
      </View>
    </Provider>
  );
};

export default Alert;

and i am using that component like this

return (
    <><Alert show={true} />
    <Background>
       <RightButton goRight={logout} />
      <Logo />
      </Background>
      </>
  )

score 0 · Accepted Answer · answered Nov 03 '21 at 07:43

According to the documentation for the Portal usage:

Portal allows rendering a component at a different place in the parent tree. You can use it to render content that should appear above other elements, similar to Modal. It requires a Portal. Host component to be rendered somewhere in the parent tree

So if you want to render the Portal on top of other elements like a modal you should use the Portal.Host:

**Note:**Try to implement thePortal component as the first element of Alert component without using the View element as below:

import { Portal } from 'react-native-paper';

// rest of the codes ...

return (
    <Portal.Host>
      <Dialog visible={show} >
        <Dialog.Title>Alert</Dialog.Title>
        <Dialog.Content>
          <Paragraph>This is simple dialog</Paragraph>
        </Dialog.Content>
        <Dialog.Actions>
          <Button onPress={setShow}>Done</Button>
        </Dialog.Actions>
      </Dialog>
    </Portal.Host>
  );

No need to set the zIndex or elevation style properties for this component.

How elevate the alert in react native-paper?

1 Answers1