From ed07ac3407601ff8bed1e535b82f20e7d2dbb8a4 Mon Sep 17 00:00:00 2001 From: Marek Piechut Date: Thu, 7 May 2020 09:22:42 +0200 Subject: [PATCH 1/6] feat: Animate segment selection on Android (#77) --- js/SegmentedControl.js | 50 +++++++++++++++++++++++++++++++++++++-- js/SegmentedControlTab.js | 12 +--------- 2 files changed, 49 insertions(+), 13 deletions(-) diff --git a/js/SegmentedControl.js b/js/SegmentedControl.js index bcfa5d3d..f48b84b3 100644 --- a/js/SegmentedControl.js +++ b/js/SegmentedControl.js @@ -5,7 +5,7 @@ 'use strict'; import * as React from 'react'; -import {StyleSheet, View} from 'react-native'; +import {Animated, Easing, StyleSheet, View} from 'react-native'; import {SegmentedControlTab} from './SegmentedControlTab'; import type {SegmentedControlProps} from './types'; @@ -27,6 +27,9 @@ const SegmentedControl = ({ backgroundColor, fontSize, }: SegmentedControlProps) => { + const [segmentWidth, setSegmentWidth] = React.useState(0); + const animation = React.useRef(new Animated.Value(0)).current; + const handleChange = (index: number) => { // mocks iOS's nativeEvent const event: any = { @@ -38,6 +41,18 @@ const SegmentedControl = ({ onChange && onChange(event); onValueChange && onValueChange(values[index]); }; + + React.useEffect(() => { + if (animation && segmentWidth) { + Animated.timing(animation, { + toValue: segmentWidth * (selectedIndex || 0), + duration: 300, + easing: Easing.out(Easing.quad), + useNativeDriver: true, + }).start(); + } + }, [animation, segmentWidth, selectedIndex]); + return ( + ]} + onLayout={({ + nativeEvent: { + layout: {width}, + }, + }) => { + const newSegmentWidth = values.length ? width / values.length : 0; + if (newSegmentWidth !== segmentWidth) { + animation.setValue(newSegmentWidth * (selectedIndex || 0)); + setSegmentWidth(newSegmentWidth); + } + }}> + {selectedIndex != null && segmentWidth ? ( + + ) : null} {values && values.map((value, index) => { return ( @@ -70,6 +108,8 @@ const SegmentedControl = ({ const styles = StyleSheet.create({ default: { + overflow: 'hidden', + position: 'relative', flexDirection: 'row', justifyContent: 'space-evenly', alignContent: 'center', @@ -80,6 +120,12 @@ const styles = StyleSheet.create({ disabled: { opacity: 0.4, }, + slider: { + position: 'absolute', + left: 0, + height: '100%', + borderRadius: 5, + }, }); export default SegmentedControl; diff --git a/js/SegmentedControlTab.js b/js/SegmentedControlTab.js index 3c878d0f..aa770bf8 100644 --- a/js/SegmentedControlTab.js +++ b/js/SegmentedControlTab.js @@ -42,22 +42,12 @@ export const SegmentedControlTab = ({ }; const color = getColor(); - const getBackgroundColor = () => { - if (selected && tintColor) { - return tintColor; - } - return 'white'; - }; return ( - + Date: Thu, 7 May 2020 19:28:53 +0900 Subject: [PATCH 2/6] chore: apply style to match iOS 13 Segmented Control (#78) --- js/SegmentedControl.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/js/SegmentedControl.js b/js/SegmentedControl.js index f48b84b3..77fbe61e 100644 --- a/js/SegmentedControl.js +++ b/js/SegmentedControl.js @@ -122,9 +122,11 @@ const styles = StyleSheet.create({ }, slider: { position: 'absolute', - left: 0, - height: '100%', borderRadius: 5, + top: 1, + bottom: 1, + right: 1, + left: 1, }, }); From d9c082282c901673df278639878223c43d4e8926 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Thu, 7 May 2020 19:30:10 +0900 Subject: [PATCH 3/6] 1.6.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b0b28513..d3c0ded7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@react-native-community/segmented-control", - "version": "1.5.0", + "version": "1.6.0", "description": "React Native SegmentedControlIOS library", "main": "js/index.js", "types": "index.d.ts", From 3287d67cd9db4fdd2683a120eaaa4db448dacbc5 Mon Sep 17 00:00:00 2001 From: Gabriel Prat Masramon Date: Sun, 10 May 2020 06:09:22 +0200 Subject: [PATCH 4/6] fix: ios: Not selected tab gets bold face when setting fontSize #80 --- ios/RNCSegmentedControl.m | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/ios/RNCSegmentedControl.m b/ios/RNCSegmentedControl.m index 1f5a7307..f3275bbf 100644 --- a/ios/RNCSegmentedControl.m +++ b/ios/RNCSegmentedControl.m @@ -41,10 +41,14 @@ - (void)setSelectedIndex:(NSInteger)selectedIndex - (void)setFontSize:(NSInteger)fontSize { - UIFont *font = [UIFont boldSystemFontOfSize: fontSize]; + UIFont *font = [UIFont systemFontOfSize: fontSize]; [_attributes setObject: font forKey:NSFontAttributeName]; [self setTitleTextAttributes:_attributes forState:UIControlStateNormal]; + UIFont *fontBold = [UIFont boldSystemFontOfSize: fontSize]; + [_attributes setObject: fontBold forKey:NSFontAttributeName]; + [self setTitleTextAttributes:_attributes + forState:UIControlStateSelected]; } - (void)setBackgroundColor:(UIColor *)backgroundColor From d0d5b3e14d5dce998ba94f34bf9136cadf5c7eed Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Sun, 10 May 2020 13:34:18 +0900 Subject: [PATCH 5/6] fix: allow combining attributes (#83) --- example/App.js | 10 ++++++++++ ios/RNCSegmentedControl.m | 8 +++++--- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/example/App.js b/example/App.js index 4f61563f..da293937 100644 --- a/example/App.js +++ b/example/App.js @@ -78,10 +78,20 @@ export default class App extends React.Component<{}, $FlowFixMeState> { Segmented controls can have defined fontSize + + + diff --git a/ios/RNCSegmentedControl.m b/ios/RNCSegmentedControl.m index f3275bbf..72eba44c 100644 --- a/ios/RNCSegmentedControl.m +++ b/ios/RNCSegmentedControl.m @@ -78,7 +78,8 @@ - (void)setActiveTextColor:(UIColor *)textColor #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \ __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0 if (@available(iOS 13.0, *)) { - [self setTitleTextAttributes:@{NSForegroundColorAttributeName: textColor} + [_attributes setObject: textColor forKey:NSForegroundColorAttributeName]; + [self setTitleTextAttributes:_attributes forState:UIControlStateSelected]; } #endif @@ -91,8 +92,9 @@ - (void)setTintColor:(UIColor *)tintColor __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0 if (@available(iOS 13.0, *)) { [self setSelectedSegmentTintColor:tintColor]; - [self setTitleTextAttributes:@{NSForegroundColorAttributeName: tintColor} - forState:UIControlStateNormal]; + [_attributes setObject: tintColor forKey:NSForegroundColorAttributeName]; + [self setTitleTextAttributes:_attributes + forState:UIControlStateNormal]; } #endif } From 6ec83e6030dc68a1a5ac436d2a013e2dc687aa18 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Sun, 10 May 2020 13:37:52 +0900 Subject: [PATCH 6/6] 1.6.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d3c0ded7..27a50694 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@react-native-community/segmented-control", - "version": "1.6.0", + "version": "1.6.1", "description": "React Native SegmentedControlIOS library", "main": "js/index.js", "types": "index.d.ts",