fix: modal content passing through click event

Author: minheq

src/components/Inputs/PhoneNumberInput.tsx

@@ -91,7 +91,7 @@ const PhoneNumberInputBase = (props: PhoneNumberInputProps) => {
                   <FlatList
                     ListHeaderComponent={
                       label ? (
-                        <Spacing marginBottom={3}>
+                        <Spacing marginVertical={3} paddingHorizontal={2}>
                           <Heading size="xxxlarge">{label}</Heading>
                         </Spacing>
                       ) : null
@@ -108,7 +108,8 @@ const PhoneNumberInputBase = (props: PhoneNumberInputProps) => {
                         <ListItem
                           key={country.countryCode}
                           label={country.name}
-                          onPress={() => {
+                          onPress={event => {
+                            event.preventDefault();
                             if (onChangeCountryCode) {
                               onChangeCountryCode(country.countryCode);
                             }

src/components/Modal/ModalContent.tsx

@@ -25,12 +25,13 @@ const ModalContentBase = (props: ModalContentProps) => {
       }}
     >
       <TouchableOpacity
-        style={{
-          width: 40,
+        style={{ width: 56 }}
+        onPress={event => {
+          event.preventDefault();
+          if (onClose) onClose();
         }}
-        onPress={onClose}
       >
-        <View>
+        <View style={{ paddingHorizontal: 8 }}>
           <Icon color={theme.colors.text.default} size={40} name="x" />
         </View>
       </TouchableOpacity>