Input onIconPress not working with vector-icons

[Buwaneka-Sumanasekara]

293 # Issue type

I'm submitting a ... (check one with "x")

• [ X] bug report

Issue description

Current behavior: Input icon not changing

Expected behavior: change Input password icon

Related code:

import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import {AppStyles} from '@theme';
import { Layout,Button,Text,Icon,Input } from '@ui-kitten/components';

/* Styles ==================================================================== */
const styles = StyleSheet.create({
  loginLayoutStyle:{
    flex: 1,
    flexDirection: 'column',
    paddingHorizontal:30,
    paddingVertical:10,
    justifyContent:"center"
  }

});

class LoginScreen extends Component {
  static componentName = 'LoginScreen';
  constructor(props) {
    super(props);
    this.state = {
        txtuname:"",
        txtpass:"",
        showPass:false
    };
  }

  componentDidMount = () => {

  }

  _changeText = (field,txt) => {
this.setState({[field]:txt});
  }

  render() {
    let showPass=this.state.showPass;
    const onIconPress = () => {
      this.setState({showPass:!showPass})
    };

    const renderIcon = (style) => (
          <Icon {...style} name={showPass ? 'md-eye' : 'md-eye-off'} pack="ionicon"/>
    );

    return (
      <Layout style={styles.loginLayoutStyle}>

    <Input
      label='Mobile'
      placeholder='770000000'
      value={this.state.txtuname}
      size='small'
      onChangeText={(txt)=>this._changeText("txtuname",txt)}
      keyboardType={'phone-pad'}
      {...AppStyles.InputDefaultProps}
    />
    <Input
      placeholder=''
      value={this.state.txtpassword}
      icon={renderIcon}
      size='small'
      secureTextEntry={!showPass}
      onIconPress={onIconPress}
      onChangeText={(txt)=>this._changeText("txtpass",txt)}
      //{...AppStyles.InputDefaultProps}
    />

       <Button  status='primary' icon={(style)=>(
          <Icon {...style} name='lock-open' pack="material"  />
        )}>LOGIN</Button>

      </Layout>

    );
  }

}

/* Export Component ==================================================================== */
export default LoginScreen;

Other information:

OS, device, package version

Android 

[artyorsh]

@Buwaneka-Sumanasekara I guess it's not working when using vector-icons, I can confirm it works properly with svg.

[artyorsh]

For anyone else who use react-native-vector-icons:

For any reason, it implements it's own onPress so it makes us impossible to handle it. If you follow 3rd party icon packages guide, consider updating the code with the one I provide in gist. Then you need to pass onPress to Icon component.

This is a temporary solution and we will back to it.