Nativebase: onChangeText not working on Input

[DimiMikadze]

"react-native": "0.41.1"
"native-base": "^2.0.1"

React Native TextInput has method onChangeText, example:
<TextInput onChangeText={(text) => {this.setState({text}); }} value={this.state.text} />
From docs Native base Input is React Native's TextInput implementation, but when adding onChangeText to Input it's not working, example:
<Input onChangeText={(text) => {this.setState({text}); }} value={this.state.text} />
I'm testing it on IOS simulator on Mac OSX El Capitan.

[sankhadeeproy007]

Seems to work fine. Please attach a sample of your use case.

[neonxp]

Have same issue.

Not work:

<Item floatingLabel>
    <Input placeholder="Token" onChangeText={console.log} value={this.state.token} />
</Item>

Work:

<Item>
    <Input placeholder="Token" onChangeText={console.log} value={this.state.token} />
</Item>

Difference in floatingLabel attribute. I don't know why.

[sankhadeeproy007]

cc @shivrajkumar

[DimiMikadze]

@sankhadeeproy007 I was testing also with floatingLabel and scenario was exactly same as your uploaded gif, except it was not logging anything.

[sankhadeeproy007]

Yes, it'll be fixed with the next update.

[peter1a]

Find one bug also, refs to other component doesn't work:
Here is my code:

<Form style={ Styles.login_form }> <Item> <Label>Uporabniško ime</Label> <Input autoCapitalize="none" onChangeText={ (text) => this.setState({ UserName: text }) } onSubmitEditing={ (event) => { this.refs.Password.focus(); }} /> </Item> <Item> <Label>Geslo</Label> <Input secureTextEntry={ true } autoCapitalize="none" onChangeText={ (text) => this.setState({ Password: text }) } ref={'Password'} onSubmitEditing={ (event) => { this.onPressButton(); }} /> </Item> <Button style={ Styles.login_button } onPress={ () => this.onPressButton() } light block><Text>Prijava</Text></Button> </Form>

Here is error which i get after press submit button in UserName field:
undefined is not a function (evaluating '_this3.refs.Password.focus()')

[sankhadeeproy007]

Replace this.refs.Password.focus(); by this.refs._root.Password.focus();

[peter1a]

Still same error

[sankhadeeproy007]

Is that the case for floating label? Can you try with regular label and check?

[peter1a]

Console.log gives my undefined for this.refs._root.

I am using without floating label just normal input
<Item> <Label>Uporabniško ime</Label> <Input autoCapitalize="none" onChangeText={ (text) => this.setState({ UserName: text }) } onSubmitEditing={ (event) => { this.refs._root.Password.focus(); }} /> </Item>

[shivrajkumar]

@peter1a Upgade "native-base" to latest version i.e, "2.0.5".
That should solve your issue

[peter1a]

@shivrajkumar Already have: [email protected], [email protected], [email protected]

[sankhadeeproy007]

Fixed with v2.0.6

[peter1a]

There is still problem with Refs, works perfect when using TextInput.

[jonathanroze]

Yes i have the same issue :/ !

[sanketsahu]

@sankhadeeproy007 Reopened because 2 people say that it is not fixed. Let's check this.

[sankhadeeproy007]

It's actually a different issue. The one with refs.

[shivrajkumar]

@peter1a this.refs.Password._root.focus() should work

[peter1a]

Works, tnx!

[EdwardNelson]

Still not working with floatinglabel on 2.2.0

[PineLover]

can i get the name of tool on the video?, developer's tool .....

[SupriyaKalghatgi]

@EdwardNelson Finding same issue yet?

[SupriyaKalghatgi]

@PineLover Thats licecap

[akhil-geekyants]

onChangeText is working fine with floating label.

[karthickeyang]

hi,
i am new to react native, when using onChangeText with i can able to type, but text not showing in input box.

<View> <Header searchBar rounded> <Item> <Icon name="ios-search" /> <Input onChangeText= { term => this.setState({ term })} value={this.state.term} /> <Icon name="ios-people" /> </Item> <Left><Button onPress={() => console.log(this.state.term)} > <Text>Search</Text> </Button></Left> </Header> </View>