Set zIndex of Animation?

[kylanhurt]

I have noticed that when I try to set the zIndex or elevation of my animation that it doesn't appear to be working. I want to have my animatable view come in from the top but beneath the header but nothing I do seems to be able to make it work.

Is this feature just currently not available? I started off trying to use a modal (both from native and react-native-modal) and they both had the same problem. It seems a lot of projects are completely ignoring the zIndex property unless I am missing something.

Has anyone gotten their animation to slide underneath another component?

[nqhung139]

it worked for me ? // Defined <Animatable.View ref='contentTaxi' style={{ position: 'absolute', zIndex: -10, paddingTop: 13 }}>

    <TaxiItemAni ref='itemTaxi1' value='taxiGroup' />
    <TaxiItemAni ref='itemTaxi2' value='taxi3Sao' />
    <TaxiItemAni ref='itemTaxi3' value='uber' />
    <TaxiItemAni ref='itemTaxi4' value='grab' />

</Animatable.View>

// Animate taxiSlideInRight(delay = 0) { this.refs.contentTaxi.showZIndex(); for (let i = 0; i < 5; i++) { setTimeout(() => { this.refs['itemTaxi' + i].slideInRight(durationTime) }, delay + (4 - i) * actionDelay); } }

// ------- Animatable.initializeRegistryWithDefinitions({ showZIndex: { from: { zIndex: -10 }, to: { zIndex: 10 } }, hideZIndex: { from: { zIndex: 10 }, to: { zIndex: -10 } } });

[oblador]

It should theoretically be possible, but the z-index implementation in react native is somewhat limiting as it is only respected among siblings, so you need to make sure the element you want to animate from behind the header is located at the same level in the view hierarchy.

[marcorm]

Hi @kylanhurt , i have the same issue... I'm trying to make a view appear with react-native-modal beneath the NavBar. I'm using react-native-navigation.

Did you find any solution?