feat: add image style prop (#25)

* feat: update typings

* fix: change typings to image

* feat: add imageStyles prop AnimatedScrollView

* docs: update README

* chore: rename styles to style

Author: kanelloc

README.md

@@ -43,15 +43,16 @@ Also a running snack [here](https://snack.expo.dev/ukGomwbdE)
 
 # Props
 
-| Prop name               | Description                                                                                                                 | Type                | Required |
-|-------------------------|-----------------------------------------------------------------------------------------------------------------------------|---------------------|----------|
-| `TopNavBarComponent`    | Rendered on top of the screen as a navbar when scrolling to the top                                                         | JSX.Element         | true     |
-| `HeaderComponent`       | A component to use on top of header image. It can also be used without header image to render a custom component as header. | JSX.Element         | false    |
-| `HeaderNavbarComponent` | Rendered on top of the header. Transitions to TopNavbarComponent as you scroll                                              | JSX.Element         | false    |
-| `headerMaxHeight`       | Height of the header (headerImage or HeaderComponent). Default value is 300                                                 | number              | false    |
-| `topBarHeight`          | Height of the top navbar. Default value is 90                                                                               | number              | false    |
-| `headerImage`           | Image header source                                                                                                         | ImageSourcePropType | false    |
-| `disableScale`          | Disables header scaling when scrolling. Default value is false                                                              | boolean             | false    |
+| Prop name                | Description                                                                                                                 | Type                  | Required |
+|--------------------------|-----------------------------------------------------------------------------------------------------------------------------|-----------------------|----------|
+| `TopNavBarComponent`     | Rendered on top of the screen as a navbar when scrolling to the top                                                         | JSX.Element           | true     |
+| `HeaderComponent`        | A component to use on top of header image. It can also be used without header image to render a custom component as header. | JSX.Element           | false    |
+| `HeaderNavbarComponent`  | Rendered on top of the header. Transitions to TopNavbarComponent as you scroll                                              | JSX.Element           | false    |
+| `headerMaxHeight`        | Height of the header (headerImage or HeaderComponent). Default value is 300                                                 | number                | false    |
+| `topBarHeight`           | Height of the top navbar. Default value is 90                                                                               | number                | false    |
+| `headerImage`            | Image header source                                                                                                         | ImageSourcePropType   | false    |
+| `disableScale`           | Disables header scaling when scrolling. Default value is false                                                              | boolean               | false    |
+| `imageStyle`             | Image styles                                                                                                                | StyleProp<ImageStyle> | false    |
 
 
 

src/components/AnimatedScrollView.tsx

@@ -20,6 +20,7 @@ export const AnimatedScrollView = ({
   headerImage,
   disableScale,
   children,
+  imageStyle,
   ...props
 }: AnimatedScrollViewProps) => {
   const { width } = useWindowDimensions();
@@ -61,6 +62,7 @@ export const AnimatedScrollView = ({
                         { translateY: translateYDown },
                       ],
                     },
+                    imageStyle,
                   ]}
                 >
                   {HeaderComponent}
@@ -94,6 +96,7 @@ export const AnimatedScrollView = ({
                     { translateY: translateYDown },
                   ],
                 },
+                imageStyle,
               ]}
             />
           )}

src/types.d.ts

@@ -1,4 +1,4 @@
-import type { ScrollViewProps } from 'react-native';
+import type { ImageStyle, ScrollViewProps, StyleProp } from 'react-native';
 import { Animated, ImageSourcePropType } from 'react-native';
 
 export interface AnimatedScrollViewProps extends ScrollViewProps {
@@ -37,6 +37,11 @@ export interface AnimatedScrollViewProps extends ScrollViewProps {
    * Disables header scaling when scrolling
    */
   disableScale?: boolean;
+
+  /**
+   * Image styles
+   */
+  imageStyle?: StyleProp<ImageStyle>;
 }
 
 export interface AnimatedHeaderProps {