From f34b9782ff8c0083e761ff45262a292f63303260 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Diogo=20Silv=C3=A9rio?= <dblsilverio@gmail.com>
Date: Sat, 3 Feb 2018 22:53:15 -0200
Subject: [PATCH] FEATURE: Animating decklist

Decklist bounces when a deck is selected.
---
 components/flashcards/DeckList.js | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/components/flashcards/DeckList.js b/components/flashcards/DeckList.js
index 950ce87..6f08242 100644
--- a/components/flashcards/DeckList.js
+++ b/components/flashcards/DeckList.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import {
     ActivityIndicator,
+    Animated,
     StyleSheet,
     Text,
     ScrollView,
@@ -24,12 +25,27 @@ class DeckList extends Component {
         tabBarLabel: 'Decks'
     }
 
+    state = {
+        bounceValue: new Animated.Value(1)
+    }
+
     async componentDidMount() {
         const decks = await services.loadDecks();
         this.props.dispatch(actions.loadDecks(decks));
 
     }
 
+    navigateToDeck(deck) {
+        const { bounceValue } = this.state;
+
+        Animated.sequence([
+            Animated.timing(bounceValue, { duration: 200, toValue: 1.04 }),
+            Animated.spring(bounceValue, { toValue: 1, friction: 4 })
+        ]).start(() => {
+            this.props.screenProps.rootNavigation.navigate('DeckDetails', { deckKey: deck.name })
+        });
+    }
+
     navigateToNewDeck() {
         const routeName = "New";
 
@@ -42,6 +58,8 @@ class DeckList extends Component {
 
     render() {
 
+        const { bounceValue } = this.state;
+
         if (this.props.decks === null) {
             return (
                 <View style={{ flex: 1, alignContent: 'center', justifyContent: 'center' }}>
@@ -62,9 +80,11 @@ class DeckList extends Component {
             return (
                 <ScrollView style={styles.container}>
                     {this.props.decks.map((deck) => (
-                        <TouchableOpacity key={deck.name} onPress={() => this.props.screenProps.rootNavigation.navigate('DeckDetails', { deckKey: deck.name })}>
-                            <DeckItem deck={deck} />
-                        </TouchableOpacity>
+                        <Animated.View key={deck.name} style={{ transform: [{ scale: bounceValue }] }}>
+                            <TouchableOpacity onPress={this.navigateToDeck.bind(this, deck)}>
+                                <DeckItem deck={deck} />
+                            </TouchableOpacity>
+                        </Animated.View>
                     ))}
                 </ScrollView>
             )