Skip to content

Commit 1dac45f

Browse files
e-younane-younan
authored
feat: introduce Shopify's FlashList component (#13)
1 parent f69777d commit 1dac45f

32 files changed

+1387
-756
lines changed

‎.husky/commit-msg‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,42 @@
1-
#!/usr/bin/env sh
2-
. "$(dirname -- "$0")/_/husky.sh"
1+
#!/bin/sh
32

4-
npx --no -- commitlint --edit "$1"
3+
if [ "$LEFTHOOK" = "0" ]; then
4+
exit 0
5+
fi
6+
7+
call_lefthook()
8+
{
9+
dir="$(git rev-parse --show-toplevel)"
10+
osArch=$(echo "$(uname)" | tr '[:upper:]' '[:lower:]')
11+
cpuArch=$(echo "$(uname -m)" | sed 's/aarch64/arm64/')
12+
13+
if lefthook -h >/dev/null 2>&1
14+
then
15+
eval lefthook $@
16+
elif test -f "$dir/node_modules/lefthook/bin/index.js"
17+
then
18+
eval "\"$dir/node_modules/lefthook/bin/index.js\" $@"
19+
elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook"
20+
then
21+
eval "\"$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook\" $@"
22+
elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook"
23+
then
24+
eval "\"$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook\" $@"
25+
elif bundle exec lefthook -h >/dev/null 2>&1
26+
then
27+
bundle exec lefthook $@
28+
elif yarn lefthook -h >/dev/null 2>&1
29+
then
30+
yarn lefthook $@
31+
elif pnpm lefthook -h >/dev/null 2>&1
32+
then
33+
pnpm lefthook $@
34+
elif npx @evilmartians/lefthook -h >/dev/null 2>&1
35+
then
36+
npx @evilmartians/lefthook $@
37+
else
38+
echo "Can't find lefthook in PATH"
39+
fi
40+
}
41+
42+
call_lefthook "run commit-msg $@"

‎.husky/commit-msg.old‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/usr/bin/env sh
2+
. "$(dirname -- "$0")/_/husky.sh"
3+
4+
npx --no -- commitlint --edit "$1"

‎.husky/pre-commit‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,42 @@
1-
#!/usr/bin/env sh
2-
. "$(dirname -- "$0")/_/husky.sh"
1+
#!/bin/sh
32

4-
npm test
3+
if [ "$LEFTHOOK" = "0" ]; then
4+
exit 0
5+
fi
6+
7+
call_lefthook()
8+
{
9+
dir="$(git rev-parse --show-toplevel)"
10+
osArch=$(echo "$(uname)" | tr '[:upper:]' '[:lower:]')
11+
cpuArch=$(echo "$(uname -m)" | sed 's/aarch64/arm64/')
12+
13+
if lefthook -h >/dev/null 2>&1
14+
then
15+
eval lefthook $@
16+
elif test -f "$dir/node_modules/lefthook/bin/index.js"
17+
then
18+
eval "\"$dir/node_modules/lefthook/bin/index.js\" $@"
19+
elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook"
20+
then
21+
eval "\"$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook\" $@"
22+
elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook"
23+
then
24+
eval "\"$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook\" $@"
25+
elif bundle exec lefthook -h >/dev/null 2>&1
26+
then
27+
bundle exec lefthook $@
28+
elif yarn lefthook -h >/dev/null 2>&1
29+
then
30+
yarn lefthook $@
31+
elif pnpm lefthook -h >/dev/null 2>&1
32+
then
33+
pnpm lefthook $@
34+
elif npx @evilmartians/lefthook -h >/dev/null 2>&1
35+
then
36+
npx @evilmartians/lefthook $@
37+
else
38+
echo "Can't find lefthook in PATH"
39+
fi
40+
}
41+
42+
call_lefthook "run pre-commit $@"

‎.husky/pre-commit.old‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/usr/bin/env sh
2+
. "$(dirname -- "$0")/_/husky.sh"
3+
4+
npm test

