Skip to content

Commit cbe08ec

Browse files
kanellockanelloc
authored
feat!: make navbar opts more robust (#62)
* docs: update README * feat: add new property for elevation * feat: update examples BREAKING CHANGE: Default paddingTop, borderBottomWidth & borderBottomColor have moved from the wrapper header component to the component provided from the user/dev
1 parent 640465c commit cbe08ec

File tree

8 files changed

+37
-20
lines changed

8 files changed

+37
-20
lines changed

‎README.md

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,16 +71,17 @@ Also a running snack [here](https://snack.expo.dev/ukGomwbdE)
7171

7272
# Props
7373

74-
| Prop name | Description | Type | Required |
75-
|--------------------------|-----------------------------------------------------------------------------------------------------------------------------|-----------------------|----------|
76-
| `TopNavBarComponent` | Rendered on top of the screen as a navbar when scrolling to the top | JSX.Element | true |
77-
| `HeaderComponent` | A component to use on top of header image. It can also be used without header image to render a custom component as header. | JSX.Element | false |
78-
| `HeaderNavbarComponent` | Rendered on top of the header. Transitions to TopNavbarComponent as you scroll | JSX.Element | false |
79-
| `headerMaxHeight` | Height of the header (headerImage or HeaderComponent). Default value is 300 | number | false |
80-
| `topBarHeight` | Height of the top navbar. Default value is 90 | number | false |
81-
| `headerImage` | Image header source | ImageSourcePropType | false |
82-
| `disableScale` | Disables header scaling when scrolling. Default value is false | boolean | false |
83-
| `imageStyle` | Image styles | StyleProp<ImageStyle> | false |
74+
| Prop name | Description | Type | Required |
75+
|-------------------------|-----------------------------------------------------------------------------------------------------------------------------|-----------------------|----------|
76+
| `TopNavBarComponent` | Rendered on top of the screen as a navbar when scrolling to the top | JSX.Element | true |
77+
| `HeaderComponent` | A component to use on top of header image. It can also be used without header image to render a custom component as header. | JSX.Element | false |
78+
| `HeaderNavbarComponent` | Rendered on top of the header. Transitions to TopNavbarComponent as you scroll | JSX.Element | false |
79+
| `headerMaxHeight` | Height of the header (headerImage or HeaderComponent). Default value is 300 | number | false |
80+
| `topBarHeight` | Height of the top navbar. Default value is 90 | number | false |
81+
| `topBarElevation` | [ANDROID ONLY] Elevation of the top navbar. Default value is 0 | number | false |
82+
| `headerImage` | Image header source | ImageSourcePropType | false |
83+
| `disableScale` | Disables header scaling when scrolling. Default value is false | boolean | false |
84+
| `imageStyle` | Image styles | StyleProp<ImageStyle> | false |
8485

8586

8687

‎example/src/components/HeaderNavBar.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const styles = StyleSheet.create({
3131
container: {
3232
width: '100%',
3333
paddingHorizontal: 8,
34+
paddingTop: 32,
3435
flexDirection: 'row',
3536
justifyContent: 'space-between',
3637
},

‎example/src/components/TopNavBar.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const TopNavBar = () => {
99
const nav = useNavigation();
1010
return (
1111
<View style={styles.container}>
12-
<View style={{ width: width / 3 }}>
12+
<View style={[{ width: width / 3 }, styles.leftContainer]}>
1313
<RoundButton icon={<ArrowLeft />} onPress={nav.goBack} />
1414
</View>
1515
<View
@@ -30,9 +30,17 @@ export const TopNavBar = () => {
3030
const styles = StyleSheet.create({
3131
container: {
3232
width: '100%',
33-
paddingHorizontal: 8,
33+
height: '100%',
34+
alignItems: 'center',
3435
flexDirection: 'row',
3536
justifyContent: 'space-between',
37+
paddingTop: 32,
38+
borderBottomColor: '#a4a4a4',
39+
borderBottomWidth: StyleSheet.hairlineWidth,
40+
backgroundColor: 'tomato',
41+
},
42+
leftContainer: {
43+
paddingLeft: 8,
3644
},
3745
titleContainer: {
3846
alignItems: 'center',

‎example/src/screens/HeaderNavBarExample.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const HeaderNavBarExample = () => {
1212
<AnimatedScrollView
1313
ref={scrollRef}
1414
headerMaxHeight={400}
15-
topBarHeight={isIOS ? 90 : 70}
15+
topBarHeight={isIOS ? 90 : 80}
1616
HeaderNavbarComponent={<HeaderNavBar />}
1717
TopNavBarComponent={<TopNavBar />}
1818
headerImage={require('../../assets/cabin.jpg')}

‎src/components/AnimatedFlatList.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const AnimatedFlatList = forwardRef<FlatList, AnimatedFlatListViewProps>(
1111
{
1212
headerMaxHeight,
1313
topBarHeight,
14+
topBarElevation,
1415
disableScale,
1516
TopNavBarComponent,
1617
HeaderNavbarComponent,
@@ -23,6 +24,7 @@ export const AnimatedFlatList = forwardRef<FlatList, AnimatedFlatListViewProps>(
2324
) => {
2425
const imageHeight = headerMaxHeight || IMG_HEADER_HEIGHT;
2526
const headerNavHeight = topBarHeight || HEADER_HEIGHT;
27+
const headerElevation = topBarElevation || 0;
2628
const [scroll, onScroll, scale, translateYDown, translateYUp] =
2729
useAnimateScrollView(imageHeight, disableScale);
2830

@@ -45,6 +47,7 @@ export const AnimatedFlatList = forwardRef<FlatList, AnimatedFlatListViewProps>(
4547
}
4648
/>
4749
<AnimatedNavbar
50+
headerElevation={headerElevation}
4851
headerHeight={headerNavHeight}
4952
scroll={scroll}
5053
imageHeight={imageHeight}

‎src/components/AnimatedNavbar.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const AnimatedNavbar = ({
99
OverflowHeaderComponent,
1010
TopNavbarComponent,
1111
headerHeight,
12+
headerElevation,
1213
}: AnimatedNavbarProps) => {
1314
const [headerOpacity, overflowHeaderOpacity] = useAnimateNavbar(
1415
scroll,
@@ -21,11 +22,11 @@ const AnimatedNavbar = ({
2122
<Animated.View
2223
style={[
2324
styles.container,
24-
styles.header,
2525
{
2626
zIndex: headerOpacity,
2727
height: headerHeight,
2828
opacity: headerOpacity,
29+
elevation: headerElevation,
2930
},
3031
]}
3132
>
@@ -50,19 +51,13 @@ const AnimatedNavbar = ({
5051

5152
const styles = StyleSheet.create({
5253
container: {
53-
paddingTop: 32,
5454
position: 'absolute',
55-
elevation: 2,
5655
top: 0,
5756
width: '100%',
5857
backgroundColor: 'white',
5958
alignItems: 'center',
6059
justifyContent: 'center',
6160
},
62-
header: {
63-
borderBottomWidth: StyleSheet.hairlineWidth,
64-
borderBottomColor: '#a4a4a4',
65-
},
6661
overflowHeader: {
6762
backgroundColor: 'transparent',
6863
},

‎src/components/AnimatedScrollView.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const AnimatedScrollView = forwardRef<
1717
HeaderComponent,
1818
headerMaxHeight,
1919
topBarHeight,
20+
topBarElevation,
2021
headerImage,
2122
disableScale,
2223
children,
@@ -27,6 +28,7 @@ export const AnimatedScrollView = forwardRef<
2728
) => {
2829
const imageHeight = headerMaxHeight || IMG_HEADER_HEIGHT;
2930
const headerNavHeight = topBarHeight || HEADER_HEIGHT;
31+
const headerElevation = topBarElevation || 0;
3032
const [scroll, onScroll, scale, translateYDown, translateYUp] =
3133
useAnimateScrollView(imageHeight, disableScale);
3234

@@ -50,6 +52,7 @@ export const AnimatedScrollView = forwardRef<
5052
{children}
5153
</Animated.ScrollView>
5254
<AnimatedNavbar
55+
headerElevation={headerElevation}
5356
headerHeight={headerNavHeight}
5457
scroll={scroll}
5558
imageHeight={imageHeight}

‎src/types.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,11 @@ type AnimatedViewProps = {
3333
*/
3434
topBarHeight?: number;
3535

36+
/**
37+
* [ANDROID ONLY] Elevation of the top navbar. Default value is 0
38+
*/
39+
topBarElevation?: number;
40+
3641
/**
3742
* @see https://reactnative.dev/docs/image#source
3843
*/
@@ -59,6 +64,7 @@ export type AnimatedNavbarProps = {
5964
TopNavbarComponent?: JSX.Element;
6065
imageHeight: number;
6166
headerHeight: number;
67+
headerElevation: number;
6268
};
6369

6470
export type AnimatedHeaderProps = {

0 commit comments

Comments
 (0)