Merge pull request #2255 from edenmind/YunusAndreasson/issue2254

feat(mobile): 💄 Animate button push on correct answer

mobile/components/answer-button.js

@@ -7,6 +7,7 @@ import { useSharedStyles } from '../styles/common.js'
 import { capitalizeFirstLetter } from '../services/utility-service.js'
 import * as Haptics from 'expo-haptics'
 import { Audio } from 'expo-av'
+import { UIElements } from '../constants/ui.js'
 
 export const AnswerButton = ({ text, onPress, haptic, correct, incorrect }) => {
   const theme = useTheme()
@@ -15,6 +16,7 @@ export const AnswerButton = ({ text, onPress, haptic, correct, incorrect }) => {
   const [textColor, setTextColor] = useState(theme.colors.primary)
   const sound = useRef(new Audio.Sound()).current
   const shakeAnim = useRef(new Animated.Value(0)).current
+  const scaleAnim = useRef(new Animated.Value(1)).current
 
   useEffect(() => {
     async function loadSound() {
@@ -34,6 +36,12 @@ export const AnswerButton = ({ text, onPress, haptic, correct, incorrect }) => {
     ]).start()
   }
 
+  const pushButton = () => {
+    Animated.sequence([
+      Animated.timing(scaleAnim, { toValue: UIElements.AnimationScaleTo, duration: 100, useNativeDriver: true }) // Push in
+    ]).start()
+  }
+
   const resetColors = () => {
     setColor(theme.colors.elevation.level5)
     setTextColor(theme.colors.primary)
@@ -51,6 +59,7 @@ export const AnswerButton = ({ text, onPress, haptic, correct, incorrect }) => {
   }
 
   const handleCorrectFeedback = () => {
+    pushButton()
     setColor(theme.colors.primary)
     setTextColor(theme.colors.primary)
   }
@@ -64,7 +73,7 @@ export const AnswerButton = ({ text, onPress, haptic, correct, incorrect }) => {
   }
 
   return (
-    <Animated.View style={{ transform: [{ translateX: shakeAnim }] }}>
+    <Animated.View style={{ transform: [{ translateX: shakeAnim }, { scale: scaleAnim }] }}>
       <Button onPress={onPress} style={{ ...sharedStyle.buttonAnswer, borderColor: color }} onPressIn={handlePressIn}>
         <Text style={{ ...sharedStyle.answerText, color: textColor, fontSize: text.length > 25 ? 20 : 23 }}>
           {capitalizeFirstLetter(text)}

mobile/components/arabic-words-button.js

@@ -12,11 +12,11 @@ export function ArabicWordButton({ word, isSelected, theme, sharedStyle, onSelec
     if (isSelected) {
       const textColorTimer = setTimeout(() => {
         setIsFading(true)
-      }, 1500)
+      }, 2500)
 
       const lineFadeTimer = setTimeout(() => {
         setLineFading(true)
-      }, 1500)
+      }, 2500)
 
       return () => {
         clearTimeout(textColorTimer)

mobile/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "homepage": "https://openarabic.io",
   "repository": "https://github.com/edenmind/OpenArabic",
-  "version": "1445.2.348",
+  "version": "1445.2.349",
   "authors": [
     "Yunus Andreasson <yunus@edenmind.com> (https://github.com/YunusAndreasson)"
   ],