I've been using NativeBase as React Native UI toolkit and working perfectly apart from this huge problem which i couldn't fix anyhow.
In a page which contains a NB Input (with floatingLabel in this case), i have implemented a simple button which shows up only when something is written in the text field and allows the user to clear the input by managing the component internal state and setting the "value" prop of the Input component.
<Item underlined success floatingLabel
style={{flexDirection: "row-reverse"}}>
<Label>{I18n.t("handlingUnitCode")}</Label>
<Input autoFocus={true}
blurOnSubmit={false}
autoCorrect={false}
multiline={false}
numberOfLines={1}
keyboardType="phone-pad"
value={this.state.hu}
onSubmitEditing={(evt) => {
const hu = evt.nativeEvent.text;
this._setHU(hu);
if (hu.length > 0) {
this._loadHU();
}
}}
onChangeText={(hu) => this._setHU(hu)}/>
{
this.state.isHUInserted
? <Icon name="close" onPress={() => this._setHU("")}/>
: undefined
}
</Item>
The complete component code is here: https://pastebin.com/ZVv05PNH
Once the user writes and clears the input field several times, it starts to become slow and slugghish, also while writing character by character using the keyboard. The issue mainly happens after 40-50 times the input has been written and cleared up, and progressively becomes slower and slower.
Fun fact, once the component gets destroyed and recreated (as example by navigating back and forth), the lag goes away and returns back to normal, but after repeating the same process the issue comes back.
Library versions are:
- react-native: 0.55.3
- native-base: 2.4.2
Platform Tested are:
- Android 7.0 Emulator
- Phone with Android 7.0
- Galaxy S7 with Android 7.0
Last but not least, the issue happens while in both normal run, debug run and release build (built signed APK).
Any help would be greatly appreciated!
