Doesn't show over Card component

[Irfanwani]

Flash messages are not showing over a card component but are hiding under it.

[lucasferreira]

Hi @Irfanwani

What is a Card component?

In theory if you place in your top level App.js they will be above everything.

[Irfanwani]

I am using Card from react-native-paper.
import {Card} from react-native-paper.

I placed the <FlashMessage /> in my top level component. But it is shown under the card.

It only works when i put the <FlashMessage /> inside the card component also.
Also note that, this problem only occurs on android.

[lucasferreira]

Hi @Irfanwani

I see that you are using Expo, could you isolate some sample code in https://snack.expo.io to show me?

So I could see what are you doing...

[Irfanwani]

https://snack.expo.io/@irfanwani/card

This is just a demo of it. I am using it in my project which uses it just in a similar way as in this code.
In case if the link doesn't work;

import * as React from 'react';
import { View } 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: 'test message',
    duration: 5000
  })
}

const MyComponent = () => (
  <View style={{marginTop: 30}}>
    <Card style={{ margin: 30 }} elevation={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>Cancel</Button>
        <Button onPress={() => show()}>Ok</Button>
      </Card.Actions>
    </Card>
    <FlashMessage position='top' />
  </View>
);

export default MyComponent;

[lucasferreira]

OK @Irfanwani

The problem it is the elevation prop, in Android when you put elevation in a element they are rendered in other UI Thread, above the others just to shown that element are "elevated" (with shadow).

If you put elevation=0 in your Card:

<Card style={{ margin: 30 }} elevation={0}>

You will see that FlashMessage will shown corrected even in Android.

Other solution it's to put FlashMessage inside another View/container that have a elevation value greater than elevation of Card:

const MyComponent = () => (
  <View style={{marginTop: 30}}>
    <Card style={{ margin: 30 }} elevation={10}>
      <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>Cancel</Button>
        <Button onPress={() => show()}>Ok</Button>
      </Card.Actions>
    </Card>
    <View style={{ position: "absolute", top: 0, left: 0, right: 0, zIndex: 1000 }} elevation={11}>
      <FlashMessage position='top' />
    </View>
  </View>
);

What do you think?

[Irfanwani]

You are right. But what if i wanted to use the elevation. without elevation, for me there is no point of using the card. I am using it for its styles including elevation.

It would be better to find a better solution for it.

Thanks!

[Irfanwani]

Not closing this issue, in case some one comes with a better general solution.

[Irfanwani]

I think i found a better solution.

I wrapped the FlashMessage inside another card component and gave it an elevation just more than other cards.

Also, i have to add some more styles like position: 'absolute' and width to be window width for the message to be on the top as card changed its position relatively.

    <Card style={{position: 'absolute', width: Dimensions.get('window').width}} elevation={31}> // as i was using elevation 30 in other cards.
      <FlashMessage position="top" />
    </Card>

Infact, we should keep the elevation much higher for the FlashMessage card so that it will always come on the top