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] Add setNextFocus support #22082

Closed
wants to merge 3 commits into from
Closed

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 :

Same PR as #22080 but accorded to changes on master

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
@pull-bot
Copy link

pull-bot commented Nov 8, 2018

Messages
📖 📋 Missing Summary - Can you add a Summary? To do so, add a "## Summary" section to your PR description. This is a good place to explain the motivation for making this change.
📖 📋 Missing Test Plan - Can you add a Test Plan? To do so, add a "## Test Plan" section to your PR description. A Test Plan lets us know how these changes were tested.
📖

📋 Changelog Format - Did you include a Changelog? A changelog entry has the following format: [CATEGORY] [TYPE] - Message.

Generated by 🚫 dangerJS against 94088db

@YanmaY
Copy link

YanmaY commented Dec 4, 2018

AWESOME!!!太棒了,希望能早点用上,等不及了6666666666

@cpojer
Copy link
Contributor

cpojer commented Feb 4, 2019

@gregaou do you mind rebasing your PR so we can merge it? Thank you!

@YanmaY
Copy link

YanmaY commented Feb 21, 2019

@gregaou do you mind rebasing your PR so they can merge it? Thank you!

@facebook-github-bot facebook-github-bot added the Import Started This pull request has been imported. This does not imply the PR has been approved. label Feb 21, 2019
Copy link
Contributor

@facebook-github-bot facebook-github-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@react-native-bot
Copy link
Collaborator

Grégoire Rit merged commit c416b40 into facebook:master.

@facebook facebook locked as resolved and limited conversation to collaborators Feb 21, 2019
@react-native-bot react-native-bot added the Merged This PR has been merged. label Feb 21, 2019
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
@hramos hramos removed Import Started This pull request has been imported. This does not imply the PR has been approved. labels Feb 23, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged. Platform: Android Android applications.
Projects
None yet
8 participants