CODEWITHSUNDEEP
javascriptreactjsreact-nativeanimation
Berke
Berke

Reputation: 760

How to animate a single item from Flatlist array in React Native

I have a array of data which I render in flatlist in React-Native. When I press a single item I only want to animate it.. I'm bit confused and cant fix how I can animate it.. Can anyone show it and explain it please? Because I couldnt find any explanation which is explained with Flatlist rendering.. 

   constructor(props){ 
super(props); 
this.state = { animation: new Animated.Value(1) }


startAnimation (x){
        Animated.timing(this.state.animation, {
            toValue: 1.5,
            duration: 1500
        }).start();
    }


 _renderItem = ({item, index}) => {

        return(
            <Animated.View key={index} style={{margin: 10, transform:[{scale: this.state.animation}]}}>
                <TouchableOpacity onLongPress={() => this.activateItem(item.id)} onPress={() => this.startAnimation(index)}>
                    <Image source={ images[item.item_id].uri } style={{width: 60, height: 60}}/>
                </TouchableOpacity>
            </Animated.View>
        );

    };



 render(){
        return(

            <View style={{flex: 1}}>

                <FlatList
                      numColumns={4}
                      data={this.state.items}
                      renderItem={this._renderItem}
                      keyExtractor={this._keyExtractor}
                      extraData={this.state.animation}
                />

            </View>

        );
    }

Upvotes: 1

Views: 3853

Answers (1)

Magdiel Duarte
Magdiel Duarte

Reputation: 56

What you need to do is isolated the item and animation state in another component then each item will have your own animation and when this item was clicked only him will be animated! see this example working

Upvotes: 4

Related Questions