Flash message not shown on Android 9 (Sony Xperia Z1)

[ahofmeister]

Hi.

The Flash Messages are working fine on the iPhone simulator (14 Plus) but they are not working on my physical device which is an Sony Xperia Z1 which runs on Android 9.

I read in the older issues but could not find any solution.

I am using the Flash Messages like this

<FlashMessage position="top"/>

    if (error) {
            showMessage({
                type: 'danger',
                message: error.message
            })
        }

The messages are simply not shown. I could not find any error message in the logs.

[lucasferreira]

Hi @ahofmeister,

Sadly I could not help, because I don't have any report like this from other users and I do not have some phisical Sony Xperia Z1 near by me.

I've done some short tests in Android 9 emulator (with and withou Google Play) and everything runs OK...

Did you work with your if (error) + some console.log to get sure about the showMessage method correct call?

[ahofmeister]

@lucasferreira

Yeah, I am absolute sure, that it gets invoked, as the function runs on iOS simulator fine and even with a alert(error.message) it shows the correct message. I will try to get another android this day and test it out.

[ahofmeister]

@lucasferreira

I got it working. The issue was the position of the <FlashMessage>. The component was placed inside the navigation and this somehow prevent the message from showing up properly.

Now if the message is placed below the navigation it works fine

       <AuthContextProvider>
            <MyStatusBar backgroundColor={theme.extend.colors.neutral}/>
            <Navigation/>
            <FlashMessage position="top"/>
        </AuthContextProvider>

Can you explain me the root cause of this issue? :)

[lucasferreira]

Hi @ahofmeister

There is a official recommendation at README that global FlashMessage got to be placed at the very end of components:

import React from "react";
import { View } from "react-native";
import FlashMessage from "react-native-flash-message";

function App() {
  return (
    <View style={{ flex: 1 }}>
      <View ref={"otherView1"} />
      <View ref={"otherView2"} />
      <View ref={"otherView3"} />
      {/* GLOBAL FLASH MESSAGE COMPONENT INSTANCE */}
      <FlashMessage position="top" /> {/* <--- here as the last component */}
    </View>
  );
}

This is how RN layers are rendered without z-index control, most to the bottom in nodes leafs, most at the top em render/user shown.

So, can we close this issue?

[ahofmeister]

I have missed that. Thanks for pointing it out! Yes, we can close it.