Add iOS support for CSS property font-variant, accepting tabular-nums…

Summary:
Ground work for allowing `font-variant`s. Currently allows switching between `tabular-nums` and `proportional-nums`. I will need guidance on how to test this, and a few pointers on code style (new to Objective C, and had to make one or two hacks).
Closes https://github.com/facebook/react-native/pull/9045

Reviewed By: majak

Differential Revision: D3664338

Pulled By: javache

fbshipit-source-id: 032f326c37ee6150348da2b33b6a3fc1988e8920

Examples/UIExplorer/UIExplorerUnitTests/RCTFontTests.m

@@ -16,6 +16,8 @@
 
 #import "RCTFont.h"
 
+#import <CoreText/CoreText.h>
+
 @interface RCTFontTests : XCTestCase
 
 @end
@@ -178,6 +180,27 @@
   }
 }
 
+- (void)testVariant
+{
+  {
+    UIFont *expected = [UIFont monospacedDigitSystemFontOfSize:14 weight:UIFontWeightRegular];
+    UIFont *result = [RCTConvert UIFont:@{@"fontVariant": @[@"tabular-nums"]}];
+    RCTAssertEqualFonts(expected, result);
+  }
+  {
+    UIFont *monospaceFont = [UIFont monospacedDigitSystemFontOfSize:14 weight:UIFontWeightRegular];
+    UIFontDescriptor *fontDescriptor = [monospaceFont.fontDescriptor fontDescriptorByAddingAttributes:@{
+      UIFontDescriptorFeatureSettingsAttribute: @[@{
+        UIFontFeatureTypeIdentifierKey: @(kLowerCaseType),
+        UIFontFeatureSelectorIdentifierKey: @(kLowerCaseSmallCapsSelector),
+      }]
+    }];
+    UIFont *expected = [UIFont fontWithDescriptor:fontDescriptor size:14];
+    UIFont *result = [RCTConvert UIFont:@{@"fontVariant": @[@"tabular-nums", @"small-caps"]}];
+    RCTAssertEqualFonts(expected, result);
+  }
+}
+
 - (void)testInvalidFont
 {
   {

Examples/UIExplorer/js/TextExample.ios.js

@@ -465,6 +465,33 @@ exports.examples = [
       </View>
     );
   },
+}, {
+  title: 'Font variants',
+  render: function() {
+    return (
+      <View>
+        <Text style={{fontVariant: ['small-caps']}}>
+          Small Caps{'\n'}
+        </Text>
+        <Text style={{fontFamily: 'Hoefler Text', fontVariant: ['oldstyle-nums']}}>
+          Old Style nums 0123456789{'\n'}
+        </Text>
+        <Text style={{fontFamily: 'Hoefler Text', fontVariant: ['lining-nums']}}>
+          Lining nums 0123456789{'\n'}
+        </Text>
+        <Text style={{fontVariant: ['tabular-nums']}}>
+          Tabular nums{'\n'}
+          1111{'\n'}
+          2222{'\n'}
+        </Text>
+        <Text style={{fontVariant: ['proportional-nums']}}>
+          Proportional nums{'\n'}
+          1111{'\n'}
+          2222{'\n'}
+        </Text>
+      </View>
+    );
+  },
 }];
 
 var styles = StyleSheet.create({