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

React Native on tvOS

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.

Neil Kimmett

January 26, 2018
Tweet

More Decks by Neil Kimmett

Other Decks in Technology

Transcript

  1. React Native on tvOS
    by Neil Kimmett

    View Slide

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

    View Slide

  3. Plan
    • hi
    • Build grid view in RN
    • Wrap grid in tvOS tab bar
    • Add a native search tab
    • bye ✌

    View Slide

  4. hi
    @neilkimmett
    kimmett.me
    mobile dev since 2011

    View Slide

  5. View Slide

  6. View Slide

  7. boilerroom.tv

    View Slide

  8. RN on tvOS Basics
    • mostly the same as iOS
    • input with remote, not touch
    • a little rough around the edges

    View Slide

  9. Lets write some code!
    grid view, which shows you current selected item

    View Slide

  10. FlatList
    App
    Card
    Title of talk
    Speaker Name

    View Slide

  11. View Slide

  12. View Slide

  13. FlatList
    App
    Card
    Title of talk
    Speaker Name

    View Slide

  14. Navigation in tvOS
    • UIViewController
    • UINavigationController
    • UITabBarController

    View Slide

  15. UITabBarController on iOS

    View Slide

  16. UITabBarController on iOS

    View Slide

  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

    View Slide

  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”

    View Slide

  19. TabBarIOS

    View Slide

  20. TabBarIOS


    // ur dope content


    View Slide

  21. FlatList
    App
    Card

    View Slide

  22. App
    TabBarIOS
    TabBarIOS.Item

    View Slide

  23. View Slide

  24. App
    TabBarIOS
    TabBarIOS.Item

    View Slide

  25. App
    TabBarIOS
    Search

    View Slide


  26. Objective-C
    !

    View Slide

  27. JS vs ObjC
    var mittens = new Cat();
    Cat *mittens = [[Cat alloc] init];

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  31. JS vs ObjC
    @implementation Cat
    - (void)throwBall:(Ball *)ball
    toFriend:(Person *)friend {
    // …
    }
    @end

    View Slide

  32. JS vs ObjC
    mittens.throw(ball, friend);
    [mittens throwBall:ball toFriend:friend];

    View Slide

  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

    View Slide

  34. Native components
    import { requireNativeComponent } from ‘react-native’;
    var Map = requireNativeComponent('Map', null);

    https://facebook.github.io/react-native/docs/native-components-ios.html

    View Slide

  35. App
    TabBarIOS
    Search

    View Slide

  36. View Slide

  37. App
    TabBarIOS
    NKSearchComponent

    View Slide

  38. TabBarIOS
    NKSearchComponent
    SearchResults

    View Slide

  39. UISearchController

    View Slide

  40. UISearchController

    View Slide

  41. UISearchController
    - searchResultsController
    a UIViewController
    - searchResultsUpdater
    some

    View Slide

  42. UISearchContainerController
    UISearchController
    TabBarIOS
    NKSearchComponent
    NKSearchResultsVC
    SearchResults

    View Slide

  43. TabBarIOS
    NKSearchComponent
    UISearchContainerController
    UISearchController
    NKSearchResultsVC
    SearchResults

    View Slide

  44. View Slide

  45. Recap
    • hi
    • Build grid view in RN
    • Wrap grid in tvOS tab bar
    • Add a native search tab
    • bye ✌

    View Slide

  46. bye ✌
    @neilkimmett
    [email protected]

    View Slide