Add support for Android TV devices #16500

krzysztofciombor · 2017-10-23T11:53:45Z

Add support for Android TV devices

Motivation

To be on par with Apple TV support, this makes it possible to run React Native apps on Android TV devices (See also: https://react-native.canny.io/feature-requests/p/android-tv-support)
These changes also make it possible to navigate through the app using D-PAD buttons that are present on some mobile devices
Since these changes affect, among others, ReactRootView.java and Touchable.js code and are closely related to Apple TV implementation, it makes sense for them to be included in the core

Supported Android TV features

React native apps can be launched on Android TV devices and properly render their content
Navigation is possible using left, right, top, bottom arrows from the remote (or D-PAD)
Touchable components can handle D-PAD center button press events and correctly fire their onPress handlers
Touchable components will receive onPressIn and onPressOut events and can react to focus/blur changes appropriately (just like on Apple TV)
Platform constants allow to check if the react-native app is running on TV (Platform.isTV)
ScrollViews behave correctly (same as native implementation) when switching to view outside bounds – that is, the container would scroll such that the newly focused element is fully visible
Native "clicking" sounds are played when moving between focusable elements
Play/Pause click event is send to TVEventHandler
Rewind and FastForward events are send to TVEventHandler
Back button behaves as a normal Android back button
Diagonal buttons work correctly on Android TV, e.g. if there is no button directly to the right from the focused one, but there is one to the right but a bit higher/lower it will grab focus
Dev menu can be accessed by long pressing fast forward button

A demo showing RNTester app running on Android TV device (Amazon Fire TV Stick) can be found here:

Caveats

TextInput will not work on Android TV devices. There's an issue with native ReactEditText implementation that prevents it from receiving focus. This makes it impossible to navigate to TextInput.
This will be fixed next, but will be included in a separate Pull Request
Overlay permissions cannot be granted on Android TV devices running Android version >= 6.0
This is because the overlay permission can only be granted by firing an Intent to open settings page (ACTION_MANAGE_OVERLAY_PERMISSION). Since this page does not exist on TV devices the permission cannot be requested. This will make the app crash when trying to open dev menu (⌘+M) or displaying a redbox error.
Note: This does not affect devices running Android version < 6.0 (for example Amazon Fire TV Stick)
This is now fixed by: [ANDROID] [ENHANCEMENT] [DevSupport] Use currentActivity to display redbox, loading view and dev menu #16596

Test Plan

Launch the RNTester app on Android TV device.
- Ensure it launches without a crash
- Ensure basic navigation is possible
- Ensure Touchable components can receive select events
Ensure the changes do not break current Android and iOS mobile devices functionality.
Ensure the changes do not break current Apple TV functionality.

RNAndroidTVDemo video

Changes

Added ReactAndroidTVViewManager that handles TV KeyEvents and dispatches events to JS - This is the core that enables basic navigation functionality on Android TV devices
Following the above change we copy TVEventHandler.ios.js into TVEventHandler.android.js to enable JS to pick up those native navigation events and dispatch them further to subscribed views. (Note: We do not have a native TVNavigationEventEmitter implementation on Android, thus this file is slightly modified, e.g. it does pass null to NativeEventEmitter constructor)
Added uiMode to AndroidInfoModule. (Note: This required changing extends BaseJavaModule to extends ReactContextBaseJavaModule to be able to use getSystemService which requires Context instance!
Added isTV constants to both Platform.ios.js (keeping the deprecated isTVOS as well) and Platform.android.js
Changed condition check on Touchable.js to use the newly added isTV flag to properly handle TV navigation events on Android as well
Added LEANBACK_LAUNCHER to RNTester intent-filter so that it is possible to launch it on Android TV devices.
See also a PR to react-native-website repo with updated docs for Android TV: Add docs for building for Android TV and unify them with Apple TV docs react-native-website#59

Future work

Fix TextInput components handling by allowing them to be focused and making a proper navigation between them (and/or other components) possible. One thing to note here that the default behavior to immediately open software keyboard when focused on TextInput field will need to be adjusted on Android TV as well)
Fix overlay permissions issue by changing the way redbox/dev menu are displayed (see: [ANDROID] [ENHANCEMENT] [DevSupport] Use currentActivity to display redbox, loading view and dev menu #16596)
Adjust placement of TV-related files (e.g. the TVEventHandler.js file is placed inside AppleTV directory which is not accurate, since it does handle Android TV events as well)

Previous discussion: software-mansion-labs#1

Release Notes

[ANDROID] [FEATURE] [TV] - Added support for Android TV devices

facebook-github-bot · 2017-10-23T11:53:58Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

facebook-github-bot · 2017-10-23T16:09:15Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

shergin · 2017-10-24T06:10:37Z

cc @dlowder-salesforce

emroot · 2017-10-24T16:43:17Z

Apple TV supports hasTvPreferredFocus, can you add support in this PR for android TV as well?

krzysztofciombor · 2017-10-30T10:41:41Z

We will try to add support for hasTvPrefferedFocus this week

kmagiera · 2017-10-30T20:00:06Z

Just linking this here: #16596

The other PR makes it possible to run apps on post 6.0 TV devices as since 6.0 it is required for the overlay permission to be set in the settings that are missing on Google's TV version of Android (the overlay settings of course, not all the settings)

kmagiera · 2017-10-30T20:01:24Z

My PR should make this no longer relevant:

@krzysztofciombor can you update your description to include info about #16596

spunkedy · 2017-11-16T08:43:08Z

Any idea on how long it will be before this gets merged in? I would love to use it.

kmagiera · 2017-11-22T15:35:10Z

Hey @spunkedy! I have reviewed this PR submitted first in our fork here software-mansion-labs#1 so I hope this will also get approved by current maintainers.

It is now blocked though on #16596 which is required for TV devices running Android 6 and above.

If you have time you can pull this PR in, test it out and report here. This kind of input will def help maintainers while considering this PR.

pull-bot · 2017-12-08T11:47:41Z

@facebook-github-bot label Android

Generated by 🚫 dangerJS

facebook-github-bot

@shergin has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

mandhon · 2017-12-21T04:16:36Z

@krzysztofciombor thanks a lot for this PR. It will help a lot. this seem to be working fine.
I faced one issue when I added one more horizontal scroll view in ScrollView sample provided in RNTester app. Right key at end of first horizontal scroll view scrolls to next row. Behavior is different on tvOS. I guess it should stop after focusing last element. Please let me know if you need any clarifications.

hidaph · 2017-12-27T19:40:35Z

Hi everyone, do we have an ETA on when this pull request will be merged and available on master?

shergin · 2018-01-05T22:41:26Z

This causes a crash during internal test running. Does it look legit?

JavascriptException: Error: `View` has no propType for native prop `RCTView.hasTVPreferredFocus` of native type `boolean`

facebook-github-bot · 2018-01-07T18:04:25Z

@krzysztofciombor I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.

pull-bot · 2018-01-08T08:08:41Z

	Messages
📖	Suggested label: Android

Generated by 🚫 dangerJS

krzysztofciombor · 2018-01-08T08:26:58Z

@shergin Yes, the issue here was that TVViewPropTypes need to always be exported on Android since, unlike iOS, there's no way to dynamically export different native props during compile time when building on Android TV. See the change: 099b841
I've also rebased this PR on top of the current master branch.

@mandhon Sorry for the delayed response. So the thing is this is actually similar to a native Android TV behavior. This differs from Apple TV behavior, but it would be difficult to unify those behaviors and still achieve native look-and-feel. We are planning on a follow-up PR which will enable more granular control over focus engine for AndroidTV, but that's out of scope for this PR. (see: https://developer.android.com/training/tv/start/navigation.html#modify-d-pad-nav for reference)

facebook-github-bot

@shergin has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

shergin

(See my comment in the code.)

shergin · 2018-02-03T00:30:57Z

ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java

@@ -201,6 +203,53 @@ public boolean onTouchEvent(MotionEvent ev) {
    return true;
  }

+  @Override


Obviously, we would love to have first party support of Android TV in RN! Krzysztof, thank you so much for your effort! ❤️
However, we discussed this approach internally at Facebook and we mostly concern about this place. Given that fact that Android TV is still pretty marginal platform, having AndroidTV-specific code in this base class looks... excessive. We are worried about performance and unpredictable/undesirable implications.
Is there a way to restructure this somehow to remove explicit mentioning of TV from the most basic and important classes?

Hey! Thanks for your time spent on reviewing this

Before we move on with making any changes, I’d like to list a two options and learn what your opinions are. But at first I’d like to emphasize two things:
a) Even though this PR is primarily for Android TV support most of the changes done here apply not only to TV devices but also to most of the phones with accessibility features turned on and to devices that are more commonly used with hardware keyboards (e.g. tablets). From the developer perspective a TV remote is treated as it was a hardware keyboard with a limited set of keys (just arrow keys, return and play/pause buttons). This is also the case for accessibility gestures that allows people with low vision to navigate through the app by swiping down/left/right/up which triggers arrow key press events. This has not yet been supported in RN apps on Android. See this for more info about what can be handled in dispatchKeyEvent: https://developer.android.com/reference/android/view/KeyEvent.html
b) Unlike with iOS on Android we have limited options when it comes to detecting TV environment. On iOS this can be done in compile time as Apple TV devices gets separate binaries, whereas on Android we can only do runtime checks. On modern Android TV devices we can perhaps rely on LEANBACK_LAUNCHER intent filter and provide a separate root activity that would be configured differently but then this won’t work on Fire Stick TV devices that are quite popular.

