Nativebase: <Input multiline> doesn't work inside <Item stackedLabel>

Created on 24 May 2018 · 3Comments · Source: GeekyAnts/NativeBase

react-native, react and native-base version

  "dependencies": {
    "expo": "^27.0.1",
    "native-base": "^2.4.4",
    "react": "16.3.1",
    "react-native": "~0.55.2",
    "react-navigation": "^2.0.1"
  }

Expected behaviour

Last Input should be multiline

Actual behaviour

Last Input is one line

Steps to reproduce (code snippet or screenshot)

render() {
    return (
      <Container>
        <Header>
          <Left />
          <Body>
            <Title>Добавление просьбы</Title>
          </Body>
          <Right />
        </Header>
        <Content padder>
          <Form>
            <Item stackedLabel>
              <Label>Имя</Label>
              <Input />
            </Item>
            <Item stackedLabel>
              <Label>Телефон</Label>
              <Input />
            </Item>
            <Item stackedLabel last>
              <Label>Опишите проблему</Label>
              <Input
                multiline={true}
                numberOfLines={10}
                style={{ textAlignVertical: 'top' }}
              />
            </Item>
            <Button
              full
              primary
              iconLeft
              style={styles.mainButton}
              onPress={this.submit.bind(this)}
            >
              <Icon name="md-thumbs-down" />
              <Text>Отправить</Text>
            </Button>
          </Form>
        </Content>
      </Container>
    );
  }

Screenshot of emulator/device

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

I test it only with Expo client on Android 5.1.1, Xiaomi Redmi 3

Any other additional info which would help us debug the issue quicker.

I was trying today to make "description" field in my Form, which is in fact multi line Input. I have tried Input with style={{height:100}} and many other things. But I noticed finally, problem is in stackedLabel, because when I changed it to floatingLabel, all works fine.

bug

Source

Aparus

Most helpful comment

@Aparus can you try changing the code to

 <Item stackedLabel last style={{ minHeight: 65, height: null }}>
      <Label>Опишите проблему</Label>
      <Input
           multiline={true}
           numberOfLines={10}
           style={{ textAlignVertical: 'top' }}
        />
 </Item>

akhil-geekyants on 24 May 2018

👍2 ❤1

All 3 comments

@Aparus can you try changing the code to

 <Item stackedLabel last style={{ minHeight: 65, height: null }}>
      <Label>Опишите проблему</Label>
      <Input
           multiline={true}
           numberOfLines={10}
           style={{ textAlignVertical: 'top' }}
        />
 </Item>

akhil-geekyants on 24 May 2018

👍2 ❤1

@akhil-geekyants Thanks for answer! Yes it works in some way . But not like expected. For example, cursor is too near from label, I don't want to hardcode styles, then code looks ugly and non logic (when some of elements works without styles, but some with many of styles). I prefer to use floatingLabel.

And one more question. <Picker> doesn't work inside <Form> <Item> . But I suppose Picker is very common form element and it is intuitive to use it inside <Item> like other form inputs.

Aparus on 25 May 2018

Fixed with v2.5.2