Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native on tvOS

20cd0627a5c82f8b3e4f30a04745f0cf?s=47 Neil Kimmett
January 26, 2018

React Native on tvOS

Not many people are aware you can use React Native to create Apple TV apps. This talk will give an overview of how it works, and explore some of the unique challenges you face. In particular it will dive into the process of wrapping the native UISearchController component so we can use it from React Native.

20cd0627a5c82f8b3e4f30a04745f0cf?s=128

Neil Kimmett

January 26, 2018
Tweet

Transcript

  1. React Native on tvOS by Neil Kimmett

  2. !"#$%&'()*

  3. Plan • hi • Build grid view in RN •

    Wrap grid in tvOS tab bar • Add a native search tab • bye ✌
  4. hi @neilkimmett kimmett.me mobile dev since 2011

  5. None
  6. None
  7. boilerroom.tv

  8. RN on tvOS Basics • mostly the same as iOS

    • input with remote, not touch • a little rough around the edges
  9. Lets write some code! grid view, which shows you current

    selected item
  10. FlatList App Card Title of talk Speaker Name

  11. None
  12. None
  13. FlatList App Card Title of talk Speaker Name

  14. Navigation in tvOS • UIViewController • UINavigationController • UITabBarController

  15. UITabBarController on iOS

  16. UITabBarController on iOS

  17. UITabBarController • owns a list of UIViewControllers, one for each

    tab • each UIViewController owns a UITabBarItem it uses to describe it's tab in the tab bar
  18. Navigation libraries - react-navigation JS reimplementation of navigation - airbnb/native-navigation

    Swift native navigation (beta) - wix/react-native-navigation “a complete native navigation solution”
  19. TabBarIOS

  20. TabBarIOS <TabBarIOS> <TabBarIOS.Item> // ur dope content </TabBarIOS.Item> </TabBarIOS>

  21. FlatList App Card

  22. App TabBarIOS TabBarIOS.Item

  23. None
  24. App TabBarIOS TabBarIOS.Item

  25. App TabBarIOS Search

  26. Objective-C !

  27. JS vs ObjC var mittens = new Cat(); Cat *mittens

    = [[Cat alloc] init];
  28. JS vs ObjC var mittens = new Cat(“Mittens”); Cat *mittens

    = [[Cat alloc] initWithName:@“Mittens”];
  29. JS vs ObjC @interface Cat : Animal @property NSString *name;

    - (instancetype)initWithName:(NSString *)name; @end
  30. JS vs ObjC @interface Cat : Animal @property NSString *name;

    - (Cat *)initWithName:(NSString *)name; @end
  31. JS vs ObjC @implementation Cat - (void)throwBall:(Ball *)ball toFriend:(Person *)friend

    { // … } @end
  32. JS vs ObjC mittens.throw(ball, friend); [mittens throwBall:ball toFriend:friend];

  33. Native components • inherit from UIView • paired with a

    Manager class to expose to React https://facebook.github.io/react-native/docs/native-components-ios.html
  34. Native components import { requireNativeComponent } from ‘react-native’; var Map

    = requireNativeComponent('Map', null); <Map /> https://facebook.github.io/react-native/docs/native-components-ios.html
  35. App TabBarIOS Search

  36. None
  37. App TabBarIOS NKSearchComponent

  38. TabBarIOS NKSearchComponent SearchResults

  39. UISearchController

  40. UISearchController

  41. UISearchController - searchResultsController a UIViewController - searchResultsUpdater some <UISearchResultsUpdating>

  42. UISearchContainerController UISearchController TabBarIOS NKSearchComponent NKSearchResultsVC SearchResults

  43. TabBarIOS NKSearchComponent UISearchContainerController UISearchController NKSearchResultsVC SearchResults

  44. None
  45. Recap • hi • Build grid view in RN •

    Wrap grid in tvOS tab bar • Add a native search tab • bye ✌
  46. bye ✌ @neilkimmett neil@kimmett.me