google play accessibility issues - modal buttons size

src/app/components/Button.js

@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
     width: "100%",
-    height: 42,
+    height: 48,
     marginVertical: 10,
   },
   text: {

src/app/components/ConfirmationModal.js

@@ -4,18 +4,33 @@ import colors from "../config/colors";
 import { dimensions } from "../config/dimensions";
 import { Ionicons } from "@expo/vector-icons";
 
-function Btn({ label, onPress, bgColor, txtColor, style={} }) {
+function Btn({ label, onPress, bgColor, txtColor, style = {} }) {
   return (
-    <TouchableOpacity style={{marginTop: 15}} onPress={onPress}>
+    <TouchableOpacity style={{ marginTop: 15 }} onPress={onPress}>
       <View
-        style={[style, {
-          paddingHorizontal: 40,
-          paddingVertical: 7,
-          backgroundColor: bgColor,
-          borderRadius: 6,
-        }]}
+        style={[
+          style,
+          {
+            paddingHorizontal: 40,
+            paddingVertical: 7,
+            backgroundColor: bgColor,
+            borderRadius: 6,
+            height: 48,
+            flexDirection: "row",
+          },
+        ]}
       >
-        <Text style={{ color: txtColor, fontWeight: "bold", textTransform: "uppercase" }}>{label}</Text>
+        <Text
+          style={{
+            color: txtColor,
+            fontWeight: "bold",
+            textTransform: "uppercase",
+            textAlignVertical: "center",
+            alignSelf: "center",
+          }}
+        >
+          {label}
+        </Text>
       </View>
     </TouchableOpacity>
   );
@@ -70,10 +85,10 @@ export default function ConfirmationModal({
                 justifyContent: "flex-end",
                 marginTop: 24,
               }}
-            > 
+            >
               {onDecline && declineLabel && (
                 <Btn
-                  style={{marginRight: 16}}
+                  style={{ marginRight: 16 }}
                   label={declineLabel}
                   onPress={onDecline}
                   bgColor={colors.secondary}

src/app/components/LoadingMarkersModal.js

@@ -22,14 +22,19 @@ export default function LoadingMarkersModal({ show }) {
           style={{
             justifyContent: "flex-start",
             alignSelf: "flex-end",
+            width: 48,
+            height: 36,
+            alignContent:"center",
+            alignItems: "flex-end"
           }}
         >
           <TouchableOpacity onPress={() => setClosed(true)}>
             <MaterialCommunityIcons
               name="close"
-              size={20}
+              size={26}
               color={colors.primary}
               alignItems="center"
+              alignSelf="center"
             />
           </TouchableOpacity>
         </View>

src/app/screens/LoginScreen.js

@@ -153,7 +153,7 @@ export default function LoginScreen(props) {
             />
           </View>
 
-          <SubmitButton title="entrar" backgroundColor={colors.primary} />
+          <SubmitButton title="entrar" backgroundColor={colors.primary}/>
 
           {/* FIXME: update this in future versions */}
           {/* <TouchableNativeFeedback */}
@@ -180,6 +180,7 @@ export default function LoginScreen(props) {
           />
 
           <TouchableNativeFeedback
+          style={{height: 48}}
             onPress={() => {
               authContext.setUser(true);
             }}