Nativebase: Input Floating Label not floating on production

[udarts]

I am using floating labels on inputs to show what they must contain.

On development, it works perfectly, but when I create the app on production, the floating label is not floating.

Node: 8.10.0
npm: 6.1.0
react-native: 0.56
react: 16.4.1
native-base: 2.7.1

Expected behaviour:

Actual behaviour:

onFirstNameChange(text) {
    this.props.firstNameChanged(text);
}
onLastNameChange(text) {
    this.props.lastNameChanged(text)
}
render() {
    return (
        <View style={{flex:1}}>
            <Form style={{flex:1}}>
                <Item floatingLabel style={{marginBottom: 10}}> 
                    <Label>{I18n.t('account first_name')}</Label>
                    <Input 
                        style={{color: "#000"}}
                        underlineColorAndroid='transparent'
                        placeholderTextColor="grey"
                        autoCapitalize='words'
                        value={this.props.firstName ? this.props.firstName : this.state.firstName}
                        onChangeText={this.onFirstNameChange.bind(this)}
                    />
                </Item>
                <Item floatingLabel style={{marginBottom: 10}}> 
                    <Label>{I18n.t('account last_name')}</Label>
                    <Input 
                        style={{color: "#000"}}
                        underlineColorAndroid='transparent'
                        placeholderTextColor="grey"
                        autoCapitalize='words'
                        value={this.props.lastName ? this.props.lastName : this.state.lastName}
                        onChangeText={this.onLastNameChange.bind(this)}
                    />
                </Item>
            </Form>
        </View>
    }
}

On componentDidMount I am loading the data to the state, the props are used when changing the values.

Happens on both iOS and Android.

[Valdomar]

Same problem here, I tried to find a workaround but nothing :(

[udarts]

I ended up using the stackedlabel. Not the way I wanted, but at least I can proceed.

[SupriyaKalghatgi]

I did react-native init and tried the above code snippet
Tested in debug and release mode for Android, worked as expected in both these modes
I cannot reproduce this

[SupriyaKalghatgi]

Closing this today in case of no response

[arrygoo]

@SupriyaKalghatgi I'm reproducing the issue above both on Android and iOS. It only happens in production.

[ShmatkoAndrey]

Something similar in 2.8.0 on release app version, but hiding and not updating state.
Dev version is ok

[tatsna]

+1 hiding and not updating state.

[AgataJot]

+1

[SupriyaKalghatgi]

https://github.com/GeekyAnts/NativeBase/issues/2264

[arfa123]

this issue is still happening in release build. works fine in debug.
"react-native": "^0.57.4", "native-base": "^2.8.1",

[Yevpak]

+1

[ghost]

@SupriyaKalghatgi
I am able to solve the problem by doing a small change in the Item.js code. The fix is just change the code
https://github.com/GeekyAnts/NativeBase/blob/bc9e296be598979e374dccabd5fb26690f61a787/src/basic/Item.js#L101

to

if(this.inputProps.value){
    this.floatUp(-16);
}
else{
    this.floatBack();
}

And if the label gets trimmed if the value in the input field is present, to get rid of this, do a hack like, update the state of the fields with same values inside componentDidMount() after 250ms. Which shall change the label position and look shall be as expected.

[SupriyaKalghatgi]

@ClenetTech This was fixed and working fine