Merge pull request #67 from binarapps/chore/expo-image-flashlist

Chore/expo image and FlashList

Author: MateuszRostkowski

docs/docs/data-management/API-EXAMPLE.md

@@ -27,7 +27,8 @@ import { ArticleEntity } from '@baca/api/types'
 import { Loader, Center, Text, Box, Spacer } from '@baca/design-system'
 import { useScreenOptions, useTranslation } from '@baca/hooks'
 import { useCallback } from 'react'
-import { ListRenderItem, FlatList } from 'react-native'
+import { FlashList } from '@shopify/flash-list'
+import { ListRenderItem } from 'react-native'
 
 export const DataFromBeScreen_EXAMPLE = () => {
   const { t } = useTranslation()
@@ -56,7 +57,7 @@ export const DataFromBeScreen_EXAMPLE = () => {
         <Text.XlRegular>THIS IS EXAMPLE SCREEN</Text.XlRegular>
         <Text.XlRegular>which contains data from backend</Text.XlRegular>
         <Spacer y="1" />
-        <FlatList
+        <FlashList
           ListEmptyComponent={
             !isInitialLoadingArticles ? (
               <Center height={400} flex={1}>

package.json

@@ -106,6 +106,7 @@
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "@react-navigation/stack": "^6.3.20",
+    "@shopify/flash-list": "1.6.4",
     "@tanstack/react-query": "^4.29.19",
     "axios": "^1.7.2",
     "core-js": "^3.37.1",
@@ -121,6 +122,7 @@
     "expo-device": "~6.0.2",
     "expo-font": "~12.0.5",
     "expo-haptics": "~13.0.1",
+    "expo-image": "~1.12.12",
     "expo-image-picker": "~15.0.5",
     "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",

src/components/COMPONENTS.md

@@ -124,6 +124,7 @@ FAB.Group
 Fail // Toast
 FieldWrapper
 FlatList
+FlashList
 Flex // TODO:
 FloatingMenu
 Form // TODO:

src/components/CompanyLogo.tsx

@@ -1,6 +1,6 @@
 import { darkBinarLogo, darkLogoSygnet, lightBinarLogo, lightLogoSygnet } from '@baca/constants'
 import { ColorSchemeName, useColorScheme } from '@baca/contexts'
-import { Image, ImageProps, ImageStyle } from 'react-native'
+import { Image, ImageStyle, ImageProps } from 'expo-image'
 
 type LogoTypes = 'binarSygnet' | 'binar'
 
@@ -26,12 +26,5 @@ export const CompanyLogo = ({
 
   const source = LOGO[colorScheme][type]
 
-  return (
-    <Image
-      {...{ source }}
-      resizeMethod="resize"
-      resizeMode="contain"
-      style={[{ height, maxWidth: width }, style]}
-    />
-  )
+  return <Image contentFit="scale-down" source={source} style={[{ height, width }, style]} />
 }

src/components/LandingHeader.tsx

@@ -5,9 +5,10 @@ import { useFullScreenModal } from '@baca/design-system/modals/useFullScreenModa
 import { useCallback, useMemo, useTheme, useTranslation } from '@baca/hooks'
 import { useUniversalWidth } from '@baca/navigation/tabNavigator/hooks'
 import { isSignedInAtom } from '@baca/store/auth'
+import { Image } from 'expo-image'
 import { useRouter } from 'expo-router'
 import { useAtomValue } from 'jotai'
-import { Image, StyleSheet, Platform, View } from 'react-native'
+import { StyleSheet, Platform, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export function LandingHeader() {
@@ -36,8 +37,7 @@ export function LandingHeader() {
       </Pressable>
     ) : (
       <Image
-        resizeMethod="resize"
-        resizeMode="contain"
+        contentFit="scale-down"
         source={colorScheme === 'light' ? lightBinarLogo : darkBinarLogo}
         style={jsStyles.logoWide}
       />

src/components/Modal.tsx

@@ -8,6 +8,7 @@ import {
   View,
   ViewStyle,
   StyleSheet,
+  Dimensions,
 } from 'react-native'
 
 import { KeyboardAwareScrollView } from './KeyboardAwareScrollView'
@@ -68,6 +69,6 @@ const styles = StyleSheet.create({
   },
   scrollContent: {
     justifyContent: 'center',
-    paddingHorizontal: 32,
+    paddingHorizontal: Dimensions.get('window').width < 450 ? 16 : 32,
   },
 })

src/components/molecules/Field/Radio.tsx

@@ -2,23 +2,13 @@ import {
   FormErrorMessage,
   FormLabel,
   Box,
-  Touchable,
-  Text,
   TouchableRef,
+  RadioButton,
 } from '@baca/design-system/components'
-import { forwardRef, useCallback, useMemo } from 'react'
+import { forwardRef, useMemo } from 'react'
 
 import { FieldRadioProps } from './types'
 
-const radioSizes = {
-  sm: {
-    boxSize: 4,
-  },
-  md: {
-    boxSize: 5,
-  },
-} as const
-
 export const Radio = forwardRef<TouchableRef, FieldRadioProps>(
   (
     {
@@ -27,60 +17,32 @@ export const Radio = forwardRef<TouchableRef, FieldRadioProps>(
       radioOptions,
       errorMessage,
       isError,
-      size = 'sm',
+      size = 'md',
       onChange,
       label,
       labelStyle,
       isDisabled,
     },
     ref
   ) => {
-    const checkboxSize = useMemo(() => radioSizes[size], [size])
-
-    const getBorderColor = useCallback(
-      (isSelected: boolean): ColorNames | undefined => {
-        if (isDisabled) {
-          return 'border.disabled'
-        }
-        if (isError) {
-          return 'border.error'
-        }
-
-        if (isSelected) {
-          return 'bg.brand.solid'
-        }
-
-        return 'border.primary'
-      },
-      [isDisabled, isError]
-    )
-
     const renderRadioButtons = useMemo(
       () =>
         radioOptions?.map((item: string, index: number) => {
           return (
-            <Touchable
+            <RadioButton
               ref={ref}
               key={index}
-              onPress={() => onChange(item)}
-              alignItems="center"
-              flexDirection="row"
-              height={8}
-            >
-              <Box
-                alignItems="center"
-                borderRadius={50}
-                height={checkboxSize.boxSize}
-                width={checkboxSize.boxSize}
-                justifyContent="center"
-                borderColor={getBorderColor(item === value)}
-                borderWidth={item === value ? 5 : 1}
-              />
-              <Text ml={4}>{item}</Text>
-            </Touchable>
+              isDisabled={isDisabled}
+              isError={isError}
+              isSelected={item === value}
+              onChange={() => onChange(item)}
+              pb={2}
+              label={item}
+              size={size}
+            />
           )
         }),
-      [radioOptions, ref, checkboxSize.boxSize, getBorderColor, value, onChange]
+      [radioOptions, ref, isDisabled, isError, value, size, onChange]
     )
 
     return (

src/components/molecules/Field/Select.tsx

@@ -58,7 +58,7 @@ export const Select = <T extends SelectKey>({
     <Box {...layoutProps} width="100%" mb={2}>
       <Pressable>
         <FormLabel label={label} isRequired={isRequired} labelStyle={labelStyle} />
-        <CustomSelect {...props} />
+        <CustomSelect label={label} {...props} />
         <FormErrorMessage errorMessage={errorMessage} />
       </Pressable>
     </Box>

src/components/molecules/Field/types.ts

@@ -1,10 +1,4 @@
-import {
-  CheckboxProps,
-  FormLabelProps,
-  InputProps,
-  RadioProps,
-  SelectProps,
-} from '@baca/design-system'
+import { CheckboxProps, FormLabelProps, InputProps, SelectProps } from '@baca/design-system'
 
 export type FieldInputProps = InputProps &
   FormLabelProps & {
@@ -14,14 +8,18 @@ export type FieldInputProps = InputProps &
     onFocus?: () => void
   }
 
-export type FieldRadioProps = RadioProps &
-  FormLabelProps & {
-    radioOptions?: string[]
-    errorMessage?: string
-    isInvalid?: boolean
-    isDisabled?: boolean
-    name: string
-  }
+export type FieldRadioProps = FormLabelProps & {
+  radioOptions?: string[]
+  errorMessage?: string
+  isInvalid?: boolean
+  isDisabled?: boolean
+  name: string
+  onChange: (val: string) => void
+  label?: string
+  isError?: boolean
+  value?: string | number
+  size?: 'sm' | 'md'
+}
 
 export type FieldSelectProps<T> = SelectProps<T> &
   FormLabelProps & {

src/components/molecules/SocialButtons/SocialButton.tsx

@@ -2,14 +2,14 @@ import { googleIcon } from '@baca/constants'
 import { useColorScheme } from '@baca/contexts'
 import { Button, ButtonProps, Icon } from '@baca/design-system'
 import i18n from '@baca/i18n'
+import { Image, ImageStyle, ImageSource } from 'expo-image'
 import { FC, useCallback } from 'react'
-import { Image, ImageSourcePropType } from 'react-native'
 
 type SocialMediaType = 'apple' | 'facebook' | 'google'
 
 const socialButtonVariants: {
   [key in SocialMediaType]: {
-    source?: { light: ImageSourcePropType; dark?: ImageSourcePropType }
+    source?: { light: ImageSource; dark?: ImageSource }
     text: () => string
   }
 } = {
@@ -51,7 +51,10 @@ export const SocialButton: FC<SocialButtonProps> = ({ type = 'google', ...rest }
           return <Icon color="#1877F2" name="facebook-circle-fill" size={24} />
         case 'google':
           return (
-            <Image source={source?.[colorScheme] || source?.['light']} width={24} height={24} />
+            <Image
+              source={source?.[colorScheme] || source?.['light']}
+              style={{ width: 24, height: 24 } as ImageStyle}
+            />
           )
       }
     },