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.