setting zIndex in slideInterpolatedStyle does not work

Is this a bug report, a feature request, or a question?

question

I am trying to have my active item to be on top of every other items and it does not seem to work.

I have tried

ATTEMPT1: interpolating the zIndex with animated value, just like opacity and scale: does not work

ATTEMPT2: sending active index as props and using that: does not work

TEST: just reverting the zIndex: does not work

note that the other two interpolating functions, animatedOpacity and animatedScale works fine.

I'm using iOS which does make use of zIndex. To make sure, I have tested the same with elevation also.

Anyone with insight please help.

` _animatedStyles = (index, animatedValue, carouselProps) => { let animatedOpacity = {}; let animatedScale = {}; let animatedZIndex = {};

  animatedZIndex = {
    // ATTEMPT1: interpolate the animated value
    // zIndex: animatedValue.interpolate({
    //     inputRange: [0, 1],
    //     outputRange: [1, 2]
    // })

    // ATTEMPT2: send activeIndex as a prop to the carousel and check if the index matches
    // zIndex: carouselProps.activeIndex == index ? 2 : 1

    // TEST: try to revert the zIndices as the docs states.
    // zIndex: carouselProps.data.length - index
  }

  if (carouselProps.inactiveSlideOpacity < 1) {
      animatedOpacity = {
          opacity: animatedValue.interpolate({
              inputRange: [0, 1],
              outputRange: [0.5, 1]
          })
      };
  }

  if (carouselProps.inactiveSlideScale < 1) {
      animatedScale = {
          transform: [{
              scale: animatedValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0.9, 1]
              })
          }]
      };
  }

  return {
      ...animatedOpacity,
      ...animatedScale,
      ...animatedZIndex,
  };

}

        <Carousel
        slideInterpolatedStyle={this._animatedStyles}
        onLayout = {this.layout}
        layout={"default"}
        ref={ref => this.carousel = ref}
        data={this.state.dataToBeUsed}
        sliderWidth={wp('100%')}
        itemWidth={wp('80%')}
        renderItem={this.renderItem}
        activeIndex = {this.state.activeIndex}
        onSnapToItem = { index => this.setState({activeIndex:index}) } />
        )}

Have you followed the required steps before opening a bug report?

(Check the step you've followed - put an x character between the square brackets ([]).)

[] I have read the guidelines regarding bug report.
[] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
[] I have searched for existing issues and made sure that the problem hasn't already been reported.
[] I am using the latest plugin version.
[] I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn't a React Native bug?

yes since all the other props are working, and zIndex works fine without this library

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

haven't tested on Android with elevation but it's a zIndex issue which is only viable for iOS

doesn't work on Android with elevation either.

Is the bug reproductible in a production environment (not a debug one)?

haven't tested

Environment

"react": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"react-native-snap-carousel": "^3.9.1",

iOS 15.1.1

Expected Behavior

The active item, which can be pinched larger in my case, should be on top of other inactive items, which span like 5% width at the sides

Actual Behavior

my active item's enlarged view is hidden behind inactive items.

Reproducible Demo

(Paste the link to a Snack example in which the issue can be reproduced. Please follow the guidelines for providing a Minimal, Complete, and Verifiable example.)

Steps to Reproduce

can be reproduced by the code above.

meliorence / react-native-snap-carousel