Show the header programatically when requested (benevbright#162)

lon9man · Oct 26, 2020 · 1ccbd26 · 1ccbd26
1 parent 83a1818
commit 1ccbd26
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 5 deletions.
diff --git a/example/App.tsx b/example/App.tsx
@@ -16,6 +16,7 @@ import {
   renderCustomHeader,
 } from './src/CustomHeaderScreen';
 import { DetailScreen } from './src/DetailScreen';
+import { ShowHeaderScreen } from './src/ShowHeaderScreen';
 
 export type StackParamList = {
   Home: undefined;
@@ -26,6 +27,7 @@ export type StackParamList = {
   SubHeader: undefined;
   WithCustomHeader: undefined;
   CustomHeaderDetail: undefined;
+  ShowHeaderScreen: undefined;
 };
 
 type ScreenProps = {
@@ -38,6 +40,7 @@ const samples: { title: string; routeName: keyof StackParamList }[] = [
   { title: 'Sample 1-3: Background Header', routeName: 'BackgroundHeader' },
   { title: 'Sample 2: Sub Header', routeName: 'SubHeader' },
   { title: 'Sample 3: Custom Header', routeName: 'WithCustomHeader' },
+  { title: 'Sample 4: Show Header Manually', routeName: 'ShowHeaderScreen' },
 ];
 
 function HomeScreen({ navigation }: ScreenProps) {
@@ -143,6 +146,15 @@ function App() {
             header: renderCustomHeader,
           }}
         />
+
+        <Stack.Screen
+          name="ShowHeaderScreen"
+          component={ShowHeaderScreen}
+          options={{
+            headerTintColor: 'white',
+            title: 'Default Header',
+          }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

diff --git a/example/src/ShowHeaderScreen.tsx b/example/src/ShowHeaderScreen.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Animated, Button, View } from 'react-native';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { useCollapsibleHeader } from 'react-navigation-collapsible';
+
+import { StackParamList } from '../App';
+import { createRow } from './Row';
+
+const data: number[] = [];
+for (let i = 0; i < 100; i++) {
+  data.push(i);
+}
+
+type ScreenProps = {
+  navigation: StackNavigationProp<StackParamList>;
+};
+
+const ShowHeaderScreen = ({ navigation }: ScreenProps) => {
+  const {
+    onScroll,
+    // onScrollWithListener,
+    containerPaddingTop,
+    scrollIndicatorInsetTop,
+    showHeader,
+  } = useCollapsibleHeader({
+    navigationOptions: {
+      headerStyle: {
+        backgroundColor: 'green',
+        // height: 150,
+      },
+    },
+    config: {
+      collapsedColor: 'red',
+    },
+  });
+
+  /* in case you want to use your listener
+  const listener = ({nativeEvent}) => {
+    console.log(nativeEvent);
+  };
+  const onScroll = onScrollWithListener(listener);
+  */
+
+  return (
+    <Animated.FlatList
+      data={data}
+      onScroll={onScroll}
+      contentContainerStyle={{ paddingTop: containerPaddingTop }}
+      scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}
+      renderItem={({ item, index }: any) => {
+        if (index === 10 || index === 50 || index === 70) {
+          return (
+            <View
+              style={{
+                width: '100%',
+                height: 50,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderBottomColor: 'gray',
+                borderBottomWidth: 1,
+              }}>
+              <Button title="Show Header" onPress={showHeader} />
+            </View>
+          );
+        }
+        return createRow(() => navigation.navigate('Detail'))({ item });
+      }}
+      keyExtractor={(item: any) => item.toString()}
+    />
+  );
+};
+
+export { ShowHeaderScreen };
diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
   },
   "devDependencies": {
     "@types/react": "^16.9.50",
-    "@types/react-native": "^0.63.23",
+    "@types/react-native": "0.63.25",
     "@typescript-eslint/eslint-plugin": "^2.13.0",
     "@typescript-eslint/parser": "^2.13.0",
     "eslint": "^6.8.0",

diff --git a/src/core.tsx b/src/core.tsx
@@ -34,6 +34,7 @@ export type Collapsible = {
   translateY: Animated.AnimatedInterpolation;
   progress: Animated.AnimatedInterpolation;
   opacity: Animated.AnimatedInterpolation;
+  showHeader: () => void;
 };
 
 export type UseCollapsibleOptions = {
@@ -94,6 +95,10 @@ const useCollapsibleHeader = (
     collapsibleCustomHeaderHeight: customHeaderHeight,
   } = route.params || {};
 
+  const showHeader = () => {
+    positionY.setValue(0);
+  };
+
   React.useLayoutEffect(() => {
     let headerHeight = 0;
     if (customHeaderHeight) {
@@ -163,6 +168,7 @@ const useCollapsibleHeader = (
       translateY,
       progress,
       opacity,
+      showHeader,
     };
     setCollapsible(collapsible);
   }, [isLandscape, headerStyle, subHeaderHeight, customHeaderHeight]);
@@ -176,6 +182,7 @@ const useCollapsibleHeader = (
       translateY: new Animated.Value(0),
       progress: new Animated.Value(0),
       opacity: new Animated.Value(1),
+      showHeader,
     }
   );
 };

diff --git a/yarn.lock b/yarn.lock
@@ -33,10 +33,10 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
-"@types/react-native@^0.63.23":
-  version "0.63.23"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.23.tgz#bc4617e5bbb1ac28cb5dbf7ad09cc49a2cce914c"
-  integrity sha512-4pWQpgyzX+vCEJDceW9Zsc8/SZtJrIUIw9lwYKeTWAtSHWdcRwUns2O/18L98WGo6NUNVdLzY59vOW8ZGWJxSA==
+"@types/react-native@^0.63.25":
+  version "0.63.30"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.30.tgz#a0bd61e61b7a020a538ea22901be2f5d178fe02f"
+  integrity sha512-8/PrOjuUaPTCfMeW12ubseZPUGdbRhxYDa/aT+0D0KWVTe60b4H/gJrcfJmBXC6EcCFcimuTzQCv8/S03slYqA==
   dependencies:
     "@types/react" "*"