feat: enable standalone foreground component prop (#3)

* feat: render only foreground

* feat: setup example

Author: kanelloc

example/src/App.tsx

@@ -7,6 +7,7 @@ import { SafeAreaViewExample } from './screens/SafeAreaViewExample';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import type { RootStackParamList } from './types';
 import { ImageForegroundExample } from './screens/ImageForegroundExample';
+import { OnlyForegroundExample } from './screens/OnlyForegroundExample';
 
 const App = () => {
   const Stack = createNativeStackNavigator<RootStackParamList>();
@@ -31,6 +32,10 @@ const App = () => {
             name="ImageForegroundExample"
             component={ImageForegroundExample}
           />
+          <Stack.Screen
+            name="OnlyForegroundExample"
+            component={OnlyForegroundExample}
+          />
         </Stack.Navigator>
       </NavigationContainer>
     </SafeAreaProvider>

example/src/screens/ExamplesDirectory.tsx

@@ -14,6 +14,7 @@ export const ExamplesDirectory = ({ navigation }: Props) => {
     { screen: SCREENS.OVERFLOW_HEADER_EXAMPLE },
     { screen: SCREENS.SAFE_AREA_VIEW_EXAMPLE },
     { screen: SCREENS.IMAGE_FOREGROUND_EXAMPLE },
+    { screen: SCREENS.ONLY_FOREGROUND_EXAMPLE },
   ];
 
   return (

example/src/screens/OnlyForegroundExample.tsx

@@ -0,0 +1,20 @@
+import { AnimatedScrollView } from '@kanelloc/react-native-animated-header-scroll-view';
+import { Card, Header, OverflowHeaderComponent } from '../components';
+import * as React from 'react';
+import { ForegroundComponent } from '../components/ForegroundComponent';
+import { data, isIOS } from '../utils';
+
+export const OnlyForegroundExample = () => {
+  return (
+    <AnimatedScrollView
+      ForegroundComponent={<ForegroundComponent />}
+      headerHeight={isIOS ? 90 : 70}
+      OverflowHeaderComponent={<OverflowHeaderComponent />}
+      HeaderComponent={<Header />}
+    >
+      {data.map((e) => {
+        return <Card item={e} key={e} />;
+      })}
+    </AnimatedScrollView>
+  );
+};

example/src/types.d.ts

@@ -4,4 +4,5 @@ export type RootStackParamList = {
   SafeAreaViewExample: undefined;
   SimpleExample: undefined;
   ImageForegroundExample: undefined;
+  OnlyForegroundExample: undefined;
 };

example/src/utils/enums.ts

@@ -3,4 +3,5 @@ export enum SCREENS {
   OVERFLOW_HEADER_EXAMPLE = 'OverflowHeaderExample',
   SAFE_AREA_VIEW_EXAMPLE = 'SafeAreaViewExample',
   IMAGE_FOREGROUND_EXAMPLE = 'ImageForegroundExample',
+  ONLY_FOREGROUND_EXAMPLE = 'OnlyForegroundExample',
 }

src/components/AnimatedScrollView.tsx

@@ -47,21 +47,40 @@ export const AnimatedScrollView = ({
           ]}
         >
           {ForegroundComponent ? (
-            <AnimatedImageBackground
-              source={headerImage}
-              style={[
-                { height: imageHeight, width: width * 1.2 },
-                {
-                  transform: [
-                    { scale },
-                    { translateY: translateYUp },
-                    { translateY: translateYDown },
-                  ],
-                },
-              ]}
-            >
-              {ForegroundComponent}
-            </AnimatedImageBackground>
+            <>
+              {headerImage ? (
+                <AnimatedImageBackground
+                  source={headerImage}
+                  style={[
+                    { height: imageHeight, width: width * 1.2 },
+                    {
+                      transform: [
+                        { scale },
+                        { translateY: translateYUp },
+                        { translateY: translateYDown },
+                      ],
+                    },
+                  ]}
+                >
+                  {ForegroundComponent}
+                </AnimatedImageBackground>
+              ) : (
+                <Animated.View
+                  style={[
+                    { height: imageHeight, width: width * 1.2 },
+                    {
+                      transform: [
+                        { scale },
+                        { translateY: translateYUp },
+                        { translateY: translateYDown },
+                      ],
+                    },
+                  ]}
+                >
+                  {ForegroundComponent}
+                </Animated.View>
+              )}
+            </>
           ) : (
             <Animated.Image
               source={headerImage}