Nativebase: Version 2.13.x error with floatingLabel

[minhdang-idev]

Hi!

Issue Description

When using input with floatingLabel attribute + error validation, I suddenly got problem after I upgrade to version 2.13.x.

Expo 33 (or 34), Native Base 2.13.x

Expected behaviour

As example on native base doc https://docs.nativebase.io/Components.html#error-textbox-headref

Actual behaviour

Click on the input to type text, after typing, blur out of the input, app not responding.

Steps to reproduce

Check my snack right here https://snack.expo.io/@yanghuyming/a7a874
Don't wait for snack to render the code. It cannot render :) There is an error with the code that I just copied from Native base doc. That's why I open this.

Is the bug present in both iOS and Android or in any one of them?

Android (iOS not tested)

Note:

Roll back to native base version 2.12, it works normally.

Thanks.

[sankhadeeproy007]

@minhdang-idev Can you please share a screenshot of the error you're getting?

[tosbaha]

It is the same issue as #2786 Here is the minimum code for a crash

      <Content padder>
        <Form>
    <Item floatingLabel>
          <Icon name='mail' style={{ color: 'gray' }} />
      <Label>Email</Label>
      <Input />
    </Item>
    <Item floatingLabel last>
         <Icon name='mail' style={{ color: 'gray' }} />
      <Label>Password</Label>
      <Input />
    </Item>
</Form>
      </Content>

[sankhadeeproy007]

Hi @tosbaha, can you try cleaning your cache and checking again?

[minhdang-idev]

@minhdang-idev Can you please share a screenshot of the error you're getting?

It's just not responding then 5 sec later the app crashes. I tried to run expo r -c many times but i does not work. One more thing I need to inform is: if you roll back to version 2.12.0 then it works normally.

[tosbaha]

@sankhadeeproy007 Yes I tried multiple times. It is crashing. Please try the minimal code I posted and see the crash yourself. Last working version for me is 2.12.1

[Sivli-Embir]

See: #2692
Possibly related. I can't confirm the crash but I am getting a related issue on both android and iOS. The focus seems to stick to the first field. It will not release to the next field, hard to explain. On iOS you can force the cursor to move but the state does not update. On android the keyboard refocus on the first one. Also broke with an update to latest.

<Item floatingLabel error={error} success={success}>
        <Label>{i18n.t('user')}</Label>
        <Input
          keyboardType='email-address'
          textContentType="emailAddress"
          onChangeText={this.setValue}
          value={value}
          autoCapitalize='none'
        />
        {icon}
      </Item>
...
<Item floatingLabel error={error} success={success}>
        <Label>{i18n.t('password')}</Label>
        <Input
          secureTextEntry
          textContentType="password"
          onChangeText={this.setValue}
          value={value}
          autoCapitalize='none'
        />
        {icon}
      </Item>

(If unrelated I will move this to a new issue)

[minhdang-idev]

So... the crash was caused by the code in native-base:

for (let i = 0; i < this.props.children.length; i + 1) {

I don't know what to say :) Btw thank you for the fix.