activeFontStyle and fontStyle not working as expected

[AndriiBoiko]

Bug report

Summary

activeFontStyle and fontStyle props not working

{ color: '#77767E', fontFamily: 'Some font family name', fontSize: 13, }

Environment info

react-native info output:

System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Memory: 931.42 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 25, 27, 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-R | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6308749
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_231 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

Library version: ^2.0.0

Steps to reproduce

Simply ran an example

Expected

Exist

[Naturalclar]

@AndriiBoiko could you tell me which exact font you were trying to use? Also, which os is this happening on? (iOS/android) Thank you in advance!

[AndriiBoiko]

Hi! Metropolis-Regular & Metropolis-Bold

Here's the full code, maybe it will be useful ...

        <SegmentedControl
          style={styles.segmentContainer}
          fontStyle={styles.segmentFontStyle}
          activeFontStyle={styles.segmentActiveFontStyle}
          values={[t('my_conv'), t('all_conv')]}
          selectedIndex={selectedIndex}
          onChange={(event) => {
            if (selectedSection !== SELECTED_SECTION.INVITES) {
              setCurrentConversation(null);
            }
            setSelectedIndex(event.nativeEvent.selectedSegmentIndex);
          }}
        />

Styles

  segmentContainer: {
    height: 36,
    flex: 1,
    marginRight: 10,
    backgroundColor: '#EEEEEF',
  },
  segmentFontStyle: {
    color: '#77767E',
    fontFamily: 'Metropolis-Regular',
    fontSize: 13,
  },
  segmentActiveFontStyle: {
    fontFamily: 'Metropolis-Bold',
    color: '#000000',
    fontSize: 13,
  },

[kesha-antonov]

I have issue too Active element has white font color

activeFontStyle

color: "#6157FF"
fontFamily: "AvenirNext-Medium"
fontSize: 16
lineHeight: 20

fontStyle

color: "#ffffff"
fontFamily: "AvenirNext-Medium"
fontSize: 16
lineHeight: 20

[Naturalclar]

Thanks @kesha-antonov ! I've released 2.0.1 with the fix :D

[evrimfeyyaz]

This issue still happens in 2.3.0.

[anujparekh18]

Has anyone found solution to this issue?

[magrinj]

@Naturalclar Still happening on 2.4.0. Color only works on activeFontStyle when I don't provide a custom fontFamily. It's working properly on fontStyle even with the same custom font and color. From what I can read on the #96 PR, it seems that removing those lines will break the style as nothing is applied on UIControlStateSelected mode.

[prateek-somaiya]

this should reopened, still happening today! with 2.4.1 fontFamily just doesn't work on ios

[majirosstefan]

still broken in ^2.4.2 on iOS!

[workbyken]

iOS custom fonts arent working at all (useFonts method)

On Android, if i don't add fontWeight to the style, it would not use the font specified:

Eg. activeFontStyle={{fontSize: 12, fontFamily:'My-Custom-Font'}}

vs activeFontStyle={{fontSize: 12, fontFamily:'My-Custom-Font', fontWeight:'Light' }}

I guess its because of SegmentedControlTab.js where fontWeight is being set?

activeText: { fontWeight: '700', },