Add actions options

index.js

@@ -1,17 +1,18 @@
-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 = {
     title: PropTypes.string,
     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,
               ]}
             >
-              <Text style={[styles.headline, headlineStyle]}>{title}</Text>
+              <Text
+                style={[
+                  styles.headline,
+                  actions ? styles.headlineWithAction : "",
+                  headlineStyle,
+                ]}
+              >
+                {title}
+              </Text>
+              {actions && <View style={styles.actionSmall}>{actions}</View>}
             </View>
           </Fade>
         </View>
@@ -113,7 +124,7 @@ class HeaderScrollView extends Component {
           contentContainerStyle={scrollContainerStyle}
           {...scrollViewProps}
         >
-          <View>
+          <View style={styles.titleContainer}>
             <Animated.Text
               style={[
                 styles.title,
@@ -127,6 +138,9 @@ class HeaderScrollView extends Component {
             >
               {title}
             </Animated.Text>
+            {actions && (
+              <Animated.View style={styles.action}>{actions}</Animated.View>
+            )}
           </View>
           {children}
         </ScrollView>

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;