Flatlist rows overlap the elements of other rows on element transform

I have a flatlist which contains some list of images (Inside touchableopacity) and on each image focus i'm scaling the image to 1.3. Here the next row is always overlapping the first row image when scaled.

<FlatList          style={[styles.flatlist, styles.outline]}          decelerationRate="fast"          data={this.props.posters}          contentContainerStyle={{            flexDirection: 'column',            paddingTop: perfectSize(50),            paddingLeft: perfectSize(40),            paddingRight: perfectSize(40),            paddingBottom: perfectSize(50),          }}          numColumns={7}          horizontal={false}          ref={ref => (this.scroller = ref)}                        scrollEventThrottle={400}          renderItem={({item, index}) => (<Poster              key={index + 1}              defaultFocus={this.state.posterNum}              onFocus={this.handleAccessible}              handleClick={this._onPosterClick}              onLayout={this.handleScroller}              data={item}              index={index + 1}            />          )}          keyExtractor={item => item.id}        />

Poster component code is below

<TouchableHighlight    ref={itemRef => {      this.refers[`${each.id}_${i}_pos`] = itemRef;    }}            accessible={true}    hasTVPreferredFocus={defaultFocus}    style={[styles.poster_box_small]}    onFocus={() => this._onPosterFocus(`${each.id}_${i}`, i)}    onPress={() => this._onPosterClick(each, i)}    onBlur={() => this._onPosterBlur(`${each.id}_${i}`)}><LinearGradient      colors={['#BF55DE', '#080808', '#00BDE6']}      start={{x: 0, y: 1}}      end={{x: 1, y: 0}}      ref={itemRef => (this.refers[`${each.id}_${i}_lg`] = itemRef)}>      {/* Poster :: Background Image */}<ImageBackground        style={styles.poster_banner}        resizeMode="cover"        source={{uri: each.image}}>        {/* Bottom Left Flag :: Collected/UnCollected score */}        {this.getScoreUI(each)}        {/* Center Dots :: Show only during file load */}<View style={styles.poster_center_view}><Text style={styles.poster_center_circle}>. . .</Text></View>        {/* Top Right Flag :: TV Collection */}        {this.getTVFlag(each)}</ImageBackground></LinearGradient></TouchableHighlight>

onFocus and onBlur i'm just swapping the class

// Poster Focus :: scale it and show border_onPosterFocus = (key, i) => {  this.props.onFocus && this.props.onFocus(i);  this.refers[`${key}_pos`].setNativeProps({    style: styles.poster_box_large,  });  this.refers[`${key}_lg`].setNativeProps({    style: styles.poster_gradient_large,  });};// Poster Blur :: Remove scaling and remove border_onPosterBlur = key => {  this.refers[`${key}_pos`].setNativeProps({style: styles.poster_box_small});  this.refers[`${key}_lg`].setNativeProps({    style: styles.poster_gradient_small,  });};

Css of poster component

poster_gradient_large: {    padding: perfectSize(3),},poster_gradient_small: {    padding: perfectSize(0),},poster_box_small: {    width: perfectSize(235),    height: perfectSize(334),    margin: perfectSize(6),    transform: null,    zIndex: -1,},poster_box_large: {    width: perfectSize(235),    height: perfectSize(334),    margin: perfectSize(6),    transform: [{scale: (1.1, 1.3)}],    zIndex: 1,},poster_banner: {    width: '100%',    height: '100%',    backgroundColor: 'rgba(51,50,59,1)',    zIndex: 1,},

Problem is like this, the next row in flatlist is overlapping the scaled image but the top rows are not overlapping. This is happening for all images.