We recently integrated the Here SDK lite for iOS in our app and during the submission to the AppStore, we discover that the xcframework contains unsupported files.
ITMS-90853: Invalid font - There was an error validating the font at
'Subito.app/Frameworks/heresdk.framework/style/fonts/FiraGO-Map.woff'.
Font not supported by platform.
ITMS-90853: Invalid font - There was an error validating the font at
'Subito.app/Frameworks/heresdk.framework/style/fonts/DroidSansFallback.woff'.
Font not supported by platform.
ITMS-90853: Invalid font - There was an error validating the font at
'Subito.app/Frameworks/heresdk.framework/style/fonts/FiraGO-Italic.woff'.
Font not supported by platform.
We didn't find any instructions on the official documentation about stripping these files before submitting to the store, but that's what we proceeded to do, since we are not using any UI related component coming from the SDK at the moment. I hope that it's a safe operation (resulting app seems to work fine).
Are there any other folders that could/should be removed from the xcframework before the submission to the store (e.g. style folder)?
The HERE SDK contains several fonts to render map labels in different languages. If you want to strip those files - or if you want to optimize the size of the overall app, you can remove selected fonts. For example, the font with Chinese, Japanese and Korean characters is around 1.7MB. To remove this font, open the heresdk.framework file and remove the following files:
style/fonts/DroidSansFallback.woff
style/fonts/DroidSansFallback.license
When you remove the font, it is recommended to switch the map language to any other language than Chinese, Japanese or Korean.
Check also the map / language documentation with more related info.
This should help at least as a workaround until the faulty fonts are fixed by the HERE SDK team with a newer HERE SDK release.
For your question: You can also remove the related license file.
I downloaded the new SFPro fonts from this url https://developer.apple.com/fonts/. And I can see that it is properly installed in Font Book. But when I try to use it as System font inside my app's UILabel, it gives me the SFUI fonts instead. (I print the system font with the code below and it prints '.SFUIText')
print(UIFont.systemFont(ofSize: 15).fontName)
How can I use new SFPro fonts instead of SFUI? My Xcode version is 8.2.1 and the software is El Capitan version 10.11.16.
I am successful in using it by following steps:
1) Add font files to your project
2) In your info.plist press on the plus button. Type Fonts provided by application. Add your font files names for example (SF-Pro-Text-Regular.otf)
3) Make sure the font file has your project as a targeted membership by clicking on the file and then ticking on checkmark under target membership section
I am making a React Native app. I would like to customize the app icon (meaning the icon that you click on to start the app). I have Googled this, but I keep finding different types of icons that refer to different things. How do I add these types of icons to the app?
iOS Icons
Set AppIcon in Images.xcassets.
Add 9 different size icons:
29pt
29pt*2
29pt*3
40pt*2
40pt*3
57pt
57pt*2
60pt*2
60pt*3.
Images.xcassets will look like this:
Android Icons
Put ic_launcher.png in folders [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
72*72 ic_launcher.png in mipmap-hdpi.
48*48 ic_launcher.png in mipmap-mdpi.
96*96 ic_launcher.png in mipmap-xhdpi.
144*144 ic_launcher.png in mipmap-xxhdpi.
192*192 ic_launcher.png in mipmap-xxxhdpi.
Update 2019 Android
The latest versions of react native also supports round icon. For this particular case, you have two choices:
A. Add round icons:
In each mipmap folder, add additionally to the ic_launcher.png file also a round version called ic_launcher_round.png with the same size.
B. Remove round icons:
Inside yourProjectFolder/android/app/src/main/AndroidManifest.xml remove the line android:roundIcon="#mipmap/ic_launcher_round"and save it.
Otherwhise the build throws an error.
I wrote a generator to automatically generate icons for your react native app from a single icon file. It generates your assets and it also adds them correctly to your ios and android project:
Update (04/09/2019)
We revamped our generator to be up to date with the ecosystem standards. You can now use #bam.tech/react-native-make.
You can install it using: yarn add #bam.tech/react-native-make in the react-native project
To use it react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>
And... that's it! Hope it can be useful for others :)
Recommendations:
1024x1024 base image
No transparent background for iOS
An icon which follows adaptive icons guidelines for Android
Here are some improvements over the previous tool: 🥳
No Yeoman dependency, it is now a react-native-cli plugin
No Image Magick dependency
Creates Adaptive icons for Android
Adds missing icons sizes for iOS
I would use a service to scale the icon correctly. http://makeappicon.com/ seems good. Use a image on the larger size as scaling up a smaller image can lead to the larger icons being pixelated. That site will give you sizes for both iOS and Android.
From there its just a matter of setting the icon like you would a regular native app.
https://help.apple.com/xcode/mac/8.0/#/dev10510b1f7
Set icon for Android application
I was able to add an app icon to my react-native android project by following this guy's advice and using Android Asset Studio
Here it is, transcribed in case the link goes dead:
How to upload an Application Icon in React-Native Android
1) Upload your image to Android Asset Studio.
Pick whatever effects you’d like to apply. The tool generates a zip file for you. Click Download .Zip.
2) Unzip the file on your machine. Then drag over the images you want to your /android/app/src/main/res/ folder. Make sure to put each image in the right subfolder mipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.
3) Do not (as I originally did) naively drag and drop the whole folder over your res folder. As you may be removing your /res/values/{strings,styles}.xml files altogether.
Android Studio has a very handy icon asset wizard called Image Asset Studio (user guide here). It's quite self explainatory, and has a few handy effects and it's built right in:
Screenshot from Android Studio 4.1.3 on Windows 10
Someone made a very easy to use tool just for this task: https://www.npmjs.com/package/app-icon
This simple tool allows you to create a single icon in your react-native project, then create icons of all required sizes from it. It currently works for iOS and Android.
I've used it. Made a 512x512 png and then ran that tool and boom, done. Super easy.
You'll need different sized icons for iOS and Android, like Rockvic said. In addition, I recommend this site for generating different sized icons if anybody is interested. You don't need to download anything and it works perfectly.
https://resizeappicon.com/
Hope it helps.
This is helpful for people struggling to find better site to generate icons and splashscreen
Make App Icon (useful for both android and ios)
APE tools (useful for both android and ios)
Icon set creator (useful for ios only)
Andoid Asset Studio(useful for android only + recommended*)
Steps Android App icons:
Go to this website https://appicon.co/
Add image their and generate icons, it should be downloaded
Unzip the folder
Inside their copy all the folders in AppIcons/android/ (i.e. Folder
names: mipmap-xxxhdpi,mipmap-xxhdpi,mipmap-xhdpi,mipmap-hdpi,mipmap-mdpi)
paste above copied folders into {rootFolder}/android/app/src/main/res/
and replace existing ones
Remove this line from AndroidManifest.xml
(android:roundIcon="#mipmap/ic_launcher_round")
Icons are successfully added
Change IOS App icons:
Go to this website https://appicon.co/
Add image their and generate icons, it should be downloaded
Unzip the folder
Inside their copy all the folders in AppIcons/Assets.xcassets/ (i.e.
AppIcon.appiconset folder)
paste the AppIcon.appiconset folder into
{rootFolder}/ios/{projectname}/Images.xcassets/ and replace existing one
Icons are successfully added
If you're using expo just place an 1024 x 1024 png file in your project and
add an icon property to your app.json i.e. "icon": "./src/assets/icon.png"
https://docs.expo.io/versions/latest/guides/app-icons
For setting the App launch icon for Android Devices in a React-Native project:
Take a high resolution image of your logo and place it inside your project directory. Preferably in [Project-DIR]/android/app/src/main/res/
Open Android Studio and run your React-native project.
In Android Studio's Project window, select the Android view
Right-click the res folder and select New > Image Asset
A "Configure Image Asset" window will open; Locate your high resolution image and place set it as your "Foreground layer".
Set your "Background Layer" if applicable
Click "Next" and continue to finish.
Run your application again to see the new app launch icon.
Official documentation can be found here: https://developer.android.com/studio/write/image-asset-studio
Use this library to make your work easier.
It will automate your Icon generation process
https://www.npmjs.com/package/#bam.tech/react-native-make
Update 2022
Since the Almouro's Answer is no longer maintained
Android and iOS icon
You can now generate icons with one command both for iOS and Android with rounded icon:
npx icon-set-creator create ./path/to/icon.png
I highly recommend using an icon with a size of at least 1024x1024 pixels
Adaptive Android icon
npx icon-set-creator create -b <background> -f <foreground> -A
background - The color (E.g. "#ffffff") or image asset (E.g. "assets/images/christmas-background.png")
foreground - The image asset (E.g. "assets/images/christmas-foreground.png")
I personally use this link to generate my desired icons https://appicon.co/
And for importing inside the application.
For IOS Setup
Click on your project from Xcode ==>
then on the left side you will see your click on that ==>
Now you will see subfile name Images.xcassets click on that ==>
you icons size will be displayed on the right hand window ==>
simply drag and drop the icons which we have generated from https://appicon.co/ ==>
and your IOS ICON SETUP IS DONE.
Moving to Android
We will go to Android ==> app ==> src ==> main ==> res
Here you will various folders named mipmap-hdpi till xxxhdpi ==>
Drag the icons from the specific folder to your project specific folder.
Happy coding!
To import icons on React Native if you want the icons without having the pictures, then react-native-vector-icons would be the best one. You can use it if you don't want to download the icons and use it in your project.
I would like to suggest to use react-native-vector-icons to import icons to your project. As you use vector icons, you don't need to worry much on icon scaling side. While using the package you are able to use all popular icon set such as fontawesome, ionicons etc..
Besides these iconsets you can also bring your own icons too to your react-native project by packing your icons as a ttf file and you can import that ttf directly to both android and ios project. You can utilise the same react-native-vector-icons library to manage those icons
Here is a detailed procedure to setup custom icons
https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c
You can import react-native-elements and use the font-awesome icons to your react native app
Install
npm install --save react-native-elements
then import that where you want to use icons
import { Icon } from 'react-native-elements'
Use it like
render() {
return(
<Icon
reverse
name='ios-american-football'
type='ionicon'
color='#517fa4'
/>
);
}
I want to select "Custom" option from Attribute Inspector of WatchKit Interface for UILabel but its disabled.
Is Any one facing the same problem? Please give me direction if I am missing any thing;
I am using XCode Version 6.2 (6C131e)
The standard iOS fonts are only standard on iOS devices. They are not included on Apple Watch.
The documentation shows this list of all standard WatchKit font styles:
Note the phrase "none installed" in your screenshot.
If you want to use any other font, you'll need to install a custom font. From the WatchKit docs:
To use custom fonts, you must install those fonts by doing the following:
Include the custom font file in both your WatchKit app and your WatchKit extension bundle.
Add the UIAppFonts key to your WatchKit app’s Info.plist file, and use it to specify the fonts you added to the bundle. For more information about this key, see Information Property List Key Reference.
Im using custom font in my application and have run into very weird issue. The font is available on the simulator but unavailable on an actual iPad.
1 I'm not confusing font name and file name. The file name is bitdust2.ttf whereas font name is BitDustTwo and this is how i call it and on simulator it is ok.
2 The is not a question of case sensitivity. The font is really unavailable on the device. I know that cause when i do this:
NSLog(#"%#", [UIFont familyNames]);
i see that on simulator my font is included in the familyNames array, but is missing on the iPad. What's wrong? Did you ever encounter such an issue?
(From above comment:) Verify that the font file "bitdust2.ttf" has been added to the target and is copied into the application bundle.
The simulator is, as titled, a simulator, and not a true emulator. The simulator runs the same named APIs, but since the simulator runs on OS X, not iOS, the simulator often has more functionality. For example, the media player classes on the simulator support more types of files (codecs) than on the device because OS X supports more codecs than iOS. On the simulator, you have more Fonts available than on the device.
Here's more details about embedding fonts in an iOS app:
There is a simple way to use custom fonts in iOS 4.
Add your font file (for example, Chalkduster.ttf) to Resources folder of the project in XCode.
Open info.plist and add a new key called UIAppFonts. The type of this key should be array.
Add your custom font name to this array including extension (Chalkduster.ttf).
Now you can use [UIFont fontWithName:#"Chalkduster" size:16] in your application.
It's important not to miss any steps. If you're still having problems, go to the Build Phases tab of your project in XCode and under the Copy Bundle Resources tab, ensure that your font file is included. If not, add it.
Check your device OS version as well as its support for iOs versions. The custom font you used must be compatible with iOS of your device.
Check this answer out. May be you need to have alternate custom font in case it is not supported.
I just had this same problem and after verifying everything was correct:
Font is added to proper key in info.plist "Fonts provided by application"
Font is added to project -> info under same key as the info.plist (this just means that i saved the plist)
Font file is added to the project
Font file is in the project folder
Project -> target -> Build Phases -> Copy bundle resources: contains my font file
File is checked off for being associated with target
I had to download the file again and re-add it.. when i did the file name was changed ... so i think the .ttf file was corrupted
You'll need to embed the font onto the app; instructions are here.