software-mansion / react-native-svg

SVG library for React Native, React Native Web, and plain React web projects.
MIT License
7.49k stars 1.13k forks source link

Case-sensitive forms feature in <Text> works on Android, but doesn't work on iOS #1596

Open s-chernomorets opened 3 years ago

s-chernomorets commented 3 years ago

Bug

\<Text> with fontFeatureSettings={'case 1'} works on Android, but doesn't work on iOS. The font that I am using is SF Pro Rounded, and this setting is useful to align symbols to the middle of digits.

Behavior with fontFeatureSettings={'case 1'} on Android

Screenshot 2021-05-30 at 20 26 37

Behavior without fontFeatureSettings={'case 1'} on Android

Screenshot 2021-05-30 at 20 27 02

Behavior on iOS

Screenshot 2021-05-30 at 20 26 19

Environment info

Run react-native info in your terminal and copy the results here. Also, include the precise version number of this library that you are using in the project

React native info output:

System:
    OS: macOS 11.3
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Memory: 52.70 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.13.0 - /usr/local/bin/node
    Yarn: 1.22.10 - ~/n/bin/yarn
    npm: 6.12.0 - ~/n/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK:
      API Levels: 23, 28, 29
      Build Tools: 28.0.3, 29.0.0, 29.0.2, 30.0.0, 30.0.2
      System Images: android-23 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-R | Google APIs Intel x86 Atom, android-R | Google APIs Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7042882
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_212 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.1 => 0.64.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 12.1.1

Steps To Reproduce

  1. git clone https://github.com/s-chernomorec/react-native-svg-font-settings
  2. cd react-native-svg-font-settings
  3. yarn install
  4. cd ios
  5. pod install
qwertychouskie commented 1 month ago

Annoyingly, this affects web too, even though web definitely supports font-feature-settings. It seems that the SVG itself is getting fontFeatureSettings set directly as a prop, rather than setting font-feature-settings in the style like e.g. font-family and font-size are.

qwertychouskie commented 1 month ago

As for iOS, it seems the support was never implemented: https://github.com/software-mansion/react-native-svg/pull/430#issuecomment-325512705

qwertychouskie commented 1 month ago

Web issue should be fixed with https://github.com/software-mansion/react-native-svg/pull/2463. @msand It appears you wrote a lot of the iOS code, would you have any idea where to start to make this work on iOS too?