Fixed android bug

App.js

@@ -1,22 +1,28 @@
 import React from "react";
 import Home from "./screens/Home";
-import styled from "styled-components";
 import { Provider } from "react-redux";
 import { createStore } from "redux";
 
 const initialState = {
-  action: ""
+  isOpen: false,
+  letter: require("./assets/Letter_A.png"),
+  audio: ""
 };
 
 const reducer = (state = initialState, action) => {
   switch (action.type) {
     case "CLOSE_MODAL":
-      return { action: "closeModal" };
-      break;
+      return {
+        ...state,
+        isOpen: false
+      };
 
     case "OPEN_MODAL":
-      return { action: "openModal" };
-      break;
+      return {
+        letter: action.payload.letter,
+        isOpen: true,
+        audio: action.payload.audio
+      };
 
     default:
       return state;

app.json

@@ -4,11 +4,7 @@
     "slug": "abc",
     "privacy": "public",
     "sdkVersion": "36.0.0",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
+    "platforms": ["ios", "android", "web"],
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -20,11 +16,13 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "xyz.lunabase.abcforbabies"
+    },
+    "android": {
+      "package": "xyz.lunabase.abcforbabies"
     }
   }
 }

components/Modal.js

@@ -1,40 +1,75 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useLayoutEffect } from "react";
 import styled from "styled-components";
-import { Animated, Easing } from "react-native";
+import { Animated, Easing, TouchableWithoutFeedback } from "react-native";
 import { useDispatch, useSelector } from "react-redux";
+import { Audio } from "expo-av";
+
+const Modal = () => {
+  const dispatch = useDispatch();
+  const isOpen = useSelector(state => state.isOpen);
+  const letter = useSelector(state => state.letter);
+  const audio = useSelector(state => state.audio);
 
-const Modal = ({ isModal, letter, action }) => {
   const [modal, setScale] = useState({
     scale: new Animated.Value(0),
     opacity: new Animated.Value(0)
   });
 
-  useEffect(() => {
+  const closeModal = () => {
+    dispatch({
+      type: "CLOSE_MODAL"
+    });
+  };
+
+  useLayoutEffect(() => {
     toggleScale();
-  });
+    playAudio(audio);
+    console.log("Display is ", isOpen);
+
+    return async () => {
+      await soundObject.unloadAsync();
+    };
+  }, [isOpen]);
 
   const toggleScale = () => {
     Animated.timing(modal.scale, {
       toValue: 1,
-      duration: 1000,
+      duration: 300,
       easing: Easing.in()
     }).start();
 
     Animated.timing(modal.opacity, {
       toValue: 1,
-      duration: 1200,
+      duration: 400,
       easing: Easing.in()
     }).start();
   };
 
+  const soundObject = new Audio.Sound();
+  const playAudio = async audio => {
+    try {
+      await soundObject.loadAsync(audio);
+      await soundObject.playAsync();
+    } catch (error) {
+      console.log("Audio no found");
+    }
+  };
+
   return (
-    <AnimatedContainer style={{ display: isModal, opacity: modal.opacity }}>
-      <ModalView>
-        <AnimatedModal style={{ transform: [{ scale: modal.scale }] }}>
-          <Letter source={letter} />
-        </AnimatedModal>
-      </ModalView>
-    </AnimatedContainer>
+    <Container>
+      <TouchableWithoutFeedback
+        onPress={() => {
+          closeModal();
+          soundObject.unloadAsync();
+        }}
+      >
+        <ModalView>
+          <ModalBody>
+            <Letter source={letter} />
+          </ModalBody>
+        </ModalView>
+      </TouchableWithoutFeedback>
+    </Container>
   );
 };
 

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "expo": "~36.0.0",
+    "expo-av": "~8.0.0",
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",

screens/Home.js

@@ -3,55 +3,93 @@ import styled from "styled-components";
 import { LinearGradient } from "expo-linear-gradient";
 import { FlatGrid } from "react-native-super-grid";
 import { SafeAreaView, TouchableOpacity } from "react-native";
-import { useSelector, useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import { Letters } from "../shared/Data";
 import Modal from "../components/Modal";
 
 const Home = () => {
-  const [isActive, setIsActive] = useState("none");
-  const [letter, setLetter] = useState(require("../assets/For_A.png"));
+  const dispatch = useDispatch();
+  const isOpen = useSelector(state => state.isOpen);
+
   return (
-    <Container>
-      <Modal isModal={isActive} letter={letter} />
-      <LinearGradient
-        colors={["#fbd859", "#ff7800"]}
-        style={{
-          width: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          flex: 1
-        }}
-      >
-        <SafeAreaView>
-          <FlatGrid
-            itemDimension={130}
-            items={Letters}
-            renderItem={({ item, index }) => (
-              <TouchableOpacity
-                key={index}
-                onPress={() => {
-                  setIsActive("flex");
-                  setLetter(Letters[index].for);
-                  console.log("You clicked", index);
-                }}
-              >
-                <Card>
-                  <Image source={item.letter} />
-                </Card>
-              </TouchableOpacity>
-            )}
-          />
-        </SafeAreaView>
-      </LinearGradient>
-    </Container>
+    <>
+      <Container>
+        <>{isOpen && <Modal />}</>
+        <LinearGradient
+          colors={["#fbd859", "#ff7800"]}
+          style={{
+            width: "100%",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            paddingTop: 30
+          }}
+        >
+          <SafeAreaView>
+            <FlatGrid
+              itemDimension={130}
+              items={Letters}
+              renderItem={({ item, index }) => (
+                <TouchableOpacity
+                  key={index}
+                  onPress={() => {
+                    dispatch({
+                      type: "OPEN_MODAL",
+                      payload: { letter: item.for, audio: item.audio }
+                    });
+                    console.log("[Home] Display ", isOpen);
+                  }}
+                >
+                  <Card>
+                    <Image source={item.letter} />
+                  </Card>
+                </TouchableOpacity>
+              )}
+            />
+          </SafeAreaView>
+        </LinearGradient>
+      </Container>
+    </>
   );
 };
 
 export default Home;
 
 const Container = styled.View`
+  position: relative;
   flex: 1;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+`;
+
+const ExtraComponent = styled.View`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+`;
+
+const Mod = styled.View`
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  top: 0;
+  left: 0;
+  z-index: 100;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+`;
+
+const Button = styled.Text`
+  background: white;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 20px;
+  padding-right: 20px;
+  border-radius: 12px;
 `;
 
 const Card = styled.View`