Here are two options that I think we should consider:

As I don’t share your concern regarding performance I understand Android TV references in Root View may look a bit off. The reason I am not concerned about perf here is that the events are only going to be generated when hardware keyboard buttons are being pressed (as mentioned this includes tv remotes, real keyboards or D-PADs attached to Android tablets or phones, and accessibility gestures). These type of events should not be more frequent than “text change” evens we already dispatch for TextInput component or hardware back button press we handle in ReactActivity class. My suggestion would be therefore to rename ReactAndroidTVRootViewHelper to something that is more generic and not referencing TV (e.g. ReactAndroidHWInputDeviceHelper or maybe ReactAndroidKeyboardNavigationHelper). Also to get rid of most of the “TV” reference from that helper class comments and method names as they really are not specific to TV devices.

Extract HW input related methods to a separate root view class that would also extend ReactRootView. It is then possible to use a custom main activity subclass that would use that other root view instead of the default one. For that step we’d need to add additional setup instructions to the docs for people who want their app to work on Android TV and other devices with hardware input capabilities.

cc @mdvacca

Hey @kmagiera thank you for your effort!
I like the option 1) renaming this with ReactAndroidHWInputDeviceHelper, my concern with this approach is this line: https://github.com/facebook/react-native/pull/16500/files#diff-c308f7d4634ee2c75c99e773916f5e53R57
This means that for every key we will search for the focusedView and that is expensive. Maybe we could execute the findFocusedView(mReactRootView) only when the keyEvent is one of the events we handle?

