Skip to content

Commit 865b259

Browse files
Thomas Wangsatya164
Thomas Wang
authored andcommitted
Add react-native-header-scroll-view to Community-developed Navig… (react-navigation#533)
1 parent 35aae25 commit 865b259

File tree

1 file changed

+34
-0
lines changed

1 file changed

+34
-0
lines changed

docs/community-libraries-and-navigators.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,3 +59,37 @@ Provides simple HOCs that map react-navigation props to your screen components d
5959
#### Links
6060

6161
[github.com/vonovak/react-navigation-props-mapper](https://github.com/vonovak/react-navigation-props-mapper)
62+
63+
## react-native-header-scroll-view
64+
65+
This component implements [iOS large header with grow/shrink on scroll](https://react-navigation.canny.io/feature-requests/p/ios-11-large-header-and-growshrink-on-scroll), made by [@jonsamp](https://github.com/jonsamp). Note that it doesn't handle header animation between screens, it only handles animating the header title on scroll.
66+
67+
To use this component, we'd want to disable the built-in header. There are 2 ways to disable the header in React Navigation:
68+
69+
1. Disable the default header for one screen:
70+
71+
```js
72+
static navigationOptions = {
73+
header: null
74+
};
75+
```
76+
77+
2. Disable header globally in `createStackNavigator`
78+
79+
```js
80+
const Home = createStackNavigator(
81+
{
82+
ExampleScreen1,
83+
ExampleScreen1,
84+
},
85+
{
86+
headerMode: 'none'
87+
}
88+
);
89+
```
90+
91+
#### Links
92+
93+
[https://github.com/jonsamp/react-native-header-scroll-view](https://github.com/jonsamp/react-native-header-scroll-view)
94+
95+
[Demo on expo via VaxNow](https://expo.io/@thomaswangio/vax-now)

0 commit comments

Comments
 (0)