How animate Opacity in Flatlist with 2 columns - reactjs

Question

I try to make a little opacity animation when items touch the top of the flatlist.
The problem is that just one item rendered with the animation and not 2 Items at the same row.
I want that as soon as the top of these two Items touch the top of the Flatlistview, the opacity decrease until two others Items's top below. And so on.
I put my code here if anyone has some solution for that.
Thank you !
import React, { Component, Fragment } from 'react';
import { View, StyleSheet,Dimensions, Button, Pressable, TouchableOpacity, SafeAreaView, Text, KeyboardAvoidingView, Switch,Image,FlatList, Animated } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Data_hobbys from '../../Data_hobbys';
import { TextInput,ProgressBar , Colors } from 'react-native-paper';
const DATA = Data_hobbys;
const numColumns = 2;
const { height } = Dimensions.get("screen");
const Item = ({ title, path, opacity }) => (
<Animated.View style = {[styles.item, {opacity: opacity}]}>
<Image style = {styles.imageStyle} source = {path}/>
<Text style={styles.title}>{title}</Text>
</Animated.View>
);
const Sports_selection = () => {
const scrollY = React.useRef(new Animated.Value(0)).current
const renderItem = ({ item, index}) => {
const opacityInputRange = [
-1,
0,
150 * index,
150 * (index + 1)
]
const opacity = scrollY.interpolate({
inputRange: opacityInputRange,
outputRange: [1 ,1 ,1 ,0]
})
return (<Item title={item.title} path = {item.path} opacity = {opacity} />
);
}
return(
<View style = {styles.main_container}>
<ProgressBar progress={0.4} style = {styles.progressBar} color = '#D1A552'/>
<Text style = {styles.introduction_text}>Do you some sport or watch it ?</Text>
<Text style = {styles.instruction_text}>Yes ? Great select it !</Text>
<Animated.FlatList
onScroll = {Animated.event(
[{ nativeEvent: {contentOffset: {y: scrollY}}}],
{useNativeDriver: true}
)}
//contentContainerStyle={{flexDirection : "row", flexWrap : "wrap"}}
columnWrapperStyle={{justifyContent: 'space-evenly'}}
data = {DATA}
renderItem = {renderItem}
keyExtractor = {(item, index) => item.id}
numColumns = {numColumns}
style={{
height: "60%",
flexGrow: 0
}}
//xscrollEventThrottle={16}
style = {styles.flatlistStyle}
/>
<TouchableOpacity style = {styles.buttonNext}>
<Text style = {styles.TextButton}>Next</Text>
</TouchableOpacity>
</View>
);
}
export default Sports_selection;
const styles = StyleSheet.create({
main_container: {
flex: 1,
backgroundColor: 'white',
},
introduction_text: {
fontSize : 30,
fontWeight : 'bold',
color : '#D1A552',
textAlign : 'left',
paddingLeft: 15,
marginTop: '30%',
},
instruction_text: {
fontSize : 20,
fontWeight : 'normal',
color : 'black',
textAlign : 'left',
paddingLeft: 15,
marginTop: '2%',
},
item: {
justifyContent: 'center',
alignContent:'center',
height : 150,
width : 150,
marginVertical: 5,
},
title: {
fontWeight : 'normal',
paddingTop: 12,
fontSize: 15,
textAlign:'center',
},
imageStyle:{
alignSelf: 'center',
width: 100,
height: 100,
},
flatlistStyle:{
marginTop:'6%',
height: "50%",
flexGrow: 0,
},
buttonNext:{
position: 'absolute',
alignSelf: 'center',
backgroundColor: "#D1A552",
borderRadius: 30,
width: "40%",
height: 45,
justifyContent: "center",
bottom: "10%",
alignItems: "center",
},
TextButton:{
fontWeight : 'bold',
color: 'white',
fontSize: 20,
textAlign:'center',
},
progressBar: {
top: 70,
width: "70%",
alignSelf: 'center',
},
})

Answer 1

you need to calculate the scrollY with high of item
const HIGHT_OF_ITEM=100
const HIGHT_OF_CONTAINER=HIGHT_OF_ITEM+20
const Sports_selection = () => {
const scrollY = React.useRef(new Animated.Value(0)).current;
const renderItem = ({ item, index }) => {
const input_cal=(value)=>{
return value + HIGHT_OF_CONTAINER*(Math.floor(index/numColumns))
}
const opacityInputRange = [ input_cal(0), input_cal(50), input_cal(80),input_cal(100) ];
const opacity = scrollY.interpolate({
inputRange: opacityInputRange,
outputRange: [1,0.5,0.3,0]
, extrapolate:'clamp'
});
return <Item title={item.title} path={item.path} opacity={opacity} />;
};
snack demo