refactor: update props

Author: kanelloc

README.md

@@ -41,15 +41,15 @@ You can find a set of detailed examples [here](https://github.com/kanelloc/react
 
 # 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    |
-| `OverflowNavbarComponent` | Rendered on top of the header. Transitions to TopNavbarComponent as you scroll                                              | JSX.Element         | false    |
-| `headerMaxHeight`         | Header maximum height. 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    |
 
 
 

example/src/screens/ImageForegroundExample.tsx

@@ -9,7 +9,7 @@ export const ImageForegroundExample = () => {
     <AnimatedScrollView
       HeaderComponent={<ForegroundComponent />}
       topBarHeight={isIOS ? 90 : 70}
-      OverflowNavbarComponent={<OverflowHeaderComponent />}
+      HeaderNavbarComponent={<OverflowHeaderComponent />}
       TopNavBarComponent={<Header />}
       headerImage={require('../../assets/cabin.jpg')}
     >

example/src/screens/OnlyForegroundExample.tsx

@@ -10,7 +10,7 @@ export const OnlyForegroundExample = () => {
       disableScale={true}
       HeaderComponent={<ForegroundComponent />}
       topBarHeight={isIOS ? 90 : 70}
-      OverflowNavbarComponent={<OverflowHeaderComponent />}
+      HeaderNavbarComponent={<OverflowHeaderComponent />}
       TopNavBarComponent={<Header />}
     >
       {data.map((e) => {

example/src/screens/OverflowHeaderExample.tsx

@@ -8,7 +8,7 @@ export const OverflowHeaderExample = () => {
     <AnimatedScrollView
       headerMaxHeight={400}
       topBarHeight={isIOS ? 90 : 70}
-      OverflowNavbarComponent={<OverflowHeaderComponent />}
+      HeaderNavbarComponent={<OverflowHeaderComponent />}
       TopNavBarComponent={<Header />}
       headerImage={require('../../assets/cabin.jpg')}
     >

example/src/screens/SafeAreaViewExample.tsx

@@ -9,7 +9,7 @@ export const SafeAreaViewExample = () => {
   return (
     <SafeAreaView style={styles.container} edges={['bottom']}>
       <AnimatedScrollView
-        OverflowNavbarComponent={<OverflowHeaderComponent />}
+        HeaderNavbarComponent={<OverflowHeaderComponent />}
         TopNavBarComponent={<Header />}
         headerImage={require('../../assets/cabin.jpg')}
       >

src/components/AnimatedScrollView.tsx

@@ -13,7 +13,7 @@ import { useAnimateScrollView } from '../hooks/useAnimateScrollView';
 
 export const AnimatedScrollView = ({
   TopNavBarComponent,
-  OverflowNavbarComponent,
+  HeaderNavbarComponent,
   HeaderComponent,
   headerMaxHeight,
   topBarHeight,
@@ -104,7 +104,7 @@ export const AnimatedScrollView = ({
         headerHeight={headerNavHeight}
         scroll={scroll}
         imageHeight={imageHeight}
-        OverflowHeaderComponent={OverflowNavbarComponent}
+        OverflowHeaderComponent={HeaderNavbarComponent}
         HeaderComponent={TopNavBarComponent}
       />
     </>

src/types.d.ts

@@ -16,7 +16,7 @@ export interface AnimatedScrollViewProps extends ScrollViewProps {
   /**
    * Rendered on top of the header. Transitions to TopNavbarComponent as you scroll
    */
-  OverflowNavbarComponent?: JSX.Element;
+  HeaderNavbarComponent?: JSX.Element;
 
   /**
    * Height of the header (headerImage or HeaderComponent). Default value is 300