refactor: Started on improved on the searchbar

Auto hide when scrolling down
pct-org · Apr 27, 2020 · 5953cfa · 5953cfa
1 parent 81cfb64
commit 5953cfa
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 172 deletions.
diff --git a/app/mobile/screens/Mode/ModeScreen.js b/app/mobile/screens/Mode/ModeScreen.js
@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet, View, StatusBar, FlatList, InteractionManager } from 'react-native'
+import { StyleSheet, View, StatusBar, Animated, InteractionManager } from 'react-native'
 import { useLazyQuery } from '@apollo/react-hooks'
+import { useCollapsibleStack, CollapsibleStackSub } from 'react-navigation-collapsible'
+import { getDefaultHeaderHeight } from 'react-navigation-collapsible/lib/src/utils'
 
 import i18n from 'modules/i18n'
 import colors from 'modules/colors'
@@ -35,6 +37,7 @@ const styles = StyleSheet.create({
   },
 })
 
+//TODO:: The searchbar does not disapear correctly so that needs to be checked out
 export const Mode = ({ mode, navigation }) => {
   const [query, setQuery] = useState(null)
   const [executeQuery, { loading, data, fetchMore }] = useLazyQuery(
@@ -51,6 +54,8 @@ export const Mode = ({ mode, navigation }) => {
     },
   )
 
+  const { onScroll, containerPaddingTop, scrollIndicatorInsetTop } = useCollapsibleStack()
+
   useEffect(() => {
     // Execute the query after the component is done navigation
     InteractionManager.runAfterInteractions(() => {
@@ -95,13 +100,8 @@ export const Mode = ({ mode, navigation }) => {
         backgroundColor={colors.STATUS_BAR_TRANSPARENT}
         animated />
 
-      <SearchBar
-        query={query}
-        setQuery={setQuery} />
-
-      <FlatList
+      <Animated.FlatList
         removeClippedSubviews
-        contentContainerStyle={styles.container}
         data={items.length === 0 && !query
           ? Array(24).fill({ loading: true })
           : items
@@ -129,8 +129,20 @@ export const Mode = ({ mode, navigation }) => {
           : null
         }
         onEndReachedThreshold={dimensions.CARD_HEIGHT_SMALL * 4}
+        onScroll={onScroll}
+        contentContainerStyle={{
+          ...styles.container,
+          paddingTop: containerPaddingTop - getDefaultHeaderHeight(true),
+        }}
+        scrollIndicatorInsets={{ top: scrollIndicatorInsetTop - getDefaultHeaderHeight(true) }}
       />
 
+      <CollapsibleStackSub>
+        <SearchBar
+          query={query}
+          setQuery={setQuery} />
+      </CollapsibleStackSub>
+
     </View>
   )
 }

diff --git a/app/mobile/screens/index.js b/app/mobile/screens/index.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { createStackNavigator } from '@react-navigation/stack'
+import { createCollapsibleStack } from 'react-navigation-collapsible'
 
 import HomeScreen from './Home'
 import ItemScreen from './Item'
@@ -17,16 +18,22 @@ export default () => (
     <Stack.Screen name="Item" component={ItemScreen} />
     <Stack.Screen name="Player" component={PlayerScreen} />
 
-    <Stack.Screen name="Movies">
-      {(props) => <ModeScreen mode={'movies'} {...props} />}
-    </Stack.Screen>
+    {createCollapsibleStack(
+      <Stack.Screen name="Movies">
+        {(props) => <ModeScreen mode={'movies'} {...props} />}
+      </Stack.Screen>,
+    )}
 
-    <Stack.Screen name="Shows">
-      {(props) => <ModeScreen mode={'shows'} {...props} />}
-    </Stack.Screen>
+    {createCollapsibleStack(
+      <Stack.Screen name="Shows">
+        {(props) => <ModeScreen mode={'shows'} {...props} />}
+      </Stack.Screen>,
+    )}
 
-    <Stack.Screen name="MyList">
-      {(props) => <ModeScreen mode={'bookmarks'} {...props} />}
-    </Stack.Screen>
+    {createCollapsibleStack(
+      <Stack.Screen name="MyList">
+        {(props) => <ModeScreen mode={'bookmarks'} {...props} />}
+      </Stack.Screen>,
+    )}
   </Stack.Navigator>
 )
diff --git a/app/modules/transitionConfig/fade.js b/app/modules/transitionConfig/fade.js
diff --git a/app/modules/transitionConfig/forVertical.js b/app/modules/transitionConfig/forVertical.js
diff --git a/app/modules/transitionConfig/getSceneIndicesForInterpolationInputRange.js b/app/modules/transitionConfig/getSceneIndicesForInterpolationInputRange.js
diff --git a/app/modules/transitionConfig/index.js b/app/modules/transitionConfig/index.js
diff --git a/package.json b/package.json
@@ -28,8 +28,8 @@
     "@react-native-community/async-storage": "1.9.0",
     "@react-native-community/masked-view": "^0.1.10",
     "@react-native-community/netinfo": "5.8.0",
-    "@react-navigation/native": "^5.1.6",
-    "@react-navigation/stack": "^5.2.13",
+    "@react-navigation/native": "5.1.7",
+    "@react-navigation/stack": "5.2.14",
     "apollo-cache-inmemory": "1.6.5",
     "apollo-cache-persist": "^0.1.1",
     "apollo-client": "2.6.8",
@@ -61,6 +61,7 @@
     "react-native-splash-screen": "3.2.0",
     "react-native-static-server": "0.4.2",
     "react-native-vector-icons": "6.6.0",
+    "react-navigation-collapsible": "^5.5.0",
     "redux-persist-fs-storage": "^1.3.0",
     "subscriptions-transport-ws": "^0.9.16",
     "update-react-native-app": "1.1.2"

diff --git a/yarn.lock b/yarn.lock
@@ -1649,36 +1649,36 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-5.8.0.tgz#6afdc9fb8cc6ecf964949f39d03776f57017303a"
   integrity sha512-MIidbcOggE4InzMunRmo7BW7wovHfoEnlYp11jyIkG4MNXaMFUbXJHUufNby2iuQnQmnTA4AfKWK9uBD8NGDRg==
 
-"@react-navigation/core@^5.3.4":
-  version "5.3.4"
-  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.3.4.tgz#272eb48381c4db251f4dc5cd044db1606a551551"
-  integrity sha512-ul8J7oHC1/k/qWORr7uI710nKofbcD2clYI0bK0Bix+xgAoiFPgrwRDrQcjWw4YQViYlR8CGF/DhnKK+BFA+Yw==
+"@react-navigation/core@^5.3.5":
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.3.5.tgz#a52149c1e6cc6b5c00849d756ace5b3289736637"
+  integrity sha512-s+XL+2r/NS9e0/kcRCBJ2NV7+3zqAqLXFHX2+qzES++oc+gb5A8JSrHjwRUwxMqR2AOqSfz5HSyYXnYIwgl4JQ==
   dependencies:
-    "@react-navigation/routers" "^5.4.0"
+    "@react-navigation/routers" "^5.4.1"
     escape-string-regexp "^2.0.0"
     nanoid "^3.0.2"
     query-string "^6.12.0"
     react-is "^16.13.0"
     use-subscription "^1.4.0"
 
-"@react-navigation/native@^5.1.6":
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.1.6.tgz#932ff1b5b8b9f051d8e5cd3b016d05badaa01898"
-  integrity sha512-DLLSnh29AndrGjPrHJoAgObeO9TiyrGtrASl+SA3B4ksmz4dUV2t6vaRwHogn1kejvRd+1T8VD923d3K1rjy7w==
+"@react-navigation/[email protected].7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.1.7.tgz#929815726504007d73ad77301e4659e910fe8d41"
+  integrity sha512-0/TWbeorcLb42AN9KYK4rWzZk3RrpX95vIuqzcI5zPlo/Yhs3h+TEXX1s+6n2MT42W8xHPZzK/RaHnBGKD0aLw==
   dependencies:
-    "@react-navigation/core" "^5.3.4"
+    "@react-navigation/core" "^5.3.5"
 
-"@react-navigation/routers@^5.4.0":
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-5.4.0.tgz#2fce2a3880e84a110d4eaea317bb7dadee27d57c"
-  integrity sha512-Z5mQF/oQH9CRLilNm1H7h0wjY3dKomWOhuuDehW8UKuLiFp2mWJI1P5N9qwaSraxhcoiVfb9QXwKZru/wBzWMQ==
+"@react-navigation/routers@^5.4.1":
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-5.4.1.tgz#7d5d0931a591e3dd6c917cb5dc7c7ae9e794e1cd"
+  integrity sha512-Gay9yCrE2xuvUUJcbG+giqnh2ZAPyYecO5RJ3tXDztmT+UaJoyHLSfyjkb74gSjij684udtzUKkoXGBbgcANhg==
   dependencies:
     nanoid "^3.0.2"
 
-"@react-navigation/stack@^5.2.13":
-  version "5.2.13"
-  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.2.13.tgz#fa242f28beb8882fde1584cd23b1a9938abc5e17"
-  integrity sha512-bHT9cN5DKNpBHgftIzAM+MoBwWnz2952G5SSctXExQkQ73dwbkV1RnQw8t0MnRZyOpsynhJIdAG+me2QERhAbg==
+"@react-navigation/[email protected].14":
+  version "5.2.14"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.2.14.tgz#ab8cfafdb4401862ca0e42ccedf16551ff4132b5"
+  integrity sha512-hVzkqcAXPrZ10Gjtlzl8+Ad9x1p0n0Vn2YTff4xSlZkVVgKcHyTAWg59NL93fvq9T1zJXOCJZ0hoHiFMmNmAlA==
   dependencies:
     color "^3.1.2"
     react-native-iphone-x-helper "^1.2.1"
@@ -7365,6 +7365,13 @@ [email protected]:
     use-subscription "^1.0.0"
     whatwg-fetch "^3.0.0"
 
+react-navigation-collapsible@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-collapsible/-/react-navigation-collapsible-5.5.0.tgz#cd7f3bf5163c83502c4f4536f0a3f266ed8a4bea"
+  integrity sha512-vXXocisH/Fo39YPC5yIubMN1KGCxSdOkhUCYpDHkAyXGRMEJ/qRs4YUg5QA36Wf//gTDpo1PDyBYhIK1n2tihg==
+  dependencies:
+    react-native-iphone-x-helper "^1.2.1"
+
 react-refresh@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.2.tgz#54a277a6caaac2803d88f1d6f13c1dcfbd81e334"