How to overlay RNRF Header & Footer with a FAB backdrop's props component

[marclou]

Version

react-native-router-flux v3.40.1
react-native-action-button v2.6.10
react-native v0.45.1

Expected behaviour

Hi All!

I am working on a React Native app, using Reatct-Native-Router-Flux for navigation and react-native-action-button for my FAB button.

I am trying to find a way to overlap both NavBar and TabBar (from RNRF) when my react-native-action-button component is clicked. The react-native-action-button component can have a "brackdrop" props which takes another component as a props and displays it.

Actual behavior

Actually, I am using backdrop={} prop where Blur is a simple component like this :

render() {
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
return (
<View style={{ position: 'absolute', top: 0, left: 0, height: height, width: width, backgroundColor: 'black', opacity: 0.7, elevation: 1 }} />
);
}

The issue is that it doesn't overlay neither header nor the footer from RNRF (find attached screenshots).

If you guys have any clue or advice, I would be really grateful !

Have a great day,

Marc

[mastermoo]

The problem is, that your ActionButton isn’t high enough in the component hierarchy.

One way to solve it, is to put the component at least on the same level as RNRF.
You can also try to use the zIndex prop and set it to 1000000 for example. Maybe this helps

[marclou]

Hi Mastermoo and thanks for your reply.

1. Regarding RNRF

Here is a quick overview of my hierarchy.

<Scene tabs>
     <Scene tabs1>
           <Scene homePage
                *This scene include the Home Page View with the FAB button inside*
            />
     </Scene>
     <Scene tabs2>
        ....
     </Scene>
</Scene

The problem is that I can't find a proper way to put the FAB outside this hierarchy (because It has to be included into the first tab)

2. zIndex

I tried to add a huge zIndex to the either the View container and the FAB but they are still overlapped by the header or the tab.

I was thinking about using some native UI widgets but I don't really wanna dive into that for now.

Best

[nonotest]

yea you need the action button inside your root component for this to work, the one where you add rnrf

[marclou]

I think I got your point @nonotest . Then, should I would make a conditional rendering for the FAB, only if "home" tab is display ?