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;