{"_id":"@5stones/react-navigation-collapsible","name":"@5stones/react-navigation-collapsible","dist-tags":{"latest":"6.3.0"},"versions":{"6.3.0":{"name":"@5stones/react-navigation-collapsible","version":"6.3.0","description":"An extension of react-navigation for the collapsible header","repository":{"type":"git","url":"git+https://github.com/5-stones/react-navigation-collapsible.git"},"author":{"name":"5 Stones","email":"it@weare5stones.com"},"license":"MIT","keywords":["react-native","collapsible","collapsible header","hide header","animate header"],"main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prettier":"prettier --write index.ts  ./src/**/* README.md","flowgen":"sh flow.sh","lint":"eslint --ext '.js,.ts,.tsx' index.ts ./src","build":"tsc && yarn flowgen","clean":"rm -rf lib","build-publish":"yarn clean && yarn lint && yarn build && yarn publish --access public && git push origin main --tags"},"peerDependencies":{"react":">=16.8","react-native":">=0.67"},"dependencies":{"react-native-iphone-x-helper":"^1.3.1","shallowequal":"^1.1.0"},"devDependencies":{"@types/react":"^16.9.50","@types/react-native":"0.63.25","@typescript-eslint/eslint-plugin":"^2.13.0","@typescript-eslint/parser":"^2.13.0","eslint":"^6.8.0","eslint-config-prettier":"^6.9.0","eslint-plugin-prettier":"^3.1.2","eslint-plugin-react":"^7.17.0","flowgen":"^1.14.1","prettier":"^1.19.1","typescript":"^4.3.2"},"licenseText":"MIT License\n\nCopyright (c) 2018 benevbright\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@5stones/react-navigation-collapsible@6.3.0","dist":{"shasum":"792fb1cc02384bc3c8d5b1ec3e4964f811febc54","integrity":"sha512-ugZikB+ry1mvvaqasJtaRvJH1ZOcZ1/+hNcN6pnKePmdBNs3lASyQ3gQ01RK6mVYL0HMu2vfNoY1kiWyFs0o+A==","tarball":"https://registry.npmjs.org/@5stones/react-navigation-collapsible/-/react-navigation-collapsible-6.3.0.tgz","fileCount":74,"unpackedSize":33514,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCX1qz+cmmxhxAyVFS52NyQxI9+cH+qWhjjWGLcg9EUwIhAKaHgq574cFKB3r3Q1wG5+ynny+DW2UJzsCZopIVGHjh"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOwuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgdBAApCrUFhiS50Yn5PwJpoM0DST1EG/kTRCU4sUBXCRW4MR5hbGX\r\n59kqDXMzP9mUYVVKnBX+/Y3R5oxoaZIZWasYXPYM1H/Zkau0p23jheOwBuoj\r\nz+J7QELx++oo0+t6Q1gNtYGQ3BDbldo7pwPUaIQFaGz7Mbuf5mjs1Pq3yu/U\r\n5cA7z594lwp+Tq3YkmxI4e0w++n5efKfcRZ+XsoqT59FszCpa6vYAIqC274s\r\nRRVPGCSFMN06MhtdUEzHV+4CrQIEyuWK9riv+oX1Wjk+tBS2hmXfhBFmxgBq\r\n1xRxe2QGHm7sdXYI0toCMATAkIekskwAzObao1gpdfVc11WqDUsWd/uKzXgP\r\nV/jv+DFoUQzmiOh/3QSZyFR6GVqpl+fHOqCfYE2ckSYdyUUWTNSTr6DqZjK4\r\nj0fXiV3+1vAEncCJIo9hzG0fTWceWssPMcY0No/nt+hg1OGobUgVoJE/NofA\r\n1tjg3+Jlu8Si6CCs8j29FvTITMsCZWzELuDNGAT197YVl+ymYtpfY6PX5JcY\r\nxz+OG/soUWWqGjnH0dx0/9nerKu2qUfdhgMFJkv/6WlIHcD8cM2x5mOqmcHu\r\n47vzq0jhjbA9bbfRKqxxEJDUpE56E6O2QeSmxzbsiavKuble1xoFepyJGSNX\r\nvXZsjxtEg78xA3QHjI2gVUgIYJmCswjZAWA=\r\n=Wklb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jspizziri","email":"jake_20@hotmail.com"},"directories":{},"maintainers":[{"name":"jspizziri","email":"jake_20@hotmail.com"},{"name":"ken-michalak","email":"Ken.Michalak@gmail.com"},{"name":"abourge","email":"abourge@weare5stones.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-navigation-collapsible_6.3.0_1669655598440_0.5843190679489925"},"_hasShrinkwrap":false}},"time":{"created":"2022-11-28T17:13:18.363Z","6.3.0":"2022-11-28T17:13:18.582Z","modified":"2022-11-28T17:13:18.800Z"},"maintainers":[{"name":"jspizziri","email":"jake_20@hotmail.com"},{"name":"ken-michalak","email":"Ken.Michalak@gmail.com"},{"name":"abourge","email":"abourge@weare5stones.com"}],"description":"An extension of react-navigation for the collapsible header","keywords":["react-native","collapsible","collapsible header","hide header","animate header"],"repository":{"type":"git","url":"git+https://github.com/5-stones/react-navigation-collapsible.git"},"author":{"name":"5 Stones","email":"it@weare5stones.com"},"license":"MIT","readme":"# react-navigation-collapsible\n\n[![npm](https://img.shields.io/npm/v/react-navigation-collapsible.svg)](https://www.npmjs.com/package/react-navigation-collapsible) [![npm](https://img.shields.io/npm/dm/react-navigation-collapsible.svg)](https://www.npmjs.com/package/react-navigation-collapsible) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![ci: github](https://github.com/benevbright/react-navigation-collapsible/workflows/CI/badge.svg)](https://github.com/benevbright/react-navigation-collapsible/actions?query=workflow%3ACI) [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/)\n\nAn extension of react-navigation that makes your header collapsible.\n\nTry out the demo on [Expo Snack](https://snack.expo.io/@benevbright/react-navigation-collapsible)\n\n🏗 **The Collapsible Tab-navigator** is no longer supported due to the [Android bug from react-native](https://github.com/facebook/react-native/issues/21801).\n\n## Usage\n\n### 1-1. Default Header\n\n<img src=\"docs/demo-sample-default.gif?raw=true\" width=\"200\">\n\n```js\n// Expo ONLY\nimport { disableExpoTranslucentStatusBar } from 'react-navigation-collapsible';\n\n/* Call this If you have disabled Expo's default translucent statusBar. */\ndisableExpoTranslucentStatusBar();\n```\n\n```js\nimport { Animated } from 'react-native';\nimport { useCollapsibleHeader } from 'react-navigation-collapsible';\n\nconst MyScreen = ({ navigation, route }) => {\n  const options = {\n    navigationOptions: {\n      headerStyle: { backgroundColor: 'green', height: 150 } /* Optional */,\n      headerBackground: <Image /> /* Optional */,\n    },\n    config: {\n      collapsedColor: 'red' /* Optional */,\n      useNativeDriver: true /* Optional, default: true */,\n      elevation: 4 /* Optional */,\n      disableOpacity: true /* Optional, default: false */,\n    },\n  };\n  const {\n    onScroll /* Event handler */,\n    onScrollWithListener /* Event handler creator */,\n    containerPaddingTop /* number */,\n    scrollIndicatorInsetTop /* number */,\n    /* Animated.AnimatedValue contentOffset from scrolling */\n    positionY /* 0.0 ~ length of scrollable component (contentOffset)\n    /* Animated.AnimatedInterpolation by scrolling */,\n    translateY /* 0.0 ~ -headerHeight */,\n    progress /* 0.0 ~ 1.0 */,\n    opacity /* 1.0 ~ 0.0 */,\n  } = useCollapsibleHeader(options);\n\n  /* in case you want to use your listener\n  const listener = ({nativeEvent}) => {\n    // I want to do something\n  };\n  const onScroll = onScrollWithListener(listener);\n  */\n\n  return (\n    <Animated.FlatList\n      onScroll={onScroll}\n      contentContainerStyle={{ paddingTop: containerPaddingTop }}\n      scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}\n      /* rest of your stuff */\n    />\n  );\n};\n```\n\nSee [/example/src/DefaultHeaderScreen.tsx](example/src/DefaultHeaderScreen.tsx)\n\n### 1-2. Sticky Header\n\n<img src=\"docs/demo-sample-sticky.gif?raw=true\" width=\"200\">\n\nSee [/example/src/StickyHeaderScreen.tsx](example/src/StickyHeaderScreen.tsx)\n\n### 1-3. Background Header\n\n<img src=\"docs/demo-sample-background.gif?raw=true\" width=\"200\">\n\nSee [/example/src/BackgroundHeaderScreen.tsx](example/src/BackgroundHeaderScreen.tsx)\n\n---\n\n### 2. Sub Header (e.g Search Bar)\n\n<img src=\"docs/demo-sample-subheader.gif?raw=true\" width=\"200\">\n\n```js\nimport { Animated } from 'react-native';\nimport {\n  useCollapsibleSubHeader,\n  CollapsibleSubHeaderAnimator,\n} from 'react-navigation-collapsible';\n\nconst MySearchBar = () => (\n  <View style={{ padding: 15, width: '100%', height: 60 }}>\n    <TextInput placeholder=\"search here\" />\n  </View>\n);\n\nconst MyScreen = ({ navigation, route }) => {\n  const {\n    onScroll /* Event handler */,\n    containerPaddingTop /* number */,\n    scrollIndicatorInsetTop /* number */,\n    translateY,\n  } = useCollapsibleSubHeader();\n\n  return (\n    <>\n      <Animated.FlatList\n        onScroll={onScroll}\n        contentContainerStyle={{ paddingTop: containerPaddingTop }}\n        scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}\n        /* rest of your stuff */\n      />\n      {/* Wrap your component with `CollapsibleSubHeaderAnimator` */}\n      <CollapsibleSubHeaderAnimator translateY={translateY}>\n        <MySearchBar />\n      </CollapsibleSubHeaderAnimator>\n    </>\n  );\n};\n```\n\nSee [/example/src/SubHeaderScreen.tsx](example/src/SubHeaderScreen.tsx)\n\n### 3. Custom Header\n\n<img src=\"docs/demo-sample-custom.gif?raw=true\" width=\"200\">\n\n```js\nimport { Animated } from 'react-native';\nimport { useCollapsibleHeader } from 'react-navigation-collapsible';\n\nconst MyScreen = ({ navigation, route }) => {\n  const options = {\n    navigationOptions: {\n      /* Add a custom header to 'useCollapsibleHeader' options the same way you would add it to the Stack.Screen options */\n      header: ({ scene, previous, navigation }) => {\n        const { options } = scene.descriptor;\n        const title =\n          options.headerTitle !== undefined\n            ? options.headerTitle\n            : options.title !== undefined\n            ? options.title\n            : scene.route.name;\n\n        return (\n          <MyHeader\n            title={title}\n            leftButton={\n              previous ? (\n                <MyBackButton onPress={navigation.goBack} />\n              ) : (\n                undefined\n              )\n            }\n            style={options.headerStyle}\n          />\n        );\n      },\n    },\n  };\n  const {\n    onScroll /* Event handler */,\n    containerPaddingTop /* number */,\n    scrollIndicatorInsetTop /* number */,\n  } = useCollapsibleHeader(options);\n\n  return (\n    <Animated.FlatList\n      onScroll={onScroll}\n      contentContainerStyle={{ paddingTop: containerPaddingTop }}\n      scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}\n      /* rest of your stuff */\n    />\n  );\n};\n```\n\nSee [/example/src/CustomHeaderScreen.tsx](example/src/CustomHeaderScreen.tsx)\n\n`react-navigation` recommends to use `headerMode='screen'` when you use the custom header. [[Set `headerMode` to `screen`]](https://reactnavigation.org/docs/stack-navigator/#set-headermode-to-screen)\n\n## Install\n\n```bash\n# install module\nyarn add react-navigation-collapsible\n```\n\n## Contribution\n\nPR is welcome!\n\n### How to test changes with the example?\n\n[/example](example) imports the library directly from the root folder, configured with [babel-plugin-module-resolver](example/babel.config.js#L10).\nSo, just build the library with the `watch` option and run the example.\n\n```bash\nyarn tsc -w\ncd example && yarn ios\n```\n","readmeFilename":"README.md"}