React-native-flash-message getting under the Card

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

Actually the answer which i mentioned in the question is the only possible way to do so. — Irfan wani, Jun 27 '21 at 06:14

score 1 · Accepted Answer · answered Jul 25 '21 at 05:18

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.

answered Jul 25 '21 at 05:18

Irfan wani

4,084
2
19
34

Could you just set the style values for elevation and zIndex on the FlashMessage component itself? I.E. – Brian Li Jul 27 '21 at 15:47
Tried that also. This doesn't work. My answer is probably the only way to do so, Card component from react-natve-paper is rendered on top of everything. So we cannot overcome this except by setting elevation of the card zero. – Irfan wani Jul 28 '21 at 03:35

React-native-flash-message getting under the Card

1 Answers1