CODEWITHSUNDEEP
react-nativereact-native-paperreact-native-flash-message
Irfan wani
Irfan wani

Reputation: 5104

React-native-flash-message getting under the Card

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

Upvotes: 0

Views: 2496

Answers (1)

Irfan wani
Irfan wani

Reputation: 5104

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.

Upvotes: 1

Related Questions