Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ANDROID TV][RN 0.57] Add setNextFocus support #22080

Closed
wants to merge 1 commit into from

Conversation

gregaou
Copy link
Contributor

@gregaou gregaou commented Nov 2, 2018

Add properties to be able to set the nextFocus. It can be very useful with Android TV.

New android View properties :

Can be used to fix :

I did this PR for RN 0.57 but i will adapt my changes to open a PR for master soon

Test Plan:

I fixed this issue #20100 by doing this

import React, {Component} from 'react';
import {View, Text, TouchableOpacity, ScrollView, findNodeHandle} from 'react-native';

class Item extends Component {
  myRef = null;

  componentDidMount() {
    const { id } = this.props;
    if (id === 0) {
      this.myRef.setNativeProps({ nextFocusLeft:  findNodeHandle(this.myRef)})
    } else if (id === 9) {
      this.myRef.setNativeProps({ nextFocusRight:  findNodeHandle(this.myRef)})
    }
  }

  render() {
    const { id } = this.props;
    return (
      <TouchableOpacity
        key={id}
        ref={(c) => this.myRef = c}
      >
        <View
          style={{
            backgroundColor: 'grey',
            width: 200,
            height: 200,
          }}
        >
          <Text style={{fontSize: 60}}>{id}</Text>
        </View>
      </TouchableOpacity>
    )
  }

}

export default class App extends Component {
  render() {
    const data = [];
    for (let i = 0; i < 10; i++)
      data.push(i);

    return (
      <View>
        {[1, 2].map(() => (
          <ScrollView horizontal style={{height: 210}}>
            {data.map(i => <Item id={i} />)}
          </ScrollView>
        ))}
      </View>
    );
  }
}

Release Notes:

[ANDROID] [FEATURE] [View] - Add properties to set next Focus

@facebook-github-bot 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 Nov 2, 2018
@gregaou
Copy link
Contributor Author

gregaou commented Nov 2, 2018

PR for master opened #22082

@cpojer
Copy link
Contributor

cpojer commented Feb 4, 2019

Thanks for this PR but we are unlikely to merge this against a previous stable release.

@cpojer cpojer closed this Feb 4, 2019
facebook-github-bot pushed a commit that referenced this pull request Feb 21, 2019
Summary:
Add properties to be able to set the nextFocus. It can be very useful with Android TV.

New android View properties :

* nextFocusDown binded to [setNextFocusDownId](https://developer.android.com/reference/android/view/View.html#setNextFocusDownId(int))
* nextFocusForward binded to [setNextFocusForwardId](https://developer.android.com/reference/android/view/View.html#setNextFocusForwardId(int))
* nextFocusLeft binded to [setNextFocusLeftId](https://developer.android.com/reference/android/view/View.html#setNextFocusLeftId(int))
* nextFocusRight binded to [setNextFocusRightId](https://developer.android.com/reference/android/view/View.html#setNextFocusRightId(int))
* nextFocusUp binded to [setNextFocusUpId](https://developer.android.com/reference/android/view/View.html#setNextFocusUpId(int))

Can be used to fix :

* Fixes #20593
* Fixes #20100

Same PR as #22080 but accorded to changes on master
Pull Request resolved: #22082

Differential Revision: D14162740

Pulled By: cpojer

fbshipit-source-id: 9a13a185d4e8307ce67014fb076c62d135c487c3
mbardauskas pushed a commit to mbardauskas/react-native that referenced this pull request Feb 21, 2019
Summary:
Add properties to be able to set the nextFocus. It can be very useful with Android TV.

New android View properties :

* nextFocusDown binded to [setNextFocusDownId](https://developer.android.com/reference/android/view/View.html#setNextFocusDownId(int))
* nextFocusForward binded to [setNextFocusForwardId](https://developer.android.com/reference/android/view/View.html#setNextFocusForwardId(int))
* nextFocusLeft binded to [setNextFocusLeftId](https://developer.android.com/reference/android/view/View.html#setNextFocusLeftId(int))
* nextFocusRight binded to [setNextFocusRightId](https://developer.android.com/reference/android/view/View.html#setNextFocusRightId(int))
* nextFocusUp binded to [setNextFocusUpId](https://developer.android.com/reference/android/view/View.html#setNextFocusUpId(int))

Can be used to fix :

* Fixes facebook#20593
* Fixes facebook#20100

Same PR as facebook#22080 but accorded to changes on master
Pull Request resolved: facebook#22082

Differential Revision: D14162740

Pulled By: cpojer

fbshipit-source-id: 9a13a185d4e8307ce67014fb076c62d135c487c3
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Platform: Android Android applications.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants