How elevate the alert in react native-paper? - react-native

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

Answer 1

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.