fix: ios: Not selected tab gets bold face when setting fontSize #80

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

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,14 +41,49 @@ 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 (
  <View
  style={[
  styles.default,
  style,
  backgroundColor && {backgroundColor},
  !enabled && styles.disabled,
- ]}>
+ ]}
+ 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 ? (
+ <Animated.View
+ style={[
+ styles.slider,
+ {
+ transform: [{translateX: animation}],
+ width: segmentWidth,
+ backgroundColor: tintColor || 'white',
+ },
+ ]}
+ />
+ ) : 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,14 @@ const styles = StyleSheet.create({
  disabled: {
  opacity: 0.4,
  },
+ slider: {
+ position: 'absolute',
+ borderRadius: 5,
+ top: 1,
+ bottom: 1,
+ right: 1,
+ left: 1,
+ },
 });
 
 export default SegmentedControl;

js/SegmentedControlTab.js

@@ -42,22 +42,12 @@ export const SegmentedControlTab = ({
  };
  const color = getColor();
 
- const getBackgroundColor = () => {
- if (selected && tintColor) {
- return tintColor;
- }
- return 'white';
- };
  return (
  <TouchableOpacity
  style={styles.container}
  disabled={!enabled}
  onPress={onSelect}>
- <View
- style={[
- styles.default,
- selected && {backgroundColor: getBackgroundColor()},
- ]}>
+ <View style={[styles.default]}>
  <Text
  style={[
  {color},

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",