From 7f5d64ad9195ca7803bedde819c933aa59b41b92 Mon Sep 17 00:00:00 2001 From: Adilson Mandlate Date: Mon, 18 May 2020 18:18:32 +0200 Subject: [PATCH 1/4] feat: Add right actions options --- index.js | 28 +++++++++++++++++----------- styles.js | 17 ++++++++++------- 2 files changed, 27 insertions(+), 18 deletions(-) diff --git a/index.js b/index.js index 5aee4d1..e618804 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 ( @@ -95,6 +97,7 @@ class HeaderScrollView extends Component { ]} > {title} + {actions && {actions}} @@ -127,6 +130,9 @@ class HeaderScrollView extends Component { > {title} + {actions && ( + {actions} + )} {children} diff --git a/styles.js b/styles.js index fb917e3..736bc26 100644 --- a/styles.js +++ b/styles.js @@ -1,30 +1,33 @@ -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", + justifyContent: "flex-end", paddingBottom: 12, }, headline: { fontSize: 17, lineHeight: 22, - fontWeight: '500', + fontWeight: "500", letterSpacing: 0.019, }, title: { letterSpacing: 0.011, - fontWeight: '700', + fontWeight: "700", marginLeft: 16, }, + action: { + alignSelf: "center", + }, }); export default styles; From 5fe7ad6250add61f86069bab88a5f54ed2ac9727 Mon Sep 17 00:00:00 2001 From: Adilson Mandlate Date: Tue, 19 May 2020 15:43:43 +0200 Subject: [PATCH 2/4] feat: Add style rules for small header, on scroll --- index.js | 2 +- styles.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index e618804..5353271 100644 --- a/index.js +++ b/index.js @@ -97,7 +97,7 @@ class HeaderScrollView extends Component { ]} > {title} - {actions && {actions}} + {actions && {actions}} diff --git a/styles.js b/styles.js index 736bc26..75c320e 100644 --- a/styles.js +++ b/styles.js @@ -28,6 +28,10 @@ const styles = StyleSheet.create({ action: { alignSelf: "center", }, + + actionSmall: { + flexDirection: "row", + }, }); export default styles; From f68a6b98c5637dc1dfd05d059b0b930add790ce0 Mon Sep 17 00:00:00 2001 From: Adilson Mandlate Date: Tue, 19 May 2020 15:45:22 +0200 Subject: [PATCH 3/4] feat: Center and align to left the title and actions respectively --- index.js | 2 +- styles.js | 12 +++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 5353271..cef538d 100644 --- a/index.js +++ b/index.js @@ -116,7 +116,7 @@ class HeaderScrollView extends Component { contentContainerStyle={scrollContainerStyle} {...scrollViewProps} > - + Date: Tue, 19 May 2020 15:52:45 +0200 Subject: [PATCH 4/4] feat: Remove margin on headline without actions --- index.js | 10 +++++++++- styles.js | 2 ++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index cef538d..3f75e12 100644 --- a/index.js +++ b/index.js @@ -96,7 +96,15 @@ class HeaderScrollView extends Component { headerComponentContainerStyle, ]} > - {title} + + {title} + {actions && {actions}} diff --git a/styles.js b/styles.js index 525a027..9838680 100644 --- a/styles.js +++ b/styles.js @@ -23,6 +23,8 @@ const styles = StyleSheet.create({ letterSpacing: 0.019, flex: 1, textAlign: "center", + }, + headlineWithAction: { transform: [{ translateX: 20 }], }, titleContainer: {