fix: android crash

parti-renaissance · Sep 25, 2024 · 0111f4a · 0111f4a
1 parent ececaf7
commit 0111f4a
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 25 deletions.
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { SafeAreaView, TouchableWithoutFeedback } from 'react-native'
+import { SafeAreaView as RNSafeAreaView, TouchableWithoutFeedback } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import EuCampaignIllustration from '@/assets/illustrations/EuCampaignIllustration'
 import ProfilePopover from '@/components/ProfilePopover/ProfilePopover'
 import { ROUTES } from '@/config/routes'
@@ -201,9 +202,9 @@ const VoxHeaderFrameStyled = styled(ThemeableStack, {
 
 const VoxHeaderFrame = (props: React.ComponentProps<typeof VoxHeaderFrameStyled>) => {
   return (
-    <SafeAreaView>
+    <RNSafeAreaView>
       <VoxHeaderFrameStyled {...props} />
-    </SafeAreaView>
+    </RNSafeAreaView>
   )
 }
 

diff --git a/src/components/MessageCard/MessageCard.tsx b/src/components/MessageCard/MessageCard.tsx
@@ -17,7 +17,7 @@ export const MessageCard = ({ children, iconLeft: IconLeft, rightComponent, ...p
         <View width={24} height={24}>
           <IconLeft size={24} color="$color7" />
         </View>
-        <Text.MD multiline color="$color7" semibold>
+        <Text.MD multiline color="$color7" semibold flexShrink={1}>
           {children}
         </Text.MD>
         {rightComponent ?? null}

diff --git a/src/components/ProfilePopover/ProfilePopover.tsx b/src/components/ProfilePopover/ProfilePopover.tsx
@@ -1,5 +1,5 @@
 import { PropsWithChildren, useCallback, useRef } from 'react'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
 import clientEnv from '@/config/clientEnv'
 import { useSession } from '@/ctx/SessionProvider'
 import { useUserStore } from '@/store/user-store'
@@ -38,7 +38,7 @@ export default function ProfilePopover({ children }: PropsWithChildren) {
       </Adapt>
 
       <Popover.Content borderWidth={1} padding={0} borderColor="$gray1" overflow="hidden">
-        <YGroup $gtLg={{ width: 300 }}>
+        <YGroup $gtLg={{ width: 300 }} paddingBottom={16}>
           <YGroup.Item>
             <Link href="/profil/" asChild>
               <MenuEntry title="Mon profil" onPress={() => ref.current?.close()} />

diff --git a/src/components/VoxCard/VoxCard.tsx b/src/components/VoxCard/VoxCard.tsx
@@ -13,20 +13,24 @@ import AutoSizeImage from '../AutoSizeImage'
 
 const CardFrame = styled(YStack, {
   backgroundColor: '$white1',
-  elevation: 1,
-  shadowColor: '$gray1',
+
   $gtSm: {
     borderRadius: '$8',
   },
   variants: {
     inside: {
       true: {
         borderRadius: '$6',
-        elevation: '$0',
-        shadowColor: 'none',
+      },
+      false: {
+        elevation: 1,
+        shadowColor: '$gray1',
       },
     },
   },
+  defaultVariants: {
+    inside: false,
+  },
 } as const)
 
 export type VoxCardFrameProps = ComponentProps<typeof CardFrame>

diff --git a/src/components/base/Input/Input.tsx b/src/components/base/Input/Input.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, useEffect, useState } from 'react'
-import { GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputProps } from 'react-native'
+import { GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, Platform, TextInput, TextInputFocusEventData, TextInputProps } from 'react-native'
 import Text from '@/components/base/Text'
 import { useForwardRef } from '@/hooks/useForwardRef'
 import { AlertCircle } from '@tamagui/lucide-icons'
@@ -204,7 +204,7 @@ export default forwardRef<TextInput, InputProps>(function Input(_props, ref) {
                 padding: 0,
                 fontSize: 14,
                 width: '100%',
-                fontWeight: inputProps.value ? 500 : 400,
+                fontWeight: Platform.OS !== 'android' ? (inputProps.value ? 500 : 400) : undefined,
               }}
               editable={!disabled}
               ref={inputRef}

diff --git a/src/screens/profil/account/form/ContactForm.tsx b/src/screens/profil/account/form/ContactForm.tsx
@@ -1,6 +1,7 @@
 import Input from '@/components/base/Input/Input'
 import Select from '@/components/base/Select/Select'
 import Text from '@/components/base/Text'
+import { MessageCard } from '@/components/MessageCard/MessageCard'
 import VoxCard from '@/components/VoxCard/VoxCard'
 import { RestDetailedProfileResponse } from '@/services/profile/schema'
 import isoToEmoji from '@/utils/isoToEmoji'
@@ -37,19 +38,10 @@ const ContactForm = ({ profile }: { profile: RestDetailedProfileResponse }) => {
         <>
           <Text.LG semibold>Contact</Text.LG>
           {profile.change_email_token?.email ? (
-            <VoxCard inside bg="$yellow1">
-              <VoxCard.Content>
-                <XStack gap={16} alignItems="center">
-                  <View width={24} height={24}>
-                    <Info size={24} color="yellow7" />
-                  </View>
-                  <Text.MD multiline color="$yellow7" semibold>
-                    Confirmez le changement de votre email en cliquant sur le lien que vous venez de recevoir sur « {profile.change_email_token.email} ». Il est
-                    actif pour 24h.
-                  </Text.MD>
-                </XStack>
-              </VoxCard.Content>
-            </VoxCard>
+            <MessageCard iconLeft={Info} theme="yellow">
+              Confirmez le changement de votre email en cliquant sur le lien que vous venez de recevoir sur « {profile.change_email_token.email} ». Il est actif
+              pour 24h.
+            </MessageCard>
           ) : null}
           <Controller
             name="email_address"