NativeBase: Cannot focus Input component imperatively

Given the sample code

        <InputGroup>
            <Icon name="ios-home" />
            <Input 
              ref={() => (console.log("onref"))}
            />
        </InputGroup>

the ref callback is never called (most likely due to cloning logic in InputGroup.

Additionally my guess is that I would be unable to call native focus method as it works for normal RN TextInput

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 20 (6 by maintainers)

Commits related to this issue

Most upvoted comments

@makeitnew @egiordano and others with the same problem using Item as floatingLabel. After digging for a while the Item.js source code I ended up with this solution (I am using nativebase 2.0.12).

class Screen extends Component {
  (...)
  componentDidMount() {
    this.textInput._root.focus();
    this.textInput.props.onChangeText(this.props.inputValue);
  }
 (...)
  <Item floatingLabel>
    <Label>SomeLabel</Label>
    <Input
      getRef={(input) => { this.textInput = input; }}
      keyboardType="numeric"
      onChangeText={text => this.setState({ inputValue: text })}
      value={this.state.inputValue}
    />
  </Item>
 (...)
}

this.textInput.props.onChangeText(this.props.inputValue); is only needed if one wants to load the Input with a initial value.

why I can’t use _textInput because undefined but I change like this it work. change _textInput to _root


focusPasswordInput() {
    this._passwordInput._root.focus();
}

This working code are using this package.json:

“dependencies”: { “native-base”: “^2.0.12”, “react”: “~15.4.1”, “react-native”: “0.42.0”, “react-native-responsive-image”: “^2.0.2” },

<Form style={{marginTop:20}}>
    <Item>
	<Icon active name='ios-at-outline' />
	<Input  
	    ref='email' 
	    placeholder='your email' 
	   keyboardType='email-address' 
	   returnKeyType='next' 
	   autoCapitalize='none' 
	   onSubmitEditing={()=>{this.refs.passwordField._root.focus();}}
        />
    </Item>
    <Item last>
        <Icon active name='ios-finger-print-outline' />
	<Input 
            ref='passwordField' 
            placeholder='your password' 
            returnKeyType='go' 
            secureTextEntry 
            autoCapitalize='none'
        />
    </Item>
</Form>

In version 2.0.10 the ref property of Input is ignored if the Item has label is a floatingLabel or a stackedLabel.

Same problem here on 2.0.11

I’m in version 0.5.9 and a call to focus brings the “is not a function” error. I’m setting a simple string ref (like “password”) and calling "onSubmitEditing={() => this.refs.password.focus()}. And getting a weird “_this2.refs.password.focus is not a function” error.

#194 Please check this example

@franciscocpg - That finally worked! I have not found any reference to ‘getRef’ in the documentation and that should be fixed - this method seems to work the best.