diff --git a/index.js b/index.js
index 5aee4d1..3f75e12 100644
--- a/index.js
+++ b/index.js
@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { View, ScrollView, Text, Animated, Dimensions } from 'react-native';
-import Fade from 'react-native-fade';
-import styles from './styles';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { View, ScrollView, Text, Animated, Dimensions } from "react-native";
+import Fade from "react-native-fade";
+import styles from "./styles";
-const { height } = Dimensions.get('window');
+const { height } = Dimensions.get("window");
class HeaderScrollView extends Component {
static propTypes = {
@@ -12,6 +12,7 @@ class HeaderScrollView extends Component {
titleStyle: PropTypes.object,
headlineStyle: PropTypes.object,
children: PropTypes.node,
+ actions: PropTypes.node,
containerStyle: PropTypes.object,
headerContainerStyle: PropTypes.object,
headerComponentContainerStyle: PropTypes.object,
@@ -28,10 +29,10 @@ class HeaderScrollView extends Component {
headerHeight: 0,
headerY: 0,
isHeaderScrolled: false,
- fadeDirection: '',
+ fadeDirection: "",
};
- onLayout = event => {
+ onLayout = (event) => {
this.setState({
headerHeight: event.nativeEvent.layout.height,
headerY: event.nativeEvent.layout.y,
@@ -40,7 +41,7 @@ class HeaderScrollView extends Component {
scrollAnimatedValue = new Animated.Value(0);
- handleScroll = event => {
+ handleScroll = (event) => {
const offset = event.nativeEvent.contentOffset.y;
const scrollHeaderOffset = this.state.headerHeight + this.state.headerY - 8;
const isHeaderScrolled = scrollHeaderOffset < offset;
@@ -61,7 +62,8 @@ class HeaderScrollView extends Component {
render() {
const {
children,
- title = '',
+ actions = undefined,
+ title = "",
titleStyle = {},
containerStyle = {},
headerContainerStyle = {},
@@ -81,7 +83,7 @@ class HeaderScrollView extends Component {
const animatedFontSize = this.scrollAnimatedValue.interpolate({
inputRange: [-height, 0],
outputRange: [fontSize * 1.75, fontSize],
- extrapolate: 'clamp',
+ extrapolate: "clamp",
});
return (
@@ -94,7 +96,16 @@ class HeaderScrollView extends Component {
headerComponentContainerStyle,
]}
>
- {title}
+
+ {title}
+
+ {actions && {actions}}
@@ -113,7 +124,7 @@ class HeaderScrollView extends Component {
contentContainerStyle={scrollContainerStyle}
{...scrollViewProps}
>
-
+
{title}
+ {actions && (
+ {actions}
+ )}
{children}
diff --git a/styles.js b/styles.js
index fb917e3..9838680 100644
--- a/styles.js
+++ b/styles.js
@@ -1,30 +1,49 @@
-import { StyleSheet } from 'react-native';
-import { ifIphoneX } from 'react-native-iphone-x-helper';
+import { StyleSheet } from "react-native";
+import { ifIphoneX } from "react-native-iphone-x-helper";
const headerHeight = ifIphoneX(88, 60);
const styles = StyleSheet.create({
- container: { flex: 1, backgroundColor: 'transparent' },
+ container: { flex: 1, backgroundColor: "transparent" },
headerContainer: {
height: headerHeight,
},
headerComponentContainer: {
height: headerHeight,
- alignItems: 'center',
- justifyContent: 'flex-end',
+ alignItems: "center",
+ flexDirection: "row",
+ justifyContent: "center",
paddingBottom: 12,
+ marginRight: 20,
},
headline: {
fontSize: 17,
lineHeight: 22,
- fontWeight: '500',
+ fontWeight: "500",
letterSpacing: 0.019,
+ flex: 1,
+ textAlign: "center",
+ },
+ headlineWithAction: {
+ transform: [{ translateX: 20 }],
+ },
+ titleContainer: {
+ marginRight: 20,
+ flexDirection: "row",
+ justifyContent: "space-between",
},
title: {
letterSpacing: 0.011,
- fontWeight: '700',
+ fontWeight: "700",
marginLeft: 16,
},
+ action: {
+ alignSelf: "center",
+ },
+
+ actionSmall: {
+ flexDirection: "row",
+ },
});
export default styles;