8 thoughts on “Cannot focus Input component imperatively

  1. 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.

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

    
    focusPasswordInput() {
        this._passwordInput._root.focus();
    }
    
    
  3. In version 2.0.10 the ref property of Input is ignored if the Item has label is a floatingLabel or a stackedLabel.

  4. 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>
    
  5. @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.

Comments are closed.