‎.husky/prepare-commit-msg‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
#!/bin/sh
2+
3+
if [ "$LEFTHOOK" = "0" ]; then
4+
exit 0
5+
fi
6+
7+
call_lefthook()
8+
{
9+
dir="$(git rev-parse --show-toplevel)"
10+
osArch=$(echo "$(uname)" | tr '[:upper:]' '[:lower:]')
11+
cpuArch=$(echo "$(uname -m)" | sed 's/aarch64/arm64/')
12+
13+
if lefthook -h >/dev/null 2>&1
14+
then
15+
eval lefthook $@
16+
elif test -f "$dir/node_modules/lefthook/bin/index.js"
17+
then
18+
eval "\"$dir/node_modules/lefthook/bin/index.js\" $@"
19+
elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook"
20+
then
21+
eval "\"$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook\" $@"
22+
elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook"
23+
then
24+
eval "\"$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook\" $@"
25+
elif bundle exec lefthook -h >/dev/null 2>&1
26+
then
27+
bundle exec lefthook $@
28+
elif yarn lefthook -h >/dev/null 2>&1
29+
then
30+
yarn lefthook $@
31+
elif pnpm lefthook -h >/dev/null 2>&1
32+
then
33+
pnpm lefthook $@
34+
elif npx @evilmartians/lefthook -h >/dev/null 2>&1
35+
then
36+
npx @evilmartians/lefthook $@
37+
else
38+
echo "Can't find lefthook in PATH"
39+
fi
40+
}
41+
42+
call_lefthook "run prepare-commit-msg $@"

‎docs/docs/01-getting-started.mdx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,12 @@ Before using this package, please make sure that you install the correct version
1616

1717
<br />
1818

19-
| react-native-header | react-native | react-native-reanimated | react-native-safe-area-context |
20-
| ------------------- | ------------ | ----------------------- | ------------------------------ |
21-
| 0.6.x | >= 0.65 | >= 2.11.0 | >= 4.1.0 |
22-
| 0.7.x | >= 0.65 | >= 2.0.0 | >= 4.1.0 |
23-
| 0.8.x | >= 0.65 | >= 2.0.0 | >= 4.1.0 |
19+
| react-native-header | react-native | react-native-reanimated | react-native-safe-area-context | @shopify/flash-list |
20+
| ------------------- | ------------ | ----------------------- | ------------------------------ | ------------------- |
21+
| 0.6.x | >= 0.65 | >= 2.11.0 | >= 4.1.0 | N/A |
22+
| 0.7.x | >= 0.65 | >= 2.0.0 | >= 4.1.0 | N/A |
23+
| 0.8.x | >= 0.65 | >= 2.0.0 | >= 4.1.0 | N/A |
24+
| 0.9.x | >= 0.65 | >= 2.0.0 | >= 4.1.0 | >= 3.2.0 |
2425

2526
## Pre-requisites
2627

@@ -31,6 +32,8 @@ Before you can use `react-native-header`, you need to have the following librari
3132

3233
If you haven't installed these libraries yet, please follow the installation instructions on their respective documentation pages.
3334

