Fixed bug where timer would count space below nav bar as 'usable' space

app/(tabs)/timer.tsx

@@ -4,6 +4,7 @@ import {
   Dimensions,
   StatusBar,
   StyleSheet,
+  Text,
   TouchableOpacity,
   View
 } from 'react-native';
@@ -18,6 +19,10 @@ const colors = {
 const timers = [...Array(13).keys()].map((i) => (i === 0 ? 1 : i * 5));
 const ITEM_SIZE = width * 0.38;
 const ITEM_SPACING = (width - ITEM_SIZE) / 2;
+const placeholderTask = {
+  name: 'Read chapter 4',
+  description: 'Focus on the summary questions and write down anything unclear.',
+};
 
 /*
 Har bare skrevet timeren som en egen tab til å begynne med.
@@ -26,35 +31,72 @@ som viser TaskName og Description der tallene står nå
 Kanskje en animert figur hvis vi får tid
 */ 
 export default function App() {
+  const [containerHeight, setContainerHeight] = React.useState(0)
   const scrollX = React.useRef(new Animated.Value(0)).current;
   const [duration, setDuration] = React.useState(timers[0])
-    const timerAnimation = React.useRef(new Animated.Value(height)).current
+  const [isRunning, setIsRunning] = React.useState(false)
+  const timerAnimation = React.useRef(new Animated.Value(0)).current
   const buttonAnimation = React.useRef(new Animated.Value(0)).current
+  const taskDetailsAnimation = React.useRef(new Animated.Value(0)).current
   const animation = React.useCallback(() => {
+    if (isRunning) {
+        return;
+    }
+
+    setIsRunning(true);
+    taskDetailsAnimation.setValue(0);
+
     Animated.sequence([
+        Animated.parallel([
             Animated.timing(buttonAnimation, {
                 toValue: 1,
                 duration: 300,
                 useNativeDriver: true
             }),
+            Animated.timing(taskDetailsAnimation, {
+                toValue: 1,
+                duration: 500,
+                useNativeDriver: true
+            }),
+        ]),
         Animated.timing(timerAnimation, {
             toValue: 0,
             duration: 300,
             useNativeDriver: true
         }),
         Animated.timing(timerAnimation, {
-                toValue: height,
+            toValue: containerHeight,
             duration: duration * 1000,
             useNativeDriver: true
         }),
-        ]) .start(() => {
+    ]) .start(({ finished }) => {
+        if (!finished) {
+            setIsRunning(false);
+            return;
+        }
+
+        Animated.parallel([
             Animated.timing(buttonAnimation, {
                 toValue: 0,
                 duration: 300,
                 useNativeDriver: true
-            }).start()
+            }),
+            Animated.timing(taskDetailsAnimation, {
+                toValue: 0,
+                duration: 300,
+                useNativeDriver: true
+            }),
+        ]).start(() => {
+            setIsRunning(false);
+        })
+    })
+  }, [buttonAnimation, duration, isRunning, taskDetailsAnimation, timerAnimation])
+
+  React.useEffect(() => {
+      if (containerHeight > 0) {
+        timerAnimation.setValue(containerHeight);
+      }
     })
-    }, [duration])
 
   const opacity = buttonAnimation.interpolate({
       inputRange: [0, 1],
@@ -64,9 +106,24 @@ export default function App() {
       inputRange: [0, 1],
       outputRange: [0, 200]
   })
+  const inactiveTimerNumberOpacity = buttonAnimation.interpolate({
+      inputRange: [0, 1],
+      outputRange: [1, 0]
+  })
+  const taskDetailsOpacity = taskDetailsAnimation.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 1]
+  })
+  const taskDetailsTranslateY = taskDetailsAnimation.interpolate({
+      inputRange: [0, 1],
+      outputRange: [20, 0]
+  })
       
 return (
-    <View style={styles.container}>
+  <View style={styles.container}
+  onLayout={(event) => {
+    setContainerHeight(event.nativeEvent.layout.height);
+  }}>
     <StatusBar hidden />
     <Animated.View 
     style={[StyleSheet.absoluteFillObject, {
@@ -92,6 +149,7 @@ export default function App() {
         },
       ]}>
       <TouchableOpacity
+        disabled={isRunning}
         onPress={animation}>
         <View
           style={styles.roundButton}
@@ -101,7 +159,7 @@ export default function App() {
     <View
       style={{
         position: 'absolute',
-          top: height / 3,
+        top: containerHeight / 3,
         left: 0,
         right: 0,
         flex: 1,
@@ -133,10 +191,19 @@ export default function App() {
               (index + 1) * ITEM_SIZE,
           ]
 
-            const opacity = scrollX.interpolate({
+          const normalOpacity = scrollX.interpolate({
               inputRange,
               outputRange: [.4, 1, .4]
           })
+          const selectedOpacity = scrollX.interpolate({
+              inputRange,
+              outputRange: [0, 1, 0],
+              extrapolate: 'clamp'
+          })
+          const opacity = Animated.add(
+              Animated.multiply(normalOpacity, inactiveTimerNumberOpacity),
+              Animated.multiply(selectedOpacity, buttonAnimation)
+          )
           const scale = scrollX.interpolate({
               inputRange,
               outputRange: [.7, 1, .7]
@@ -156,6 +223,20 @@ export default function App() {
         }
         />
       </View>
+      <Animated.View
+        pointerEvents="none"
+        style={[
+          styles.taskDetails,
+          {
+            opacity: taskDetailsOpacity,
+            transform: [{
+              translateY: taskDetailsTranslateY
+            }]
+          }
+        ]}>
+        <Text style={styles.taskName}>{placeholderTask.name}</Text>
+        <Text style={styles.taskDescription}>{placeholderTask.description}</Text>
+      </Animated.View>
     </View>
   );
 }
@@ -176,5 +257,25 @@ const styles = StyleSheet.create({
     fontFamily: 'Menlo',
     color: colors.text,
     fontWeight: '900',
+  },
+  taskDetails: {
+    position: 'absolute',
+    top: height * 0.56,
+    left: 32,
+    right: 32,
+    alignItems: 'center',
+  },
+  taskName: {
+    color: colors.text,
+    fontSize: 24,
+    fontWeight: '800',
+    textAlign: 'center',
+  },
+  taskDescription: {
+    color: colors.text,
+    fontSize: 16,
+    lineHeight: 22,
+    marginTop: 10,
+    textAlign: 'center',
   }
 });