React Native TextField component in external library on focus

68
February 12, 2019, at 05:00 AM

I have a Register Component that has PhoneInput Component from the external library https://github.com/thegamenicorus/react-native-phone-input The problem is I want to execute some code as soon as TextField inside the PhoneInput is Focused.

While checking the documentation of the library. I saw a property called the textComponent. Can that be used for onFocus of the text field present in PhoneInput Component

import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import PhoneInput from 'react-native-phone-input'
export default class Register extends React.Component {
    constructor(props){
        super(props);
        this.state = {"phone": ""};
        this.countriesList =  [
            {
                "name": "India (भारत)",
                "iso2": "in",
                "dialCode": "91",
                "priority": 0,
                "areaCodes": null
            }];
        this.phoneTextField=null;
    }
    componentDidMount() {
        console.log('GrandChild did mount.');
        // console.log(this.phoneTextField);
    }
    render() {
        console.log(this.phoneTextField);
        console.log("Register Screen");
        return (
            <View style={{borderColor:'red', borderWidth:0, height:'100%' }}>
                <View style={{borderColor:'green', borderWidth:0, height:'20%' }}>
                    <View style={{borderColor:'blue', borderWidth:0, resizeMode:'contain', width:'50%', height:'100%'}}>
                        <Image
                            style={{width: '100%', height: '100%' }}
                            source={ require("../assets/logo.png") }
                        />
                    </View>
                </View>
                <View style={{borderColor:'green', borderWidth:0, height:'40%', marginLeft:'1%', marginTop:'5%' }}>
                    <View style={{borderColor:'blue', borderWidth:0, resizeMode:'contain', width:'100%', height:'100%'}}>
                        <Image
                            style={{width: '100%', height: '100%' }}
                            source={ require("../assets/welcomescreen.jpg") }
                        />
                    </View>
                </View>
                <View style={{ margin : '7%'}}>
                    <Text style={{ fontSize:20, fontWeight:'bold' }}>Save your time</Text>
                    <Text style={{ fontSize:14, color:'grey', paddingTop:'5%' }}>Please Enter your mobile number to proceed</Text>
                    <PhoneInput ref={ref => {
                            this.phoneTextField = ref;
                    }}
                                style={{paddingTop:'10%'}}
                                countriesList={this.countriesList}
                                initialCountry='in'
                                onChangePhoneNumber={(phone)=>{
                                    console.log(phone);
                                }}
                    />
                </View>
            </View>

        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

My App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Register from "./screens/Register";
export default class App extends React.Component {
  render() {
    console.log("hello bros");
    return (
      <Register/>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
Answer 1

I'm not familiar with that library, however, textComponent accepts a function so you should be able to do this

textComponent={
  ()=>{
  return(<TextInput 
  ....some props here 
  onFocus={()=>console.log('focused')})
  }}
READ ALSO
Installing Flutter on Mac OS

Installing Flutter on Mac OS

on running flutter doctor i get the below dependency lacking :

64
Fingerprint after inactivity

Fingerprint after inactivity

I am implementing fingerprint support to protect sensitive areas of my app and access to some web APIs (using a signature)I am initializing the key generator like this:

46
Gradle Task from Plugin Doesn&#39;t Run on &ldquo;Build&rdquo;, But Does Run on &ldquo;Clean&rdquo;

Gradle Task from Plugin Doesn't Run on “Build”, But Does Run on “Clean”

We have an Android project which requires a certain Gradle Plugin Task to run before we build the APK(The plugin is written by us)

61
Android Things UDP Socket over IPv6

Android Things UDP Socket over IPv6

There is pretty much no error logs but it can't actually send anything over mesh network on udpSeems to receive without any issues but on send it doesn't go

52