kmagiera · 2018-02-09T09:48:29Z

@mdvacca can you please take a look at this discussion here: #16500 (comment)

mdvacca · 2018-01-22T07:21:02Z

Libraries/Components/AppleTV/TVEventHandler.js

@@ -12,6 +12,7 @@
 'use strict';

 const React = require('React');


React is never used, lets remove it

mdvacca · 2018-01-22T07:25:36Z

Libraries/Utilities/Platform.ios.js

@@ -28,6 +28,9 @@ const Platform = {
    const constants = NativeModules.PlatformConstants;
    return constants ? constants.interfaceIdiom === 'tv' : false;
  },
+  get isTV() {


Can we add a comment to isTVOS describing that it is deprecated and it will be replaced by isTV().
Also can you move its implementation to isTV(), that way it is easier to deprecate in the future

mdvacca · 2018-01-22T07:26:46Z

ReactAndroid/src/main/java/com/facebook/react/ReactActivityDelegate.java

@@ -143,6 +151,16 @@ public boolean onKeyUp(int keyCode, KeyEvent event) {
    return false;
  }

+  public boolean onKeyLongPress(int keyCode, KeyEvent event) {
+    if (getReactNativeHost().hasInstance() && getReactNativeHost().getUseDeveloperSupport()) {
+      if (keyCode == KeyEvent.KEYCODE_MEDIA_FAST_FORWARD) {


NIT: can you unify these two IFs conditions?

mdvacca · 2018-01-22T07:29:18Z

ReactAndroid/src/main/java/com/facebook/react/ReactAndroidTVRootViewHelper.java

+    int eventKeyCode = ev.getKeyCode();
+    int eventKeyAction = ev.getAction();
+    View targetView = findFocusedView(mReactRootView);
+    if (targetView != null) {


Let early exit of the method if targetView == null || eventKeyAction != KeyEvent.ACTION_UP:

if (targetView == null || eventKeyAction != KeyEvent.ACTION_UP) { return; } ...

mdvacca · 2018-01-22T07:50:32Z

ReactAndroid/src/main/java/com/facebook/react/ReactAndroidTVRootViewHelper.java

+  public void handleKeyEvent(KeyEvent ev, RCTDeviceEventEmitter emitter) {
+    int eventKeyCode = ev.getKeyCode();
+    int eventKeyAction = ev.getAction();
+    View targetView = findFocusedView(mReactRootView);


The findFocusedView method transverses the entire viewHierarchy for every keyEvent on the ReactRootView. We need to do this only for TV

mdvacca · 2018-02-09T18:24:29Z

ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java

@@ -201,6 +203,53 @@ public boolean onTouchEvent(MotionEvent ev) {
    return true;
  }

+  @Override


Hey @kmagiera thank you for your effort!
I like the option 1) renaming this with ReactAndroidHWInputDeviceHelper, my concern with this approach is this line: https://github.com/facebook/react-native/pull/16500/files#diff-c308f7d4634ee2c75c99e773916f5e53R57
This means that for every key we will search for the focusedView and that is expensive. Maybe we could execute the findFocusedView(mReactRootView) only when the keyEvent is one of the events we handle?

This allows the app to be launched on Android TV devices as well

Contains code for handling KeyEvents related to Android TV navigation

kmagiera

Added few minor comments inline

kmagiera · 2018-02-14T13:40:37Z

ReactAndroid/src/main/java/com/facebook/react/ReactActivityDelegate.java

@@ -127,6 +127,14 @@ public void onActivityResult(int requestCode, int resultCode, Intent data) {
    }
  }

+  public boolean onKeyDown(int keyCode, KeyEvent event) {
+    if (keyCode == KeyEvent.KEYCODE_MEDIA_FAST_FORWARD) {
+      event.startTracking();


should we only do this when getReactNativeHost().getUseDeveloperSupport() is true?

Hm, this check is currently done in onKeyLongPress (https://github.com/facebook/react-native/pull/16500/files#diff-f3ee27db155d4af4368a3ff1e60a765cR156).
Do you think it should be moved to here, or do you think it's worth keeping it in both places?

add it in both, we don't need to startTracking unless we are in dev mode

kmagiera · 2018-02-14T13:48:07Z

ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java

+      super.onFocusChanged(gainFocus, direction, previouslyFocusedRect);
+      return;
+    }
+    ReactContext reactContext = mReactInstanceManager.getCurrentReactContext();


Maybe instead of doing all of this we could change visibility of ReactRootView.sendEvent to "package" and then pass ReactRootView reference to AndroidHWInputDeviceHelper so that we can call sendEvent there directly

Wouldn't that create a tight coupling between ReactRootView and AndroidHWInputDeviceHelper? What if someone would want to reuse the helper in some other place, which theoretically should be possible now since we've made it more generic?

krzysztofciombor · 2018-02-15T15:54:30Z

@mdvacca We've addressed all your code review comments.
Additionally, we've refactor the ReactAndroidHWInputDeviceHelper so that it no longer needs to traverse the view hierarchy as we can rely on the mLastFocusedViewId to send hardware events to a correct view.

mdvacca

Thank you for working on this @krzysztofciombor.
The code updates look good to me.

CC: @ayc1

hramos · 2018-03-05T17:49:17Z

Looks like there are several conflicts - I'll take a stab at addressing these after the PR imports.

facebook-github-bot

@hramos is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

hramos · 2018-03-06T17:25:23Z

Just to let you know, anything you may have added to this PR after the bot imported the diff following my comment yesterday is not going to be included when the change is synced back to GitHub.

hramos · 2018-03-06T17:33:20Z

So this PR did not land for a few reasons. There were some conflicts that needed to be addressed, which I handled manually after the PR was converted to a diff on our internal Phabricator instance. Once I did that, the diff started going through our test suite. It looks like an internal test may have prevented it from landing, but it's hard to tell now because updating the external PR after the import had already happened caused the diff to abort the land process.

I'll re-import again and address conflicts if needed. Please do not add any more commits to the PR, otherwise we might need to go through the entire cycle again.

facebook-github-bot

@hramos is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

sunnylqm · 2018-03-28T16:13:07Z

@hramos Could you please tell us what is the status of this pr now?

kmagiera · 2018-04-03T18:33:09Z

@sunnylqm this has been merged into master 28 days ago: b7bb2e5 and made it to 0.55 release that went out just today: https://github.com/facebook/react-native/releases/tag/v0.55.0

Summary:  * To be on par with Apple TV support, this makes it possible to run React Native apps on Android TV devices (See also: https://react-native.canny.io/feature-requests/p/android-tv-support) * These changes also make it possible to navigate through the app using D-PAD buttons that are present on some mobile devices * Since these changes affect, among others, `ReactRootView.java` and `Touchable.js` code and are closely related to Apple TV implementation, it makes sense for them to be included in the core - React native apps can be launched on Android TV devices and properly render their content - Navigation is possible using left, right, top, bottom arrows from the remote (or D-PAD) - Touchable components can handle D-PAD center button press events and correctly fire their `onPress` handlers - Touchable components will receive `onPressIn` and `onPressOut` events and can react to focus/blur changes appropriately (just like on Apple TV) - `Platform` constants allow to check if the react-native app is running on TV (`Platform.isTV`) - `ScrollView`s behave correctly (same as native implementation) when switching to view outside bounds – that is, the container would scroll such that the newly focused element is fully visible - Native "clicking" sounds are played when moving between focusable elements - Play/Pause click event is send to `TVEventHandler` - Rewind and FastForward events are send to `TVEventHandler` - Back button behaves as a normal Android back button - Diagonal buttons work correctly on Android TV, e.g. if there is no button directly to the right from the focused one, but there is one to the right but a bit higher/lower it will grab focus - Dev menu can be accessed by long pressing fast forward button A demo showing RNTester app running on Android TV device (Amazon Fire TV Stick) can be found here: [![RNAndroidTVDemo](http://img.youtube.com/vi/EzIQErHhY20/0.jpg)](http://www.youtube.com/watch?v=EzIQErHhY20) - `TextInput` will not work on Android TV devices. There's an issue with native `ReactEditText` implementation that prevents it from receiving focus. This makes it impossible to navigate to `TextInput`. This will be fixed next, but will be included in a separate Pull Request - ~Overlay permissions cannot be granted on Android TV devices running Android version >= 6.0 This is because the overlay permission can only be granted by firing an Intent to open settings page (`ACTION_MANAGE_OVERLAY_PERMISSION`). Since this page does not exist on TV devices the permission cannot be requested. This will make the app crash when trying to open dev menu (⌘+M) or displaying a redbox error. Note: This does not affect devices running Android version < 6.0 (for example Amazon Fire TV Stick)~ This is now fixed by: facebook/react-native#16596 * Launch the RNTester app on Android TV device. * Ensure it launches without a crash * Ensure basic navigation is possible * Ensure Touchable components can receive select events * Ensure the changes do not break current Android and iOS mobile devices functionality. * Ensure the changes do not break current Apple TV functionality. [RNAndroidTVDemo video](http://img.youtube.com/vi/EzIQErHhY20/0.jpg) * Added `ReactAndroidTVViewManager` that handles TV `KeyEvent`s and dispatches events to JS - This is the core that enables basic navigation functionality on Android TV devices * Following the above change we copy `TVEventHandler.ios.js` into `TVEventHandler.android.js` to enable JS to pick up those native navigation events and dispatch them further to subscribed views. (Note: We do not have a native `TVNavigationEventEmitter` implementation on Android, thus this file is slightly modified, e.g. it does pass `null` to `NativeEventEmitter` constructor) * Added `uiMode` to `AndroidInfoModule`. (**Note**: This required changing `extends BaseJavaModule` to `extends ReactContextBaseJavaModule` to be able to use `getSystemService` which requires `Context` instance! * Added `isTV` constants to both `Platform.ios.js` (keeping the deprecated `isTVOS` as well) and `Platform.android.js` * Changed condition check on `Touchable.js` to use the newly added `isTV` flag to properly handle TV navigation events on Android as well * Added `LEANBACK_LAUNCHER` to `RNTester` `intent-filter` so that it is possible to launch it on Android TV devices. * See also a PR to `react-native-website` repo with updated docs for Android TV: facebook/react-native-website#59 - [ ] Fix `TextInput` components handling by allowing them to be focused and making a proper navigation between them (and/or other components) possible. One thing to note here that the default behavior to immediately open software keyboard when focused on `TextInput` field will need to be adjusted on Android TV as well) - [x] Fix overlay permissions issue by changing the way redbox/dev menu are displayed (see: facebook/react-native#16596) - [ ] Adjust placement of TV-related files (e.g. the `TVEventHandler.js` file is placed inside `AppleTV` directory which is not accurate, since it does handle Android TV events as well) Previous discussion: software-mansion-labs/react-native#1  [ANDROID] [FEATURE] [TV] - Added support for Android TV devices Closes facebook/react-native#16500 Differential Revision: D6536847 Pulled By: hramos fbshipit-source-id: 17bbb11e8583b97f195ced5fd9762f8902fb8a3d

SugaraguS · 2018-08-03T01:13:52Z

What should I do if I want to fire the focus event manually on the Touchable components?

EyMaddis · 2020-05-15T15:05:00Z

@krzysztofciombor

TextInput will not work on Android TV devices. There's an issue with native ReactEditText implementation that prevents it from receiving focus. This makes it impossible to navigate to TextInput.
This will be fixed next, but will be included in a separate Pull Request

Was this ever fixed? It does not work for me and I cannot find any PR...

EDIT: It is possible to wrap inputs in Touchable elements and do onFocus={() => textInputRef.current.focus()}

msgharpu · 2021-07-06T10:36:46Z

@krzysztofciombor

TextInput will not work on Android TV devices. There's an issue with native ReactEditText implementation that prevents it from receiving focus. This makes it impossible to navigate to TextInput.
This will be fixed next, but will be included in a separate Pull Request

Was this ever fixed? It does not work for me and I cannot find any PR...

EDIT: It is possible to wrap inputs in Touchable elements and do onFocus={() => textInputRef.current.focus()}

The issue is still there. Did the touchable method work for you?

mohamedshuaau · 2024-03-23T19:38:27Z

For anyone still looking for a solution on handling the focus for TextInput, here is my implementation.

I would rather have the onPress assign the ref to focus rather than onFocus. Instead, onFocus, I am applying an animation to up the scale of the input and when pressed, it focuses and pops up the keyboard.

Code:

import {Animated, StyleSheet, TextInput, TouchableOpacity} from "react-native";
import React, {useEffect, useRef, useState} from "react";

const InputAndroid = (props) => {
    const {onChangeText, placeholder, value, style} = props;
    const textInputRef = useRef(null);

    const [loaded, setLoaded] = useState(false);
    const animatedValue = useState(new Animated.Value(1))[0];

    useEffect(() => {
        setLoaded(true);
    }, []);

    const focusIn = () => {
        Animated.spring(animatedValue, {
            useNativeDriver: true,
            toValue: 1.1
        }).start()
    };

    const focusOut = () => {
        Animated.spring(animatedValue, {
            useNativeDriver: true,
            toValue: 1,
            friction: 3,
            tension: 40
        }).start()
    };

    const animatedStyle = {
        transform: [{scale: !loaded ? 1 : animatedValue}]
    };

    return (
        <TouchableOpacity
            activeOpacity={1}
            onFocus={focusIn}
            onBlur={focusOut}
            onPress={() => textInputRef.current.focus()}
        >
            <Animated.View style={[styles.input, style, animatedStyle]}>
                <TextInput
                    onChangeText={onChangeText}
                    value={value}
                    placeholder={placeholder}
                    ref={textInputRef}
                />
            </Animated.View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    input: {
        alignSelf: "center",
        width: '80%',
        padding: 8,
        paddingLeft: 20,
        paddingRight: 20,
        borderRadius: 10,
        fontSize: 20,
        backgroundColor: '#FFF'
    },
});

export default InputAndroid;

douglowder · 2024-03-23T19:59:36Z

@mohamedshuaau you should be aware that Android TV is no longer supported in this repo -- support has moved to https://github.com/react-native-tvos/react-native-tvos/ .

krzysztofciombor requested a review from hramos as a code owner October 23, 2017 11:53

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Oct 23, 2017

krzysztofciombor force-pushed the feature/AndroidTV branch from c547763 to 8d89d89 Compare November 9, 2017 14:06

krzysztofciombor force-pushed the feature/AndroidTV branch from 8d89d89 to 0c361d8 Compare December 8, 2017 11:46

krzysztofciombor mentioned this pull request Dec 11, 2017

Add docs for building for Android TV and unify them with Apple TV docs facebook/react-native-website#59

Merged

facebook-github-bot reviewed Dec 11, 2017

View reviewed changes

krzysztofciombor force-pushed the feature/AndroidTV branch from 0c361d8 to 099b841 Compare January 8, 2018 08:07

facebook-github-bot reviewed Jan 10, 2018

View reviewed changes

shergin suggested changes Feb 3, 2018

View reviewed changes

mdvacca reviewed Feb 9, 2018

View reviewed changes

douglowder mentioned this pull request Feb 10, 2018

[React Native for X] TVOS #2618

Closed

Krzysztof Ciombor added 2 commits February 14, 2018 08:58

Add LEANBACK_LAUNCHER to RNTester AndroidManifest

0e40e4f

This allows the app to be launched on Android TV devices as well

Add ReactAndroidTVViewManager

6dc6bb5

Contains code for handling KeyEvents related to Android TV navigation

kmagiera reviewed Feb 14, 2018

View reviewed changes

douglowder mentioned this pull request Feb 15, 2018

Android TV Touchables #17966

Closed

Krzysztof Ciombor added 3 commits February 15, 2018 15:41

Add getUseDeveloperSupport check for fast forward long press

1eccd4f

Use ReactRootView sendEvent in HWInputDeviceHelper

3c4a8eb

Add "package" to sendEvent method

15bf287

mdvacca approved these changes Mar 5, 2018

View reviewed changes

facebook-github-bot added the Import Started This pull request has been imported. This does not imply the PR has been approved. label Mar 5, 2018

facebook-github-bot approved these changes Mar 5, 2018

View reviewed changes

douglowder added the Platform: tvOS tvOS applications. label Mar 5, 2018

Krzysztof Ciombor added 2 commits March 6, 2018 11:00

Merge branch 'master' into feature/AndroidTV

e79041a

Fix ReactAndroidHWInputDeviceHelper.java license

9a6be6d

facebook-github-bot approved these changes Mar 6, 2018

View reviewed changes

facebook-github-bot closed this in b7bb2e5 Mar 6, 2018

ryanvanderpol mentioned this pull request Jun 13, 2018

Android TV / tvOS scaling display inconsistency #19690

Closed

douglowder mentioned this pull request Mar 16, 2019

Remove tvOS platform from react-native repo react-native-community/discussions-and-proposals#111

Closed

fabOnReact mentioned this pull request May 25, 2020

TouchableHighlight Does Not Focus AndroidTV Inside Modal #24448

Closed

sunnylqm mentioned this pull request Aug 5, 2020

请问开发Android TV, 使用TextInput, 是否可以根据遥控器上的方向键，如上下左右来聚焦。 reactnativecn/react-native-website#225

Closed

fabOnReact mentioned this pull request Feb 26, 2021

Keyboard focus (from a physical keyboard) won't enter TextInput fields on Tab/Shift+Tab in Android #30464

Closed

		@@ -12,6 +12,7 @@
		'use strict';

		const React = require('React');

Add support for Android TV devices #16500

Add support for Android TV devices #16500

Conversation

krzysztofciombor commented Oct 23, 2017 • edited Loading

Add support for Android TV devices

Motivation

Supported Android TV features

Caveats

Test Plan

Changes

Future work

Release Notes

facebook-github-bot commented Oct 23, 2017

facebook-github-bot commented Oct 23, 2017

shergin commented Oct 24, 2017

emroot commented Oct 24, 2017

krzysztofciombor commented Oct 30, 2017

kmagiera commented Oct 30, 2017

kmagiera commented Oct 30, 2017 • edited Loading

spunkedy commented Nov 16, 2017

kmagiera commented Nov 22, 2017

pull-bot commented Dec 8, 2017

facebook-github-bot left a comment

Choose a reason for hiding this comment

mandhon commented Dec 21, 2017

hidaph commented Dec 27, 2017

shergin commented Jan 5, 2018

facebook-github-bot commented Jan 7, 2018

pull-bot commented Jan 8, 2018 • edited Loading

krzysztofciombor commented Jan 8, 2018

facebook-github-bot left a comment

Choose a reason for hiding this comment

shergin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kmagiera commented Feb 9, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kmagiera left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

krzysztofciombor commented Feb 15, 2018

mdvacca left a comment

Choose a reason for hiding this comment

hramos commented Mar 5, 2018 • edited Loading

facebook-github-bot left a comment

Choose a reason for hiding this comment

hramos commented Mar 6, 2018

hramos commented Mar 6, 2018

facebook-github-bot left a comment

Choose a reason for hiding this comment

sunnylqm commented Mar 28, 2018

kmagiera commented Apr 3, 2018

SugaraguS commented Aug 3, 2018

EyMaddis commented May 15, 2020 • edited Loading

msgharpu commented Jul 6, 2021

mohamedshuaau commented Mar 23, 2024

douglowder commented Mar 23, 2024

krzysztofciombor commented Oct 23, 2017 •

edited

Loading

kmagiera commented Oct 30, 2017 •

edited

Loading

pull-bot commented Jan 8, 2018 •

edited

Loading

hramos commented Mar 5, 2018 •

edited

Loading

EyMaddis commented May 15, 2020 •

edited

Loading