Stacked Label Input value position is not fixed on focus

When focusing a stacked label input the position of the input text moves up some pixels. See attached screenshots.

react-native, react and native-base version

  "dependencies": {
    "native-base": "2.3.10",
    "react": "^16.3.0-alpha.1",
    "react-native": "0.54.2"
  }

Expected behaviour

Text should be fixed at same position as before the focus. The original text position should be positioned aligned with the placeholder. Instead the original text position is below the placeholder with some pixels.

Actual behaviour

Unfocused input

When focusing the input the input text moves up some pixels

Steps to reproduce (code snippet or screenshot)

<Container>
    <Content style={{paddingTop: 100}}>
        <Item stackedLabel>
            <Label>{"Stacked Label"}</Label>
            <Input value={'value'} />
        </Item>
    </Content>
</Container>

Is the bug present in both ios and android or in any one of them?

The issue is strangely only present on ios and not android. fixedLabel has the same issue (and maybe other input label types as well)

[andidev]

@SupriyaKalghatgi It’s because you are not setting a value directly on the Input tag.

Try setting the value with a value from the state like this:

import React, { PureComponent } from 'react';
import { Button, Container, getTheme, Header, Icon, Input, Item, Text } from 'native-base';

class App extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            value: 'Google',
        }
    }

    render() {
        return (
            <Container>
                <Header searchBar
                        rounded>
                    <Item>
                        <Icon name="ios-search" />
                        <Input value={this.state.value} />
                    </Item>
                    <Button transparent>
                        <Text>Cancel</Text>
                    </Button>
                </Header>
            </Container>
        );
    }
}

export default App;

and then you will get the following result:

[ObidosDev]

This bug makes me crazy As said @idrakimuhamad, @andidev workaround by setting lineHeight to null help to overcome this.