microsoft/react-native-test-app

iOS: Add support for fonts

rrebase opened this issue · 3 comments

Proposal

In iOS, adding a custom font requires updating UIAppFonts in Info.plist https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app

Looks like it's not supported right now so I propose an additional fonts property under platform in the Manifest (app.json)

{
  "ios": {
    "fonts": [
      "EuclidCircularB-Regular.ttf"
      "EuclidCircularB-Bold.ttf",
    ]
  }
}

Implementation Details

The reading of manifest on iOS could be similar to app icons

generate_assets_catalog!(project_root, target_platform, destination)
and then parse, update the plist using CFPropertyList (subdep of current gems). Here's some code (thanks CodePilot), tested in example and it works.

require("cfpropertylist")

# ...

def set_fonts_in_plist!(project_root, target_platform, destination)
  fonts = platform_config('fonts', project_root, target_platform)
  return if fonts.nil? || fonts.empty?

  info_plist = File.join(destination, 'ReactTestApp', 'Info.plist')

  plist = CFPropertyList::List.new(file: info_plist)
  data = CFPropertyList.native_types(plist.value)

  data['UIAppFonts'] = []
  fonts.each do |font|
    data['UIAppFonts'] << File.basename(font)
  end

  plist.value = CFPropertyList.guess(data)
  File.write(info_plist, plist.to_str(CFPropertyList::List::FORMAT_XML))
end

# ...
generate_assets_catalog!(project_root, target_platform, destination) 
set_fonts_in_plist!(project_root, target_platform, destination)

Also worth adding the font files automatically to resources, otherwise they need to be duplicated in resources.ios[].

Code of Conduct

  • I agree to follow this project's Code of Conduct

Hi @rrebase, this sounds like a good thing to add.

In the meantime, if you're on 2.x, have you tried using Expo Config Plugins? We added support for it recently. I have yet to document it, but you can find an example in this PR: #1033

The official documentation can be found here: https://docs.expo.dev/guides/config-plugins/

Haven't tried Expo Config Plugins outside of Expo apps yet, but sounds like a fantastic addition as withInfoPlist for example, is much more flexible and would support setting any other values as well 👍

tido64 commented

@rrebase Thank you for your initial implementation of this. I have submitted a PR based on it. Sorry it took so long to get to this point.