From 8966015c0d3e81e6b72083a9cc355bfd186887e7 Mon Sep 17 00:00:00 2001 From: Rinor Dreshaj Date: Wed, 1 Apr 2020 16:17:28 +0200 Subject: [PATCH 1/7] FIX WARNINGS: key of maplist, textStyle prop function, useNativeDriver --- src/SegmentControl/Segment.js | 5 +++-- src/SegmentControl/index.js | 16 +++++++++++++--- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/SegmentControl/Segment.js b/src/SegmentControl/Segment.js index b43c91e..d8ff339 100644 --- a/src/SegmentControl/Segment.js +++ b/src/SegmentControl/Segment.js @@ -14,12 +14,13 @@ const Segment = ({ title, style, textStyle, onPress }) => ( ) Segment.defaultProps = { - style: {} + style: {}, + textStyle: styles.activeText } Segment.propTypes = { title: PropTypes.string.isRequired, - textStyle: ViewPropTypes.style.isRequired, + textStyle: ViewPropTypes.style, onPress: PropTypes.func.isRequired, style: ViewPropTypes.style } diff --git a/src/SegmentControl/index.js b/src/SegmentControl/index.js index 9a604ac..163e9d2 100644 --- a/src/SegmentControl/index.js +++ b/src/SegmentControl/index.js @@ -31,6 +31,7 @@ class SegmentControl extends React.Component { Animated.timing(this.state.positionAnimationValue, { toValue: this.state.activeSegmentPosition.x, duration: 150, + useNativeDriver: this.props.useNativeDriver, easing: Easing.ease }).start(() => this.props.onChange(index)) } @@ -56,7 +57,8 @@ class SegmentControl extends React.Component { const animate = () => { Animated.timing(this.state.positionAnimationValue, { toValue: segmentWidth * this.state.selectedIndex + this.props.offsetHeight, - duration: 100 + duration: 100, + useNativeDriver: this.props.useNativeDriver, }).start() } @@ -81,9 +83,10 @@ class SegmentControl extends React.Component { > {this.props.values.map((segment, index) => ( this.onSegmentSelection(index)} /> ))} @@ -113,7 +116,9 @@ SegmentControl.defaultProps = { segmentControlStyle: {}, activeSegmentStyle: {}, selectedTextStyle: {}, - unSelectedTextStyle: {} + unSelectedTextStyle: {}, + disable: false, + useNativeDriver: false } SegmentControl.propTypes = { @@ -166,6 +171,11 @@ SegmentControl.propTypes = { * Unselected Segment text style. */ unSelectedTextStyle: ViewPropTypes.style, + + /** + * To enable useNativeDriver for smooth animations, current style throws error when set to true. Default value is `false`. + */ + useNativeDriver: PropTypes.bool, } export default SegmentControl From 3cb9fe2dc857b83c9dbad9d88753005268dc0532 Mon Sep 17 00:00:00 2001 From: Rinor Dreshaj Date: Wed, 1 Apr 2020 16:24:55 +0200 Subject: [PATCH 2/7] FIX: readme --- README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 9136b65..d7d4130 100644 --- a/README.md +++ b/README.md @@ -33,18 +33,18 @@ render() { ## Properties -| Prop | Type | Description | -|---|---|---| -|**`disable`**|`Boolean`|Enable / Disable the entire component. Default is false.| -|**`values`**|`Array(String)`|The labels for the control's segment buttons, in order.| -|**`onChange`**|`function`|Callback that is called when the user taps a segment.| -|**`selectedIndex`**|`Number`|Index of the selected segment.| -|**`offsetHeight`**|`Number`|Active Segment's offset height.| -|**`style`**|`Styles`|Styles props of segment control.| -|**`segmentControlStyle`**|`Styles`|Styles props of segment control.| -|**`activeSegmentStyle`**|`Styles`|Styles props of active segment view.| -|**`selectedTextStyle`**|`Styles`|Selected Segment's text style.| -|**`unSelectedTextStyle`**|`Styles`|Unselected Segment's text style.| +| Prop | Type | Default | Description | +|---|---|---|---| +|**`disable`**|`Boolean`|`false`|Enable / Disable the entire component. Default is false.| +|**`values`**|`Array(String)`|-|The labels for the control's segment buttons, in order.| +|**`onChange`**|`function`|-|Callback that is called when the user taps a segment.| +|**`selectedIndex`**|`Number`|0|Index of the selected segment.| +|**`offsetHeight`**|`Number`|3|Active Segment's offset height.| +|**`style`**|`Styles`|{}|Styles props of segment control.| +|**`segmentControlStyle`**|`Styles`|{}|Styles props of segment control.| +|**`activeSegmentStyle`**|`Styles`|{}|Styles props of active segment view.| +|**`selectedTextStyle`**|`Styles`|{}|Selected Segment's text style.| +|**`unSelectedTextStyle`**|`Styles`|{}|Unselected Segment's text style.| ## License From b8a97f299986f4fe7556943a0c43198ee2607ae1 Mon Sep 17 00:00:00 2001 From: Rinor Dreshaj Date: Wed, 1 Apr 2020 16:27:12 +0200 Subject: [PATCH 3/7] FIX: readme --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index d7d4130..b62d463 100644 --- a/README.md +++ b/README.md @@ -36,15 +36,15 @@ render() { | Prop | Type | Default | Description | |---|---|---|---| |**`disable`**|`Boolean`|`false`|Enable / Disable the entire component. Default is false.| -|**`values`**|`Array(String)`|-|The labels for the control's segment buttons, in order.| -|**`onChange`**|`function`|-|Callback that is called when the user taps a segment.| -|**`selectedIndex`**|`Number`|0|Index of the selected segment.| -|**`offsetHeight`**|`Number`|3|Active Segment's offset height.| -|**`style`**|`Styles`|{}|Styles props of segment control.| -|**`segmentControlStyle`**|`Styles`|{}|Styles props of segment control.| -|**`activeSegmentStyle`**|`Styles`|{}|Styles props of active segment view.| -|**`selectedTextStyle`**|`Styles`|{}|Selected Segment's text style.| -|**`unSelectedTextStyle`**|`Styles`|{}|Unselected Segment's text style.| +|**`values`**|`Array(String)`|`-`|The labels for the control's segment buttons, in order.| +|**`onChange`**|`function`|`-`|Callback that is called when the user taps a segment.| +|**`selectedIndex`**|`Number`|`0`|Index of the selected segment.| +|**`offsetHeight`**|`Number`|`3`|Active Segment's offset height.| +|**`style`**|`Styles`|`{ }`|Styles props of segment control.| +|**`segmentControlStyle`**|`Styles`|`{ }`|Styles props of segment control.| +|**`activeSegmentStyle`**|`Styles`|`{ }`|Styles props of active segment view.| +|**`selectedTextStyle`**|`Styles`|`{ }`|Selected Segment's text style.| +|**`unSelectedTextStyle`**|`Styles`|`{ }`|Unselected Segment's text style.| ## License From a0737df341cfa4554a19c1c1f11d207d8f6275bd Mon Sep 17 00:00:00 2001 From: Rinor Dreshaj Date: Wed, 1 Apr 2020 16:59:03 +0200 Subject: [PATCH 4/7] FIX: warning for text style --- src/SegmentControl/Segment.js | 4 ++-- src/SegmentControl/index.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/SegmentControl/Segment.js b/src/SegmentControl/Segment.js index d8ff339..7f310b9 100644 --- a/src/SegmentControl/Segment.js +++ b/src/SegmentControl/Segment.js @@ -15,12 +15,12 @@ const Segment = ({ title, style, textStyle, onPress }) => ( Segment.defaultProps = { style: {}, - textStyle: styles.activeText + textStyle: {} } Segment.propTypes = { title: PropTypes.string.isRequired, - textStyle: ViewPropTypes.style, + textStyle: Text.propTypes.style, onPress: PropTypes.func.isRequired, style: ViewPropTypes.style } diff --git a/src/SegmentControl/index.js b/src/SegmentControl/index.js index 163e9d2..4b8ddf9 100644 --- a/src/SegmentControl/index.js +++ b/src/SegmentControl/index.js @@ -86,7 +86,7 @@ class SegmentControl extends React.Component { key={`key-${segment}`} style={{ height: segmentHeight }} title={segment} - textStyle={index !== this.state.selectedIndex ? unSelectedTextStyle : selectedTextStyle} + textStyle={index !== this.state.selectedIndex ? unSelectedTextStyle : {...styles.activeText, ...selectedTextStyle}} onPress={() => this.onSegmentSelection(index)} /> ))} From 122a46106a5ed71aa3f414f18114e1b6fec8eb88 Mon Sep 17 00:00:00 2001 From: Rinor Dreshaj Date: Wed, 1 Apr 2020 17:09:40 +0200 Subject: [PATCH 5/7] FIX: set text style prop types --- src/SegmentControl/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/SegmentControl/index.js b/src/SegmentControl/index.js index 4b8ddf9..665c925 100644 --- a/src/SegmentControl/index.js +++ b/src/SegmentControl/index.js @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import { View, Animated, ViewPropTypes, Easing } from 'react-native' +import { View, Animated, ViewPropTypes, Easing, Text} from 'react-native' import styles from './styles' import Segment from './Segment' @@ -165,12 +165,12 @@ SegmentControl.propTypes = { /** * Selected Segment text style. */ - selectedTextStyle: ViewPropTypes.style, + selectedTextStyle: Text.propTypes.style, /** * Unselected Segment text style. */ - unSelectedTextStyle: ViewPropTypes.style, + unSelectedTextStyle: Text.propTypes.style, /** * To enable useNativeDriver for smooth animations, current style throws error when set to true. Default value is `false`. From 53406239ee6aaa957f018ef33f64078fc39a8e50 Mon Sep 17 00:00:00 2001 From: Rinor Dreshaj Date: Mon, 6 Apr 2020 18:04:30 +0200 Subject: [PATCH 6/7] FIX: RE render when selected index has changed --- src/SegmentControl/index.js | 41 +++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/src/SegmentControl/index.js b/src/SegmentControl/index.js index 665c925..a564056 100644 --- a/src/SegmentControl/index.js +++ b/src/SegmentControl/index.js @@ -19,6 +19,47 @@ class SegmentControl extends React.Component { activeSegmentPosition: { x: props.offsetHeight, y: props.offsetHeight }, positionAnimationValue: new Animated.Value(0) } + + this.componentShouldReRender = false + } + + componentWillUpdate(nextProps, nextState) { + if(this.componentShouldReRender) { + return; + } + + if (!this.componentShouldReRender && nextProps.selectedIndex != this.state.selectedIndex) { + this.onParentStateChange(nextProps.selectedIndex) + } + } + + /** + * Trigger change when state is changed from parent component + * + * @param {Number} index + */ + onParentStateChange = index => { + + this.componentShouldReRender = true + + setTimeout(() => this.componentShouldReRender = false, 1000) + + const animate = () => { + Animated.timing(this.state.positionAnimationValue, { + toValue: this.state.activeSegmentPosition.x, + duration: 150, + useNativeDriver: this.props.useNativeDriver, + easing: Easing.ease + }).start() + } + + this.setState( + prevState => ({ + selectedIndex: index, + activeSegmentPosition: { x: prevState.segmentDimension.width * index + this.props.offsetHeight, y: prevState.activeSegmentPosition.y } + }), + animate + ) } /** From 9d5a0967f93e215364e2eb328d62e953112bff9b Mon Sep 17 00:00:00 2001 From: Rinor Dreshaj Date: Wed, 8 Apr 2020 16:55:04 +0200 Subject: [PATCH 7/7] remove warning for lifecycle --- src/SegmentControl/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/SegmentControl/index.js b/src/SegmentControl/index.js index a564056..10661e4 100644 --- a/src/SegmentControl/index.js +++ b/src/SegmentControl/index.js @@ -23,7 +23,7 @@ class SegmentControl extends React.Component { this.componentShouldReRender = false } - componentWillUpdate(nextProps, nextState) { + UNSAFE_componentWillUpdate(nextProps, nextState) { if(this.componentShouldReRender) { return; }