NativeBase: 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 skarmavbild 2018-03-26 kl 22 40 29

When focusing the input the input text moves up some pixels skarmavbild 2018-03-26 kl 22 40 13

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)

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 26 (9 by maintainers)

Commits related to this issue

Changed searchbar input lineHeight in theme to null. Fix for issue-comment https://github.com/GeekyAnts/NativeBase/issues/1731#issuecomment-376349102 — committed to GeekyAnts/NativeBase by akhil-ga 6 years ago
Fix for issue #1731 (Stacked Label Input value position is not fixed on focus) Fix based on issue-comment https://github.com/GeekyAnts/NativeBase/issues/1731#issuecomment-376320681 — committed to GeekyAnts/NativeBase by akhil-ga 6 years ago
Removed lineHeight dependency of Input. Fix for issue comment https://github.com/GeekyAnts/NativeBase/issues/1731#issuecomment-384064474 based on issuecomment https://github.com/GeekyAnts/NativeBase/i... — committed to GeekyAnts/NativeBase by akhil-ga 6 years ago

Most upvoted comments

@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: skarmavbild 2018-03-27 kl 23 32 21

andidev on Mar 27, 2018

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

ObidosDev on Apr 25, 2018

I can second this. It only happened if we assign the value props to the input and the text only “jump” down whenever user starts typing which then updating the value props. @andidev workaround by setting lineHeight to null help to overcome this.

Dependencies:

"native-base": "2.3.10",
"react": "^16.3.0-alpha.1",
"react-native": "0.54.4"

idrakimuhamad on Apr 3, 2018

A workaround is to set the the style of the input to {lineHeight: null, top: 7}, e.g.


        <Item stackedLabel>
            <Label>{"Stacked Label"}</Label>
            <Input value={'value'} style={{lineHeight: null, top: 7}} />
        </Item>

andidev on Mar 26, 2018