{"_id":"@alirehman7141/react-native-collapsible","_rev":"1-e694665800c1e306f33c56d536500a85","name":"@alirehman7141/react-native-collapsible","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@alirehman7141/react-native-collapsible","version":"1.0.0","description":"Fully customizable collapsible views","main":"lib/commonjs/index","module":"lib/module/index","types":"lib/typescript/index.d.ts","react-native":"src/index","source":"src/index","scripts":{"test":"jest","typescript":"tsc --noEmit","lint":"eslint \"**/*.{js,ts,tsx}\"","prepare":"bob build","release":"release-it","example":"yarn --cwd example","pods":"cd example && pod-install --quiet","bootstrap":"yarn example && yarn && yarn pods"},"keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/AliRehman7141/react-native-collapsible.git"},"author":{"name":"Tuan Luong","email":"tuanluong.it@gmail.com","url":"https://github.com/r0b0t3d"},"license":"MIT","bugs":{"url":"https://github.com/AliRehman7141/react-native-collapsible/issues"},"homepage":"https://github.com/AliRehman7141/react-native-collapsible#readme","publishConfig":{"registry":"https://registry.npmjs.org/"},"devDependencies":{"@commitlint/config-conventional":"^11.0.0","@react-native-community/eslint-config":"^2.0.0","@release-it/conventional-changelog":"^2.0.0","@types/jest":"^26.0.0","@types/react":"^16.9.19","@types/react-native":"0.62.13","commitlint":"^11.0.0","eslint":"^7.2.0","eslint-config-prettier":"^7.0.0","eslint-plugin-prettier":"^3.1.3","husky":"^4.2.5","jest":"^26.0.1","pod-install":"^0.1.0","prettier":"^2.0.5","react":"16.13.1","react-native":"0.63.4","react-native-builder-bob":"^0.18.0","react-native-gesture-handler":"^1.10.3","react-native-reanimated":"^2.2.0","release-it":"^14.11.5","typescript":"^4.1.3"},"peerDependencies":{"react":"*","react-native":"*","react-native-gesture-handler":"*","react-native-reanimated":">=2.2.0"},"jest":{"preset":"react-native","modulePathIgnorePatterns":["<rootDir>/example/node_modules","<rootDir>/lib/"]},"husky":{"hooks":{"commit-msg":"commitlint -E HUSKY_GIT_PARAMS","pre-commit":"yarn lint && yarn typescript"}},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":"angular"}}},"eslintConfig":{"root":true,"extends":["@react-native-community","prettier"],"rules":{"prettier/prettier":["error",{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false}]}},"eslintIgnore":["node_modules/","lib/"],"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"react-native-builder-bob":{"source":"src","output":"lib","targets":["commonjs","module",["typescript",{"project":"tsconfig.build.json"}]]},"gitHead":"2236e5ec8c5aba2ac596a1ae4bfca80c4735b632","_id":"@alirehman7141/react-native-collapsible@1.0.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-P2VwdFU1wYsbBDprX4AVC1K32HIHgFNvWFLW0p5ZzndpqklMFTqo78QzYHwPsrnWEGEfNXsKCjeyq6S7awk/Jw==","shasum":"e1acdb3ad2945afac16beb24bd336906c9277fbe","tarball":"https://registry.npmjs.org/@alirehman7141/react-native-collapsible/-/react-native-collapsible-1.0.0.tgz","fileCount":141,"unpackedSize":322788,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaqIj6/smPzUx4WrNm9mNg37B3a7/EYdMAVaYaTfRM1wIgZ01ny0Iv/Kpvoz4Yrrktn3LQwzpRCrpJYTfZSxBzUqU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNpqUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZTg/9HiybxM+koQk+WKrE4Etrzgaks0dUi7bT5ntc2H7Z3iOUiR1p\r\ngIkf3scWL52KqL8CT3r7+ioeMqSKTO1PU8X//44s3BKIXkLA03HZkZ1ydJVS\r\nNX22XOUYjuoZ3gd+ZGi0oPZRMT+W5SHE93BZ3RSvex+sg1xBVUrvE9+KtkpO\r\ni/ZYYjnskqnVkUsvGlePwLGQkRaZiwly/k/AuJoNnTpCiKeI4kzn4vRUYyWQ\r\npJQrLMh6Cx31Ur8IxnLWxTO1Pfdi8M4FL9yJkhHw03lsqbJzhVEnmRjGllO8\r\nCTWcDhIQ3pUWzpfmfIlRRycw9U1t2Gb0wHKUF1DDG4zvQsOn6bosTlwb4K6u\r\nBBLjsyr4teS/MpGUqz3GnzCqmAnoTxm1cOfmfwgpo3Pu4YQhSItK0hje6Lcw\r\nNirofTGZLzYZWImkdbXp28ZE4Cv9XYyZ3yF4I+a0x5fhHUEeJGJ8hOYXKPi1\r\nymy70AFdfGSG5BA9JDXP/PTWaXbMY1cr1mAvhtZ8OEvgcN7Tn7kG5sY9NIKo\r\nes4wBnTkN41FeJjvxywDF/zyxQvoOgCfo7WHJwp8NZoAfu40z+gy0W1ULH6O\r\nm2Yel9PQj9s7l/RmDZ2A736KqFdHw2NQXINdVzkKG2L4oBl3vw2FJap8lhnd\r\nJcQbrepCIZBNjqyVHtH6PCzqdsTukafbpro=\r\n=+LWQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alirehman7141","email":"ali.rehman7141@gmail.com"},"directories":{},"maintainers":[{"name":"alirehman7141","email":"ali.rehman7141@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-collapsible_1.0.0_1681300116499_0.8785649143788319"},"_hasShrinkwrap":false},"1.0.2":{"name":"@alirehman7141/react-native-collapsible","version":"1.0.2","description":"Fully customizable collapsible views","main":"lib/commonjs/index","module":"lib/module/index","types":"lib/typescript/index.d.ts","react-native":"src/index","source":"src/index","scripts":{"test":"jest","typescript":"tsc --noEmit","lint":"eslint \"**/*.{js,ts,tsx}\"","prepare":"bob build","release":"release-it","example":"yarn --cwd example","pods":"cd example && pod-install --quiet","bootstrap":"yarn example && yarn && yarn pods"},"keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/AliRehman7141/react-native-collapsible.git"},"author":{"name":"Tuan Luong","email":"tuanluong.it@gmail.com","url":"https://github.com/r0b0t3d"},"license":"MIT","bugs":{"url":"https://github.com/AliRehman7141/react-native-collapsible/issues"},"homepage":"https://github.com/AliRehman7141/react-native-collapsible#readme","publishConfig":{"registry":"https://registry.npmjs.org/"},"devDependencies":{"@commitlint/config-conventional":"^11.0.0","@react-native-community/eslint-config":"^2.0.0","@release-it/conventional-changelog":"^2.0.0","@types/jest":"^26.0.0","@types/react":"^16.9.19","@types/react-native":"0.62.13","commitlint":"^11.0.0","eslint":"^7.2.0","eslint-config-prettier":"^7.0.0","eslint-plugin-prettier":"^3.1.3","husky":"^4.2.5","jest":"^26.0.1","pod-install":"^0.1.0","prettier":"^2.0.5","react":"16.13.1","react-native":"0.63.4","react-native-builder-bob":"^0.18.0","react-native-gesture-handler":"^1.10.3","react-native-reanimated":"^2.2.0","release-it":"^14.11.5","typescript":"^4.1.3"},"peerDependencies":{"react":"*","react-native":"*","react-native-gesture-handler":"*","react-native-reanimated":">=2.2.0"},"jest":{"preset":"react-native","modulePathIgnorePatterns":["<rootDir>/example/node_modules","<rootDir>/lib/"]},"husky":{"hooks":{"commit-msg":"commitlint -E HUSKY_GIT_PARAMS","pre-commit":"yarn lint && yarn typescript"}},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":"angular"}}},"eslintConfig":{"root":true,"extends":["@react-native-community","prettier"],"rules":{"prettier/prettier":["error",{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false}]}},"eslintIgnore":["node_modules/","lib/"],"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"react-native-builder-bob":{"source":"src","output":"lib","targets":["commonjs","module",["typescript",{"project":"tsconfig.build.json"}]]},"gitHead":"35cbbb91b8879e14082a3aab7cd5ff34e0df3d00","_id":"@alirehman7141/react-native-collapsible@1.0.2","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-vZh8ePbWGuRoIwq6Xi+ggVjAWnGlkW6pZFYvf9CmITQ2INkpQEOCPy48XZ3Qe+YhVU4TV0fXH8ZVfgwduYwGcg==","shasum":"ff5b0654a9f854e1fc26684749635ff4405dd905","tarball":"https://registry.npmjs.org/@alirehman7141/react-native-collapsible/-/react-native-collapsible-1.0.2.tgz","fileCount":141,"unpackedSize":322788,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAmgjPbiBUPXFbG9whyQnQZIlE2eZgPPMzCG5PNmllxZAiARCaeqHIdAFU4A9m1NEgPzj2tjQ4OvarkQyDGFjV9g4A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkN50PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmog5w//Yy1hEwMwTER1SFtesmTfICF3dbozoQLQNT659juErlfUePmL\r\n5DKNc+TaxtIagFc+ocJN4vP7LvxKJbZ0YFsthYdc6/414JgJ9HrfTBteP6k7\r\nb77OsGHm8WOaM9u08rZI5cS2lAja3P9BfTaNCUziWtMxnGC6or5JskLdooOx\r\nOnRrVyTpKIrfHnvDsvxP1DTH9+xwWC4M+ro/iLH0A606OU5hcuJdgtYe0uTZ\r\naxvfNrFVrRR9+ym9F2xKSC+CsXIY7fjpkw/P+v7OatEvK+S0npSIoiQ/idVN\r\njLcrbPaRd6CWe9CgJP1EEu0+IAIctu1UqkY7AFg9qJZlh9efoo97CesLf1fv\r\n40nZvBrGel1a3nPelsfWKyrXdDUG2bJYV6AkVWqDF4Qq8/gDvlY+a0eGf7Tm\r\nPI3H7GO4/jvl3w+kTqJJ1stWcGa5q0l5L7HUkZJte5sjqmOvKyorK0QD741m\r\nqsoVRj3TLfpEVKJb+UckNLw0Y0UYG9JmV0voU5Bh3jr9JM1yidaxsp/CiENB\r\nNtnEYHNx2GrlS9Y3K29ts3zOY05lcZR4n6F54LVa5NKfWmn7TQdm5OSCXsUY\r\n51+LzEIpVlS9L/nHdeTf2AiO74DkL1PbxYat3Yn0eVVS8UfNUy6ZmIDUlLdc\r\nXQF0EV4KZUqdGTg0IBfrCfHFXn4rMYNbDis=\r\n=ZakY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alirehman7141","email":"ali.rehman7141@gmail.com"},"directories":{},"maintainers":[{"name":"alirehman7141","email":"ali.rehman7141@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-collapsible_1.0.2_1681366287644_0.9693409639686705"},"_hasShrinkwrap":false}},"time":{"created":"2023-04-12T11:48:36.318Z","1.0.0":"2023-04-12T11:48:36.719Z","modified":"2023-04-13T06:11:27.963Z","1.0.2":"2023-04-13T06:11:27.856Z"},"maintainers":[{"name":"alirehman7141","email":"ali.rehman7141@gmail.com"}],"description":"Fully customizable collapsible views","homepage":"https://github.com/AliRehman7141/react-native-collapsible#readme","keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/AliRehman7141/react-native-collapsible.git"},"author":{"name":"Tuan Luong","email":"tuanluong.it@gmail.com","url":"https://github.com/r0b0t3d"},"bugs":{"url":"https://github.com/AliRehman7141/react-native-collapsible/issues"},"license":"MIT","readme":"# @alirehman7141/react-native-collapsible\n\nFully customizable collapsible views\n\n![alt text](pictures/intro.gif 'Intro')\n\n## Installation\n\n```sh\nyarn add @alirehman7141/react-native-collapsible\n```\n\nI am using `reanimated 2` for animation. So you should install and follow instruction here to setup your project [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/installation)\n\n## Key features\n1️⃣ Support FlatList/ScrollView\n2️⃣ Support sticky header\n3️⃣ Can have multiple sticky headers\n4️⃣ Easy to customize\n\n## Usage\n### 1. Basic\n```jsx\nimport {\n  CollapsibleContainer,\n  CollapsibleFlatList,\n  CollapsibleScrollView,\n} from '@alirehman7141/react-native-collapsible';\n\n// ...\nconst MyComponent = () => {\n  const {\n    collapse,   // <-- Collapse header\n    expand,     // <-- Expand header\n    scrollY,    // <-- Animated scroll position. In case you need to do some animation in your header or somewhere else\n  } = useCollapsibleContext();\n\n  return (\n    <CollapsibleContainer>          // 1️⃣ (Required) Outermost container \n      <CollapsibleHeaderContainer>  // 2️⃣ (Required) Header view\n        <!-- Your header view -->\n        <StickyView>                // 3️⃣ Sticky view\n          <!-- Your sticky view goes here -->\n        </StickyView>\n      </CollapsibleHeaderContainer>\n      <CollapsibleFlatList          // 4️⃣ (Required) Your FlatList/ScrollView\n        data={data}\n        renderItem={renderItem}\n        headerSnappable={false} // <-- should header auto snap when you release the finger\n      />\n    </CollapsibleContainer>\n  )\n}\n\nexport default withCollapsibleContext(MyComponent); // 5️⃣ (Required)wrap your component with `withCollapsibleContext`\n```\n\n### 2. Advance\nWe support multiple `CollapsibleHeaderContainer` and `StickyView`. It come useful in case you need to break your code into smaller component.\n\n`Parent.tsx`\n```jsx\nconst Parent = () => {\n  const [tabIndex, setTabIndex] = useState(0)\n\n  return (\n    <CollapsibleContainer>\n      <CollapsibleHeaderContainer>\n        <!-- Your header view -->\n        <StickyView>\n          <TabView currentTab={tabIndex} onTabChange={setTabIndex} />\n        </StickyView>\n      </CollapsibleHeaderContainer>\n\n      {tabIndex === 0 && <FirstTab />}\n      {tabIndex === 1 && <SecondTab />}\n    </CollapsibleContainer>\n  )\n}\n```\n\n`FirstTab.tsx`\n```jsx\nconst FirstTab = () => {\n  return (\n    <>\n      <CollapsibleHeaderContainer>\n        <!-- 😍 You can have another headerview in each tab where you can add another StickyView there -->\n        <StickyView>\n          <!-- Your sticky view goes here -->\n        </StickyView>\n        <View />\n        <StickyView>\n          <!-- 🚀 Bonus, multiple sticky view -->\n        </StickyView>\n      </CollapsibleHeaderContainer>\n      <CollapsibleFlatList\n        data={data}\n        renderItem={renderItem}\n      />\n    </>\n  )\n}\n```\n\n## Showcases\n```\nNote: Feel free to add your showcase here by a PR\n```\n| App         | Gif         |\n| ----------- | ----------- |\n| [ANU Global](https://apps.apple.com/us/app/anu-global/id1540735849) | <img src=\"/pictures/showcases/anu.gif\" height=\"350\"/> |\n\n## Breaking changes\n\n### 1.0.0\n\n- Removed\n\n  - `persistHeaderHeight`\n  - `contentMinHeight`\n\n- Added\n  - `CollapsibleContainer`\n  - `StickyView`\n\n## Tips\n\n#### 1. Trigger scroll when scroll inside `CollapsibleHeaderContainer`\n\n- If your header doesn't contains touchable component, try `pointerEvents=\"none\"`\n\n```jsx\n<CollapsibleHeaderContainer>\n  <View pointerEvents=\"none\">\n    <Text>Header</Text>\n  </View>\n</CollapsibleHeaderContainer>\n```\n\n- If your header contains touchable componet, try to set `pointerEvents=\"box-none\"` for every nested views that contains touchable, otherwise use `pointerEvents=\"none\"`\n\n```jsx\n<CollapsibleHeaderContainer>\n    <View pointerEvents=\"box-none\"> // <-- this is parent view\n        <View pointerEvents=\"none\"> // <-- this view doesn't contain touchable component\n            <Text>Header</Text>\n        </View>\n        <View pointerEvents=\"box-none\"> // <-- this view contain touchable component\n            <View pointerEvents=\"none\">\n                <Text>Some text</Text>\n            </View>\n            <TouchableOpacity>\n                <Text>Button</Text>\n            </TouchableOpacity>\n        </View>\n    </View>\n</CollapsibleHeaderContainer>\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}