Merge pull request #357 from Vn-ChemGio/RNS-356_Fix_Avatar_header

Fix Avatar Header (#356)

Author: mateusz1913

src/constants/commonStyles.ts

@@ -37,8 +37,8 @@ const commonStyles = StyleSheet.create({
   },
   message: {
     color: colors.white,
-    fontSize: 72,
-    lineHeight: 85,
+    fontSize: 48,
+    lineHeight: 55,
     letterSpacing: -1,
     textAlign: 'left',
   },

src/predefinedComponents/AvatarHeader/AvatarHeaderFlatList.tsx

@@ -21,6 +21,7 @@ function AvatarHeaderFlatListInner<ItemT>(
     data,
     decelerationRate = 'fast',
     enableSafeAreaTopInset = true,
+    image,
     keyExtractor,
     leftTopIcon,
     leftTopIconAccessibilityLabel,
@@ -66,6 +67,7 @@ function AvatarHeaderFlatListInner<ItemT>(
           backgroundColor={backgroundColor}
           enableSafeAreaTopInset={enableSafeAreaTopInset}
           height={parallaxHeight}
+          image={image}
           leftTopIcon={leftTopIcon}
           leftTopIconAccessibilityLabel={leftTopIconAccessibilityLabel}
           leftTopIconOnPress={leftTopIconOnPress}

src/predefinedComponents/AvatarHeader/AvatarHeaderScrollView.tsx

@@ -19,6 +19,7 @@ export const AvatarHeaderScrollView = React.forwardRef<ScrollView, AvatarHeaderS
       contentContainerStyle,
       decelerationRate = 'fast',
       enableSafeAreaTopInset = true,
+      image,
       leftTopIcon,
       leftTopIconAccessibilityLabel,
       leftTopIconOnPress,
@@ -62,6 +63,7 @@ export const AvatarHeaderScrollView = React.forwardRef<ScrollView, AvatarHeaderS
             backgroundColor={backgroundColor}
             enableSafeAreaTopInset={enableSafeAreaTopInset}
             height={parallaxHeight}
+            image={image}
             leftTopIcon={leftTopIcon}
             leftTopIconAccessibilityLabel={leftTopIconAccessibilityLabel}
             leftTopIconOnPress={leftTopIconOnPress}

src/predefinedComponents/AvatarHeader/AvatarHeaderSectionList.tsx

@@ -20,6 +20,7 @@ function AvatarHeaderSectionListInner<ItemT, SectionT>(
     contentContainerStyle,
     decelerationRate = 'fast',
     enableSafeAreaTopInset = true,
+    image,
     leftTopIcon,
     leftTopIconAccessibilityLabel,
     leftTopIconOnPress,
@@ -67,6 +68,7 @@ function AvatarHeaderSectionListInner<ItemT, SectionT>(
           backgroundColor={backgroundColor}
           enableSafeAreaTopInset={enableSafeAreaTopInset}
           height={parallaxHeight}
+          image={image}
           leftTopIcon={leftTopIcon}
           leftTopIconAccessibilityLabel={leftTopIconAccessibilityLabel}
           leftTopIconOnPress={leftTopIconOnPress}

src/predefinedComponents/AvatarHeader/components/HeaderBar.tsx

@@ -103,15 +103,18 @@ export const HeaderBar: React.FC<HeaderProps> = ({
     <AnimatedSafeAreaView
       edges={safeAreaEdges}
       style={[commonStyles.headerWrapper, wrapperAnimatedStyle]}>
-      <Pressable
-        accessibilityLabel={leftTopIconAccessibilityLabel}
-        accessibilityRole="button"
-        hitSlop={HIT_SLOP}
-        onPress={leftTopIconOnPress}
-        style={styles.leftHeaderButton}
-        testID={leftTopIconTestID}>
-        <IconRenderer icon={leftTopIcon} />
-      </Pressable>
+      {leftTopIcon ? (
+        <Pressable
+          accessibilityLabel={leftTopIconAccessibilityLabel}
+          accessibilityRole="button"
+          hitSlop={HIT_SLOP}
+          onPress={leftTopIconOnPress}
+          style={styles.leftHeaderButton}
+          testID={leftTopIconTestID}>
+          <IconRenderer icon={leftTopIcon} />
+        </Pressable>
+      ) : null}
+
       <View style={[styles.headerTitleContainer, headerTitleContainerRTLStyle]}>
         <Animated.Image
           source={image as ImageSourcePropType}
@@ -124,15 +127,17 @@ export const HeaderBar: React.FC<HeaderProps> = ({
           {title}
         </Animated.Text>
       </View>
-      <Pressable
-        accessibilityLabel={rightTopIconAccessibilityLabel}
-        accessibilityRole="button"
-        hitSlop={HIT_SLOP}
-        onPress={rightTopIconOnPress}
-        style={styles.rightHeaderButton}
-        testID={rightTopIconTestID}>
-        <IconRenderer icon={rightTopIcon} />
-      </Pressable>
+      {rightTopIcon ? (
+        <Pressable
+          accessibilityLabel={rightTopIconAccessibilityLabel}
+          accessibilityRole="button"
+          hitSlop={HIT_SLOP}
+          onPress={rightTopIconOnPress}
+          style={styles.rightHeaderButton}
+          testID={rightTopIconTestID}>
+          <IconRenderer icon={rightTopIcon} />
+        </Pressable>
+      ) : null}
     </AnimatedSafeAreaView>
   );
 };

src/predefinedComponents/AvatarHeader/withAvatarHeaderFlashList.tsx

@@ -26,6 +26,7 @@ export function withAvatarHeaderFlashList<ItemT>(
       backgroundColor,
       decelerationRate = 'fast',
       enableSafeAreaTopInset = true,
+      image,
       leftTopIcon,
       leftTopIconAccessibilityLabel,
       leftTopIconOnPress,
@@ -69,6 +70,7 @@ export function withAvatarHeaderFlashList<ItemT>(
             backgroundColor={backgroundColor}
             enableSafeAreaTopInset={enableSafeAreaTopInset}
             height={parallaxHeight}
+            image={image}
             leftTopIcon={leftTopIcon}
             leftTopIconAccessibilityLabel={leftTopIconAccessibilityLabel}
             leftTopIconOnPress={leftTopIconOnPress}

src/predefinedComponents/DetailsHeader/components/HeaderBar.tsx

@@ -60,29 +60,33 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({
     <AnimatedSafeAreaView
       edges={safeAreaEdges}
       style={[commonStyles.headerWrapper, wrapperAnimatedStyle]}>
-      <Pressable
-        accessibilityLabel={leftTopIconAccessibilityLabel}
-        accessibilityRole="button"
-        hitSlop={HIT_SLOP}
-        onPress={leftTopIconOnPress}
-        style={styles.leftHeaderButton}
-        testID={leftTopIconTestID}>
-        <IconRenderer icon={leftTopIcon} />
-      </Pressable>
+      {leftTopIcon ? (
+        <Pressable
+          accessibilityLabel={leftTopIconAccessibilityLabel}
+          accessibilityRole="button"
+          hitSlop={HIT_SLOP}
+          onPress={leftTopIconOnPress}
+          style={styles.leftHeaderButton}
+          testID={leftTopIconTestID}>
+          <IconRenderer icon={leftTopIcon} />
+        </Pressable>
+      ) : null}
       <Animated.View style={[styles.headerTitleContainer, headerTitleContainerAnimatedStyle]}>
         <Animated.Text style={[styles.headerTitle, titleStyle]} testID={titleTestID}>
           {title}
         </Animated.Text>
       </Animated.View>
-      <Pressable
-        accessibilityLabel={rightTopIconAccessibilityLabel}
-        accessibilityRole="button"
-        hitSlop={HIT_SLOP}
-        onPress={rightTopIconOnPress}
-        style={styles.rightHeaderButton}
-        testID={rightTopIconTestID}>
-        <IconRenderer icon={rightTopIcon} />
-      </Pressable>
+      {rightTopIcon ? (
+        <Pressable
+          accessibilityLabel={rightTopIconAccessibilityLabel}
+          accessibilityRole="button"
+          hitSlop={HIT_SLOP}
+          onPress={rightTopIconOnPress}
+          style={styles.rightHeaderButton}
+          testID={rightTopIconTestID}>
+          <IconRenderer icon={rightTopIcon} />
+        </Pressable>
+      ) : null}
     </AnimatedSafeAreaView>
   );
 };