react-native/React/Base/RCTTVRemoteHandler.m
Douglas 45185947ee Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389)
Summary:
**Motivation**

Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible.  The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals).  This PR also fixes some breakages in compiling React Native for tvOS.

**Test plan**

Compilation fixes should enable tvOS compile test to pass in Travis CI.

The modal fix can be tested with the following component, modified from the original source in #15389 .

``` javascript
import React, { Component } from 'react';
import ReactNative from 'ReactNative';
import {
    Text,
    View,
    StyleSheet,
    TouchableHighlight,
    TVEventHandler,
    Modal,
} from 'react-native';

export default class Events extends Component {

    constructor(props) {
        super(props);

        this.state = {
            modalVisible: false,
        };
        this._tvEventHandler = new TVEventHandler();
    }

    _enableTVEventHandler() {
        this._tvEventHandler.enable(this, (cmp, evt) => {
            const myTag = ReactNative.findNodeHandle(cmp);
            console.log('Event.js TVEventHandler: ', evt.eventType);
            // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') {
            //  console.log('Event.js TVEventHandler: ', evt.eventType);
            // }
        });
    }

    _disableTVEventHandler() {
        if (this._tvEventHandler) {
            this._tvEventHandler.disable();
            delete this._tvEventHandler;
        }
    }

    componentDidMount() {
        this._enableTVEventHandler();
    }

    componentWillUnmount() {
        this._disableTVEventHandler();
    }

    _renderRow() {
        return (
            <View style={styles.row}>
                {
                    Array.from({ length: 7 }).map((_, index) => {
                        return (
                            <TouchableHighlight
                                key={index}
                                onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }}
                            >
                                <View style={styles.item}>
                                    <Text style={styles.itemText}>{ index }</Text>
                                </View>
                            </TouchableHighlight>
                        );
                    })
                }
            </View>
        );
    }

    onTVEvent(cmp, evt) {
      console.log('Modal.js TVEventHandler: ', evt.eventType);
    }

    hideModal() {
      this.setState({
        modalVisible: false
      });
    }

    render() {
        return (
            <View style={styles.container}>
                <Modal visible={this.state.modalVisible}
                       onRequestClose={() => this.hideModal()}>
                    <View style={styles.modal}>
                        { this._renderRow() }
                        { this._renderRow() }
                    </View>
                </Modal>
                { this._renderRow() }
                { this._renderRow() }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'darkslategrey',
    },
    row: {
        flexDirection: 'row',
        padding: 30,
    },
    item: {
        width: 200,
        height: 100,
        borderColor: 'cyan',
        borderWidth: 2,
        margin: 30,
        alignItems: 'center',
        justifyContent: 'center',
    },
    itemText: {
        fontSize: 40,
        color: 'cyan',
    },
    modal: {
        flex: 1,
        backgroundColor: 'steelblue',
    },
});
```
**Release Notes**

After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV.
Closes https://github.com/facebook/react-native/pull/16076

Differential Revision: D6288801

Pulled By: hramos

fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 13:54:54 -08:00

215 lines
7.4 KiB
Objective-C

