Skip to content

Commit 0bd2fd1

Browse files
moskalakamilmoskalakamil
authored
remove outdated tv docs (facebook#4155)
1 parent dd0c155 commit 0bd2fd1

File tree

7 files changed

+7
-1293
lines changed

7 files changed

+7
-1293
lines changed

‎docs/building-for-tv.md‎

Lines changed: 1 addition & 185 deletions
Original file line numberDiff line numberDiff line change
@@ -4,190 +4,6 @@ title: Building For TV Devices
44
hide_table_of_contents: true
55
---
66

7-
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
8-
97
TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.
108

11-
<Tabs groupId="tv" queryString defaultValue="androidtv" values={[ {label: 'Android TV', value: 'androidtv'}, {label: '🚧 tvOS', value: 'tvos'}, ]}>
12-
13-
<TabItem value="androidtv">
14-
15-
> **Deprecated.** TV support has moved to the [React Native for TV](https://github.com/react-native-tvos/react-native-tvos) repository.
16-
17-
## Build changes
18-
19-
- _Native layer_: To run React Native project on Android TV make sure to make the following changes to `AndroidManifest.xml`
20-
21-
```xml
22-
<!-- Add custom banner image to display as Android TV launcher icon -->
23-
<application
24-
...
25-
android:banner="@drawable/tv_banner"
26-
>
27-
...
28-
<intent-filter>
29-
...
30-
<!-- Needed to properly create a launch intent when running on Android TV -->
31-
<category android:name="android.intent.category.LEANBACK_LAUNCHER"/>
32-
</intent-filter>
33-
...
34-
</application>
35-
```
36-
37-
- _JavaScript layer_: Support for Android TV has been added to `Platform.android.js`. You can check whether code is running on Android TV by doing
38-
39-
```js
40-
const Platform = require('Platform');
41-
const running_on_android_tv = Platform.isTV;
42-
```
43-
44-
## Code changes
45-
46-
- _Access to touchable controls_: When running on Android TV the Android framework will automatically apply a directional navigation scheme based on relative position of focusable elements in your views. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableWithoutFeedback`, `TouchableHighlight`, `TouchableOpacity` and `TouchableNativeFeedback` will work as expected. In particular:
47-
48-
- `onFocus` will be executed when the touchable view goes into focus
49-
- `onBlur` will be executed when the touchable view goes out of focus
50-
- `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.
51-
52-
- _TV remote/keyboard input_: A new native class, `ReactAndroidTVRootViewHelper`, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code:
53-
54-
```tsx
55-
const TVEventHandler = require('TVEventHandler');
56-
57-
class Game2048 extends React.Component {
58-
_tvEventHandler: any;
59-
60-
_enableTVEventHandler() {
61-
this._tvEventHandler = new TVEventHandler();
62-
this._tvEventHandler.enable(this, function (cmp, evt) {
63-
if (evt && evt.eventType === 'right') {
64-
cmp.setState({board: cmp.state.board.move(2)});
65-
} else if (evt && evt.eventType === 'up') {
66-
cmp.setState({board: cmp.state.board.move(1)});
67-
} else if (evt && evt.eventType === 'left') {
68-
cmp.setState({board: cmp.state.board.move(0)});
69-
} else if (evt && evt.eventType === 'down') {
70-
cmp.setState({board: cmp.state.board.move(3)});
71-
} else if (evt && evt.eventType === 'playPause') {
72-
cmp.restartGame();
73-
}
74-
});
75-
}
76-
77-
_disableTVEventHandler() {
78-
if (this._tvEventHandler) {
79-
this._tvEventHandler.disable();
80-
delete this._tvEventHandler;
81-
}
82-
}
83-
84-
componentDidMount() {
85-
this._enableTVEventHandler();
86-
}
87-
88-
componentWillUnmount() {
89-
this._disableTVEventHandler();
90-
}
91-
}
92-
```
93-
94-
- _Dev Menu support_: On the emulator, cmd-M will bring up the Dev Menu, similar to Android. To bring it up on a real Android TV device, press the menu button or long press the fast-forward button on the remote. (Please do not shake the Android TV device, that will not work :) )
95-
96-
- _Known issues_:
97-
98-
- `TextInput` components do not work for now (i.e. they cannot receive focus automatically, see [this comment](https://github.com/facebook/react-native/pull/16500#issuecomment-629285638)).
99-
- It is however possible to use a ref to manually trigger `inputRef.current.focus()`.
100-
- You can wrap your input inside a `TouchableWithoutFeedback` component and trigger focus in the `onFocus` event of that touchable. This enables opening the keyboard via the arrow keys.
101-
- The keyboard might reset its state after each keypress (this might only happen inside the Android TV emulator).
102-
- The content of `Modal` components cannot receive focus, see [this issue](https://github.com/facebook/react-native/issues/24448) for details.
103-
104-
</TabItem>
105-
<TabItem value="tvos">
106-
107-
> **Deprecated.** TV support has moved to the [React Native for TV](https://github.com/react-native-tvos/react-native-tvos) repository.
108-
109-
## Build changes
110-
111-
- _Native layer_: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'.
112-
113-
- _react-native init_: New React Native projects created with `react-native init` will have Apple TV target automatically created in their XCode projects.
114-
115-
- _JavaScript layer_: Support for Apple TV has been added to `Platform.ios.js`. You can check whether code is running on AppleTV by doing
116-
117-
```tsx
118-
const Platform = require('Platform');
119-
const running_on_tv = Platform.isTV;
120-
121-
// If you want to be more specific and only detect devices running tvOS
122-
// (but no Android TV devices) you can use:
123-
const running_on_apple_tv = Platform.isTVOS;
124-
```
125-
126-
## Code changes
127-
128-
- _General support for tvOS_: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.
129-
130-
- _Common codebase_: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.
131-
132-
- _Access to touchable controls_: When running on Apple TV, the native view class is `RCTTVView`, which has additional methods to make use of the tvOS focus engine. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableWithoutFeedback`, `TouchableHighlight` and `TouchableOpacity` will work as expected. In particular:
133-
134-
- `onFocus` will be executed when the touchable view goes into focus
135-
- `onBlur` will be executed when the touchable view goes out of focus
136-
- `onPress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.
137-
138-
- _TV remote/keyboard input_: A new native class, `RCTTVRemoteHandler`, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by `RCTTVNavigationEventEmitter` (a subclass of `RCTEventEmitter`), that fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code:
139-
140-
```tsx
141-
const TVEventHandler = require('TVEventHandler');
142-
143-
class Game2048 extends React.Component {
144-
_tvEventHandler: any;
145-
146-
_enableTVEventHandler() {
147-
this._tvEventHandler = new TVEventHandler();
148-
this._tvEventHandler.enable(this, function (cmp, evt) {
149-
if (evt && evt.eventType === 'right') {
150-
cmp.setState({board: cmp.state.board.move(2)});
151-
} else if (evt && evt.eventType === 'up') {
152-
cmp.setState({board: cmp.state.board.move(1)});
153-
} else if (evt && evt.eventType === 'left') {
154-
cmp.setState({board: cmp.state.board.move(0)});
155-
} else if (evt && evt.eventType === 'down') {
156-
cmp.setState({board: cmp.state.board.move(3)});
157-
} else if (evt && evt.eventType === 'playPause') {
158-
cmp.restartGame();
159-
}
160-
});
161-
}
162-
163-
_disableTVEventHandler() {
164-
if (this._tvEventHandler) {
165-
this._tvEventHandler.disable();
166-
delete this._tvEventHandler;
167-
}
168-
}
169-
170-
componentDidMount() {
171-
this._enableTVEventHandler();
172-
}
173-
174-
componentWillUnmount() {
175-
this._disableTVEventHandler();
176-
}
177-
}
178-
```
179-
180-
- _Dev Menu support_: On the simulator, cmd-D will bring up the Dev Menu, similar to iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )
181-
182-
- _TV remote animations_: `RCTTVView` native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties.
183-
184-
- _Back navigation with the TV remote menu button_: The `BackHandler` component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote.
185-
186-
- _TabBarIOS behavior_: The `TabBarIOS` component wraps the native `UITabBar` API, which works differently on Apple TV. To avoid jittery re-rendering of the tab bar in tvOS (see [this issue](https://github.com/facebook/react-native/issues/15081)), the selected tab bar item can only be set from JavaScript on initial render, and is controlled after that by the user through native code.
187-
188-
- _Known issues_:
189-
190-
- [ListView scrolling](https://github.com/facebook/react-native/issues/12793). The issue can be worked around by setting `removeClippedSubviews` to false in ListView and similar components. For more discussion of this issue, see [this PR](https://github.com/facebook/react-native/pull/12944).
191-
192-
</TabItem>
193-
</Tabs>
9+
> **Deprecated.** TV support has moved to the [React Native for TV](https://github.com/react-native-tvos/react-native-tvos#readme) repository. Please see the _README_ there for information on projects for Apple TV or Android TV.

0 commit comments

Comments
 (0)