35+
If you intend to use the [FlashListWithHeaders](/docs/components/flash-list-with-headers) component, please ensure that you review the [Compatibilty table](/docs/getting-started#compatibility) above and install the correct versions of each library.
36+
3437
## Installation
3538

3639
Once you have [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) and [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) set up in your project, you can install `react-native-header`:

‎docs/docs/03-api-reference/components/01-scroll-view-with-headers.mdx‎ renamed to ‎docs/docs/03-api-reference/01-scroll-view-with-headers.mdx‎

File renamed without changes.

‎docs/docs/03-api-reference/components/02-flat-list-with-headers.mdx‎ renamed to ‎docs/docs/03-api-reference/02-flat-list-with-headers.mdx‎

File renamed without changes.

‎docs/docs/03-api-reference/components/03-section-list-with-headers.mdx‎ renamed to ‎docs/docs/03-api-reference/03-section-list-with-headers.mdx‎

File renamed without changes.

‎docs/docs/03-api-reference/04-flash-list-with-headers.mdx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: FlashListWithHeaders
3+
hide_table_of_contents: false
4+
slug: /components/Flash-list-with-headers
5+
description: Shopify's FlashList paired with React Native Header.
6+
---
7+
8+
Component that extends Shopify's [FlashList](https://shopify.github.io/flash-list/docs/) to add support for
9+
headers exported from this library.
10+
11+
The implementation of this component relies on the [HeaderComponent](/docs/components/flash-list-with-headers#headercomponent)
12+
and [LargeHeaderComponent](/docs/components/flash-list-with-headers#largeheadercomponent) props.
13+
The [HeaderComponent](/docs/components/flash-list-with-headers#headercomponent) is rendered above
14+
the FlashList and the [LargeHeaderComponent](/docs/components/flash-list-with-headers#largeheadercomponent)
15+
is rendered as the `ListHeaderComponent` of the FlashList. Using these two props will allow for
16+
animations/built-in features in this library to work properly.
17+
18+
## Note
19+
20+
This component is only available in react-native-header version >= `0.9.x`. Please review the [Compatibility matrix](/docs/getting-started#compatibility) and ensure
21+
you have the correct dependencies installed in your project before using this component.
22+
23+
## Props
24+
25+
This component uses the FlashList under the hood, which inherits [all of the props
26+
from the FlashList component](https://shopify.github.io/flash-list/docs/usage).
27+
28+
### HeaderComponent
29+
30+
The component to render above the FlashList. This accepts a function that returns a React Element
31+
to display as the header. The function will be called with the following arguments:
32+
33+
- `showNavBar`: An animated value that will be 0 when the header's subcomponents should be hidden
34+
and 1 when they should be shown. This is useful for animating the header's subcomponents. The
35+
[Header](/docs/components/header) component uses this value to animate its left, center, and
36+
right children.
37+
38+
### LargeHeaderComponent
39+
40+
An optional component to render as the large header for this component. This accepts a function
41+
that returns a React Element to display as the large header. The function will be called with the
42+
following arguments:
43+
44+
- `scrollY`: An animated value that keeps track of the current scroll position of the FlashList.
45+
This prop is useful for creating custom animations on the large header. In our [example](/docs/example),
46+
we use the [ScalingView](/docs/components/scaling-view) component to scale the large header
47+
when the user pulls down on the FlashList (to mimic native iOS behaviour).
48+
- `showNavBar`: An animated value that keeps track of whether or not the small header is hidden.
49+
This prop is useful if you want to create your own custom animations based on whether or not the
50+
small header is hidden.
51+
52+
### ignoreLeftSafeArea
53+
54+
An optional boolean that determines whether or not to ignore the left safe area. Defaults to
55+
`false`. The safe area adjustments are used to make sure that the scroll container does not
56+
overlap with the notch/headers on different phones - leave this prop as false if you want to
57+
respect those safe areas.
58+
59+
### ignoreRightSafeArea
60+
61+
An optional boolean that determines whether or not to ignore the right safe area. Defaults to
62+
`false`. The safe area adjustments are used to make sure that the scroll container does not
63+
overlap with the notch/headers on different phones - leave this prop as `false` if you want to
64+
respect those safe areas.
65+
66+
### disableAutoFixScroll
67+
68+
An optional to disable the auto fix scroll mechanism. This is useful if you want to disable the
69+
auto scroll when the large header is partially visible. Defaults to `false`.
70+
71+
### containerStyle
72+
73+
An optional style object that will be applied to the parent container of the scroll container.
74+
75+
### largeHeaderContainerStyle
76+
77+
An optional style object that will be applied to the large header container.
78+
79+
### largeHeaderShown
80+
81+
An optional animated [Shared Value](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/shared-values/)
82+
that will be mutated by the library when the large header is shown or hidden. This is useful if you
83+
would like to track when the large header is shown or hidden.
84+
85+
### onLargeHeaderLayout
86+
87+
An optional callback that will be called when the large header is laid out. This is useful if you
88+
want to access the layout of the large header to calculate the height of the large header.

0 commit comments

Comments
 (0)