Input#getRef receives a undefined reference if Icon is used in a floatingLabel Item)

[benjaminbillet]

Related issues: #591 #1514
React native 0.55.1, React 16.0.0-alpha.3, NativeBase 2.4.2

Hi,

I have an issue with Input, Item#floatingLabel and Input#getRef.

<Form>
  <Item floatingLabel>
    <Label>MyLabel</Label>
    <Input getRef={e => console.log(e)} />
    <Icon name="person" />
  </Item>
</Form>

With this simple code, getRef is triggered but e is undefined. Interestingly, if I remove the Icon component, it works fine.

I dug a little bit in the code of Item.js, and I think the problem is caused by the following code:

if (this.props.floatingLabel && icon.length) {
...
  newChildren.push(
     <Input // here, the ref attribute is not defined
          key="l2"
          {...inputProps}
...
} else if (this.props.floatingLabel) {
...
  newChildren.push(
     <Input
          ref={c => (this._inputRef = c)} // here, the ref attribute is defined
          value={this.state.text}
          key="l2"
          {...inputProps}
...
}

I added the missing ref={c => (this._inputRef = c)} in the first block and it solved the problem.

[ZeroCool00]

@akhil-geekyants is it fixed at ? cause it happen with me today? do i have to update to 0.55.3 ?

[ZeroCool00]

@akhil-geekyants How do i make it work? i also update item.js file.. but no effect?

i m getting this error:

[akhil-ga]

@ZeroCool00 can you post your code

[ZeroCool00]

@akhil-geekyants

<Form style={styles.inputContainer}>
            <Item
                floatingLabel
                success={this.state.inputEmailSuccess}
                error={this.state.inputEmailError}
                style={{ flexDirection: 'row-reverse' }}
            >

              <Label>Email</Label>
              <Input
                returnKeyType='next'
                onSubmitEditing={() => { this.password._root.focus(); }}
                onChangeText={(value) => this.setState({ email: value })}
                blurOnSubmit={false}
              />
              <Icon name={this.state.iconName} /> // If i remove, error gone
            </Item>

            <Item
              floatingLabel
              success={this.state.inputPasswordSuccess}
              error={this.state.inputPasswordError}
              style={{ flexDirection: 'row-reverse' }}
            >
              <Label>Password</Label>

              <Input
                getRef={(input) => { this.password = input; }}
                onChangeText={(value) => this.setState({ password: value })}
                secureTextEntry
              />
              <Icon name={this.state.iconName} />  // If i remove, error gone
            </Item>
          </Form>

here i also added this line in item.js

[akhil-ga]

@ZeroCool00 checked this. Fix is working. Attaching a gif

If you are making changes directly in the node_modules/native-base (not recommended), change

"main": "dist/src/index.js",

to

"main": "src/index.js",

in the main node_modules/native-base/package.json

Gif

[ZeroCool00]

@akhil-geekyants Its working now.. Thank you for all your support.. I love native-base

[ZeroCool00]

@akhil-geekyants Today i check node-module, every changes i made is all gone.. and all issue is still remain. floating label cut and getRef in keyboard..

How to solve this. do i need to wait until you update version? or there is a way?

[SupriyaKalghatgi]

@ZeroCool00 You will get the update tomorrow

[ZeroCool00]

@SupriyaKalghatgi ok Thanks

[SupriyaKalghatgi]

Fixed with 2.4.3