TV Focus: Phone number field not focused when clicking right button from DPad

[Pavi-t2s]

Description:

We are developing app for TV. While using our dependency we're able to navigate to flag element using TV remote DPad. But we unable to navigate to TextInput from Flag when pressing right button in TV DPad.

Dependency version:

react-native-phone-input": "1.3.7",

Expected: Our dependency should we work on TV also.

How to reproduce:

1. Press down button from DPad ===> Flag will be focused now
2. Now press right button ===> TextInput field wont be focus

Demo Video:

https://github.com/rili-live/react-native-phone-input/assets/77044504/7f72747d-3c6b-44d7-8bd1-46a29a27faa2

Sample Code:

import React, { Component } from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";

import PhoneInput from "react-native-phone-input";

class Test extends Component {
    constructor() {
      super();

      this.state = {
        valid: "",
        type: "",
        value: ""
      };

      this.updateInfo = this.updateInfo.bind(this);
      this.renderInfo = this.renderInfo.bind(this);
    }

    updateInfo() {
      this.setState({
        valid: this.phone.isValidNumber(),
        type: this.phone.getNumberType(),
        value: this.phone.getValue()
      });
    }

    renderInfo() {
      if (this.state.value) {
        return (
          <View style={styles.info}>
            <Text style={{ fontWeight: "bold" , color:'black'}}>
              Is Valid:{" "}
              <Text style={{ fontWeight: "bold" , color:'black'}}>
                {this.state.valid.toString()}
              </Text>
            </Text>
            <Text style={{ fontWeight: "bold" , color:'black'}}>
              Value:{" "}
              <Text style={{ fontWeight: "bold", color:'black' }}>{this.state.value}</Text>
            </Text>
          </View>
        );
      }
    }

    render() {
      return (
        <View style={styles.container}>
          <PhoneInput
            ref={ref => {
              this.phone = ref;
            }}
            style={styles.phoneInputViewStyle}
            initialCountry={'gb'}
            onChangePhoneNumber={(value, iso2) => {

                this.setState({value})
            }}
            onPressFlag = {()=>{alert("Flag clicked")}}
            flagStyle={styles.flagStyle}
            textStyle={styles.phoneNumberTextStyle}
          />

          {/* <TouchableOpacity onPress={this.updateInfo} style={styles.button}>
            <Text style={styles.textStyle}>Get Info</Text>
          </TouchableOpacity> */}

          {this.renderInfo()}
        </View>
      );
    }
  }

let styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    padding: 20,
    paddingTop: 60
  },
  info: {
    // width: 200,
    borderRadius: 5,
    backgroundColor: "#f0f0f0",
    padding: 10,
    marginTop: 20
  },
  button: {
    marginTop: 20,
    padding: 10
  },
  textStyle:{
    color:'black'
  },
  flagStyle: {
    width: 35,
    height: 25,
    borderWidth: 0,
  },
  phoneNumberTextStyle: {
    fontSize: 16,
    color: 'black',
    borderBottomWidth:1,
    // paddingBottom:10,
    // marginBottom:10
  },
  phoneInputViewStyle: {
    width: '90%',
    paddingVertical: 5,
    marginTop: 0,
    paddingBottom:10

  },
});

export default Test;

Device Info:

System: OS: macOS 13.3.1 CPU: (8) arm64 Apple M1 Memory: 109.33 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm Watchman: 2023.07.03.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.12.1 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 Android SDK: Not Found IDEs: Android Studio: 2022.2 AI-222.4459.24.2221.10121639 Xcode: 14.2/14C18 - /usr/bin/xcodebuild Languages: Java: 11.0.19 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: Not Found react-native-macos: Not Found react-native-tvos: 0.71.11-0 npmGlobalPackages: react-native: 0.71.11

[rililive]

Please make a PR and I can help merge and publish.