Apple TV support 4: support for input (tvOS focus engine)

Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m

@@ -41,12 +41,14 @@ - (void)test##name                      \
   [_runner runTest:_cmd module:@#name]; \
 }
 
-#if !TARGET_OS_TV // None of these will run in tvOS due to StatusBar not existing
 RCT_TEST(ViewExample)
 RCT_TEST(LayoutExample)
 RCT_TEST(TextExample)
+#if !TARGET_OS_TV
+// No switch or slider available on tvOS
 RCT_TEST(SwitchExample)
 RCT_TEST(SliderExample)
+// TabBarExample on tvOS passes locally but not on Travis
 RCT_TEST(TabBarExample)
 #endif
 

Examples/UIExplorer/UIExplorerUnitTests/RCTAllocationTests.m

@@ -213,7 +213,10 @@ - (void)testContentViewIsInvalidated
     (void)rootView;
   }
 
+#if !TARGET_OS_TV // userInteractionEnabled is true for Apple TV views
   XCTAssertFalse(rootContentView.userInteractionEnabled, @"RCTContentView should have been invalidated");
+#endif
+
 }
 
 - (void)testUnderlyingBridgeIsDeallocated

Examples/UIExplorer/js/TextExample.ios.js

@@ -22,6 +22,8 @@
  */
 'use strict';
 
+const Platform = require('Platform');
+
 var React = require('react');
 var ReactNative = require('react-native');
 var {
@@ -190,10 +192,10 @@ exports.examples = [
   render: function() {
     return (
       <View>
-        <Text style={{fontFamily: 'Cochin'}}>
+        <Text style={{fontFamily: (Platform.isTVOS ? 'Times' : 'Cochin')}}>
           Cochin
         </Text>
-        <Text style={{fontFamily: 'Cochin', fontWeight: 'bold'}}>
+        <Text style={{fontFamily: (Platform.isTVOS ? 'Times' : 'Cochin'), fontWeight: 'bold'}}>
           Cochin bold
         </Text>
         <Text style={{fontFamily: 'Helvetica'}}>
@@ -202,10 +204,10 @@ exports.examples = [
         <Text style={{fontFamily: 'Helvetica', fontWeight: 'bold'}}>
           Helvetica bold
         </Text>
-        <Text style={{fontFamily: 'Verdana'}}>
+        <Text style={{fontFamily: (Platform.isTVOS ? 'Courier' : 'Verdana')}}>
           Verdana
         </Text>
-        <Text style={{fontFamily: 'Verdana', fontWeight: 'bold'}}>
+        <Text style={{fontFamily: (Platform.isTVOS ? 'Courier' : 'Verdana'), fontWeight: 'bold'}}>
           Verdana bold
         </Text>
       </View>
@@ -565,10 +567,10 @@ exports.examples = [
         <Text style={{fontVariant: ['small-caps']}}>
           Small Caps{'\n'}
         </Text>
-        <Text style={{fontFamily: 'Hoefler Text', fontVariant: ['oldstyle-nums']}}>
+        <Text style={{fontFamily: (Platform.isTVOS ? 'Times' : 'Hoefler Text'), fontVariant: ['oldstyle-nums']}}>
           Old Style nums 0123456789{'\n'}
         </Text>
-        <Text style={{fontFamily: 'Hoefler Text', fontVariant: ['lining-nums']}}>
+        <Text style={{fontFamily: (Platform.isTVOS ? 'Times' : 'Hoefler Text'), fontVariant: ['lining-nums']}}>
           Lining nums 0123456789{'\n'}
         </Text>
         <Text style={{fontVariant: ['tabular-nums']}}>

Examples/UIExplorer/js/UIExplorerExampleList.js

@@ -32,6 +32,8 @@ const View = require('View');
 const UIExplorerActions = require('./UIExplorerActions');
 const UIExplorerStatePersister = require('./UIExplorerStatePersister');
 
+const Platform = require('Platform');
+
 import type {
   UIExplorerExample,
 } from './UIExplorerList.ios';
@@ -66,7 +68,7 @@ class UIExplorerExampleList extends React.Component {
   render(): ?React.Element<any> {
     const filterText = this.props.persister.state.filter;
     const filterRegex = new RegExp(String(filterText), 'i');
-    const filter = (example) => filterRegex.test(example.module.title);
+    const filter = (example) => filterRegex.test(example.module.title) && (!Platform.isTVOS || example.supportsTVOS);
 
     const dataSource = ds.cloneWithRowsAndSections({
       components: this.props.list.ComponentExamples.filter(filter),