Nativebase: Input err icon not aligned to the right

[Eylen]

I am writing a custom Component for the inputs in my application and I am trying to implement some kind of error feedback on them.
The first problem comes when adding the icon, that's not beign aligned to the right, it always appears to the left inside the input.

react-native, react and native-base version

"react": "16.0.0-alpha.12",
"react-native": "^0.47.0"
"native-base": "^2.3.1"

Expected behaviour

The icon should appear to the right

Actual behaviour

The icon appears in the left

Steps to reproduce (code snippet or screenshot)

import React from "react";
import PropTypes from "prop-types";

import { Item, Label, Input, Text, Icon } from "native-base";

export default class FloatingInput extends React.Component {
    render(){
        return (
            <Item stackedLabel error={this.props.error?true:false}>
                <Label>{this.props.label}</Label>
                <Input 
                    secureTextEntry={this.props.obscure?true:false}
                    value={this.props.value}
                    onChangeText={this.props.onChangeText}
                    onBlur={this.props.validate}/>
                <Icon name='close-circle' />
                <Text>{this.props.error}</Text>
            </Item>
        );
    }

    static propTypes = {
        value: PropTypes.any.isRequired,
        label: PropTypes.string.isRequired,
        error: PropTypes.string,
        obscure: PropTypes.bool,
        onChangeText: PropTypes.func,
        validate: PropTypes.func
    };
}

Screenshot of emulator/device

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

I have just tested this in Android

[walterjar]

I meet the same problem. Property stackedLabel and error, can not be used in Item together.

import React, { Component } from 'react';

import { Container, Header, Content, Item, Input, Icon, Label } from 'native-base';

export default class IconTextboxExample extends Component {

    render() {

        return (

            <Container>

                <Header />

                <Content>

                    <Item stackedLabel error>

                        <Label>Username</Label>

                        <Input />

                        <Icon name='close-circle' />

                    </Item>

            </Content>

        </Container>

        );

    }

}

[CalebRoyer]

+1

[renolmachado]

+1

[matiruiz]

+1

[SupriyaKalghatgi]

Closing this issue due to inactivity
Please reopen this if the issue continues

[ceefour]

@SupriyaKalghatgi in order to trigger the bug, you need to use Item stackedLabel (emphasis mine) and also put a Label inside the Item stackedLabel.

I also got hit with this bug just today.

I tried putting alignSelf=flex-end on the Icon, still doesn't work.

[SupriyaKalghatgi]

1102

[LasithaPrabodha]

Icon doesn't work inside StackeLabel. -_- I'm using v2.5.1

[benzman81]

Same here. It does not work to display an error icon using StackeLabel.

[marcelo-schroeder]

@SupriyaKalghatgi This is not a duplicate of #1102 - as the others said, this error is specific to using Item with stackedLabel. This is still happening. Can this please reopened?

[vjkrishna21]

I still have this issue in v2.8.1. Can someone please help?

[b33son]

still buggy

[qlerebours]

Still buggy ...
Can someone re-open this issue ?

[tofoli]

Still buggy in [email protected]

[Susmitha-Bogala]

still bug in native-base

[AmeerHamzaRiaz]

Also facing this issue, is there any workaround ? tried putting style={{ flexDirection: 'row-reverse' }} in Item but it made thing worse.

[diegolaciar]

Still buggy in [email protected] !

[MohiniGupta04]

Still a bug in native-base 2.13.8..
Can someone please reopen this issue?

[lizzieshipwreck]

FOR THE LOVE OF GOD SOMEONE REOPEN THIS ISSUE. I've been using Native Base for one day and so far have run into so many little bugs surrounding forms/inputs that it is quickly becoming unusable.

[afrojuju1]

this is still an issue @SupriyaKalghatgi . Please reopen

[afrojuju1]

I was able to achieve the same effect with the following nesting. Hope this helps others while the issue gets fixed.

<Item stackedLabel>
  <Label label={label} />
  <Row>
    <Input value={value} />
    <Button transparent>
      <Icon name='trash' />
    </Button>
  </Row>
</Item>

[roballsopp]

Still a problem in 2.13.12

[Trouble106]

Guys, wrap it in a view then you can solve this

                      <Item success={false} stackedLabel>
                      <Label ></Label>
                      <View
                        style={[
                          inputStyle,
                          { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }
                        ]}
                      >
                        <Input />
                        <Icon name="checkmark-circle" />
                      </View>
                    </Item>