React-native-flash-message getting under the Card - react-native

Question

I am using react-native-flash-message https://www.npmjs.com/package/react-native-flash-message.
Everything works fine as it is easy to use them. But the problem is when i used it with the Card component (from react-native-paper), the message hides under the card. I want the message to be on the top of everything.
I tried zIndex But it doesnot work.
Here is the demo code;
import * as React from 'react';
import { View, ScrollView } from 'react-native';
import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
import FlashMessage from 'react-native-flash-message';
import { showMessage } from 'react-native-flash-message';
const LeftContent = (props) => <Avatar.Icon {...props} icon="folder" />;
const show = () => {
showMessage({
message: 'This is a message',
});
};
const MyComponent = () => (
<View style={{justifyContent: 'center', marginTop: 30}}>
<Card style={{ margin: 30 }} elevation={30}>
<ScrollView contentContainerStyle={{justifyContent: 'center', marginTop: 30}}>
<Card.Title
title="Card Title"
subtitle="Card Subtitle"
left={LeftContent}
/>
<Card.Content>
<Title>Card title</Title>
<Paragraph>Card content</Paragraph>
</Card.Content>
<Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
<Card.Actions>
<Button onPress={() => show()}>show message</Button>
</Card.Actions>
</ScrollView>
</Card>
<FlashMessage style={{ marginTop: 20 }} position="top" />
</View>
);
export default MyComponent;
Note that this problem only occurs on android devices. On ios, it works fine.
Though i found a solution. Putting <FlashMessage style={{ marginTop: 20 }} position="top" /> inside the card component will resolve it, but i have enabled FlashMessage globally, so i want to change it globally and don't want to put it in every card component

Answer 1

So after some search, i found that though the react-native-flash-message is not made in that way to be rendered on top of everything like card, modals or dialog.
So one way to solve it (infact, i think this is the only way) would be to wrap the FlashMessage component in card and give it some high elevation (say 1000). Note that the elevation provided to it should by the largest among all cards used.