/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "RCTTVRemoteHandler.h"
#import <UIKit/UIGestureRecognizerSubclass.h>
#import "RCTAssert.h"
#import "RCTBridge.h"
#import "RCTEventDispatcher.h"
#import "RCTLog.h"
#import "RCTRootView.h"
#import "RCTTVNavigationEventEmitter.h"
#import "RCTUIManager.h"
#import "RCTUtils.h"
#import "RCTView.h"
#import "UIView+React.h"
#if __has_include("RCTDevMenu.h")
#import "RCTDevMenu.h"
#endif
NSString *const RCTTVRemoteEventMenu = @"menu";
NSString *const RCTTVRemoteEventPlayPause = @"playPause";
NSString *const RCTTVRemoteEventSelect = @"select";
NSString *const RCTTVRemoteEventLongPlayPause = @"longPlayPause";
NSString *const RCTTVRemoteEventLongSelect = @"longSelect";
NSString *const RCTTVRemoteEventLeft = @"left";
NSString *const RCTTVRemoteEventRight = @"right";
NSString *const RCTTVRemoteEventUp = @"up";
NSString *const RCTTVRemoteEventDown = @"down";
NSString *const RCTTVRemoteEventSwipeLeft = @"swipeLeft";
NSString *const RCTTVRemoteEventSwipeRight = @"swipeRight";
NSString *const RCTTVRemoteEventSwipeUp = @"swipeUp";
NSString *const RCTTVRemoteEventSwipeDown = @"swipeDown";
@implementation RCTTVRemoteHandler {
NSMutableDictionary<NSString *, UIGestureRecognizer *> *_tvRemoteGestureRecognizers;
}
- (instancetype)init
{
if ((self = [super init])) {
_tvRemoteGestureRecognizers = [NSMutableDictionary dictionary];
// Recognizers for Apple TV remote buttons
// Play/Pause
[self addTapGestureRecognizerWithSelector:@selector(playPausePressed:)
pressType:UIPressTypePlayPause
name:RCTTVRemoteEventPlayPause];
// Menu
[self addTapGestureRecognizerWithSelector:@selector(menuPressed:)
pressType:UIPressTypeMenu
name:RCTTVRemoteEventMenu];
// Select
[self addTapGestureRecognizerWithSelector:@selector(selectPressed:)
pressType:UIPressTypeSelect
name:RCTTVRemoteEventSelect];
// Up
[self addTapGestureRecognizerWithSelector:@selector(swipedUp:)
pressType:UIPressTypeUpArrow
name:RCTTVRemoteEventUp];
// Down
[self addTapGestureRecognizerWithSelector:@selector(swipedDown:)
pressType:UIPressTypeDownArrow
name:RCTTVRemoteEventDown];
// Left
[self addTapGestureRecognizerWithSelector:@selector(swipedLeft:)
pressType:UIPressTypeLeftArrow
name:RCTTVRemoteEventLeft];
// Right
[self addTapGestureRecognizerWithSelector:@selector(swipedRight:)
pressType:UIPressTypeRightArrow
name:RCTTVRemoteEventRight];
// Recognizers for long button presses
// We don't intercept long menu press -- that's used by the system to go to the home screen
[self addLongPressGestureRecognizerWithSelector:@selector(longPlayPausePressed:)
pressType:UIPressTypePlayPause
name:RCTTVRemoteEventLongPlayPause];
[self addLongPressGestureRecognizerWithSelector:@selector(longSelectPressed:)
pressType:UIPressTypeSelect
name:RCTTVRemoteEventLongSelect];
// Recognizers for Apple TV remote trackpad swipes
// Up
[self addSwipeGestureRecognizerWithSelector:@selector(swipedUp:)
direction:UISwipeGestureRecognizerDirectionUp
name:RCTTVRemoteEventSwipeUp];
// Down
[self addSwipeGestureRecognizerWithSelector:@selector(swipedDown:)
direction:UISwipeGestureRecognizerDirectionDown
name:RCTTVRemoteEventSwipeDown];
// Left
[self addSwipeGestureRecognizerWithSelector:@selector(swipedLeft:)
direction:UISwipeGestureRecognizerDirectionLeft
name:RCTTVRemoteEventSwipeLeft];
// Right
[self addSwipeGestureRecognizerWithSelector:@selector(swipedRight:)
direction:UISwipeGestureRecognizerDirectionRight
name:RCTTVRemoteEventSwipeRight];
}
return self;
}
- (void)playPausePressed:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventPlayPause toView:r.view];
}
- (void)menuPressed:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventMenu toView:r.view];
}
- (void)selectPressed:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventSelect toView:r.view];
}
- (void)longPlayPausePressed:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventLongPlayPause toView:r.view];
#if __has_include("RCTDevMenu.h") && RCT_DEV
// If shake to show is enabled on device, use long play/pause event to show dev menu
[[NSNotificationCenter defaultCenter] postNotificationName:RCTShowDevMenuNotification object:nil];
#endif
}
- (void)longSelectPressed:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventLongSelect toView:r.view];
}
- (void)swipedUp:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventUp toView:r.view];
}
- (void)swipedDown:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventDown toView:r.view];
}
- (void)swipedLeft:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventLeft toView:r.view];
}
- (void)swipedRight:(UIGestureRecognizer *)r
{
[self sendAppleTVEvent:RCTTVRemoteEventRight toView:r.view];
}
#pragma mark -
- (void)addLongPressGestureRecognizerWithSelector:(nonnull SEL)selector pressType:(UIPressType)pressType name:(NSString *)name
{
UILongPressGestureRecognizer *recognizer = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:selector];
recognizer.allowedPressTypes = @[@(pressType)];
_tvRemoteGestureRecognizers[name] = recognizer;
}
- (void)addTapGestureRecognizerWithSelector:(nonnull SEL)selector pressType:(UIPressType)pressType name:(NSString *)name
{
UITapGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:selector];
recognizer.allowedPressTypes = @[@(pressType)];
_tvRemoteGestureRecognizers[name] = recognizer;
}
- (void)addSwipeGestureRecognizerWithSelector:(nonnull SEL)selector direction:(UISwipeGestureRecognizerDirection)direction name:(NSString *)name
{
UISwipeGestureRecognizer *recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:selector];
recognizer.direction = direction;
_tvRemoteGestureRecognizers[name] = recognizer;
}
- (void)sendAppleTVEvent:(NSString *)eventType toView:(__unused UIView *)v
{
[[NSNotificationCenter defaultCenter] postNotificationName:RCTTVNavigationEventNotification
object:@{@"eventType":eventType}];
}
@end