CODEWITHSUNDEEP
reactjsreact-nativenative-base
Zhen Liu
Zhen Liu

Reputation: 7932

Native base dynamically show success or Error input

I want to have two simple input boxes.

There is a loginName input box, and a password input box.

Currently I map the value of these two input box into a "state".

Now, using NativeBase. How do I dynamically show "success" "error" like how they did in the demo? http://nativebase.io/docs/v0.5.9/components#successInputTextbox

Upvotes: 2

Views: 8397

Answers (3)

Leo
Leo

Reputation: 538

Base don Himanshu answer. There is no need to set false, that's the default value for success and error. Additionally, you can also can also use conditions to change de icon!

<InputGroup 
  iconRight 
  success={this.state.inputSuccess} 
  error={this.state.inputError}>
  <Icon name={this.state.inputSuccess ? 'checkmark-circle' : 'close-circle'}/>
  <Input placeholder='Textbox'/>
</InputGroup>

Upvotes: 0

Gaby Garro
Gaby Garro

Reputation: 596

The Native Base documentation (version 2.12) has this example:

state = { error: 'Some error' };
// ...
<Content>
  <Item error={this.state.error !== ''}>
    <Input 
      placeholder='Textbox with Error Input'
      error={'#d50000'}
    />
    <Icon name='close-circle' />
  </Item>
</Content>

The error prop inside <Input /> is to set the error color. The invalid state is set at the item error prop.

Upvotes: 1

Himanshu
Himanshu

Reputation: 181

Passing a prop success is equivalent to passing success={true}

So if you have state variables like inputSuccess and inputError, you can do this:

<InputGroup 
  iconRight 
  success={this.state.inputSuccess ? true : false} 
  error={this.state.inputError ? true : false}>
  <Icon name='ios-checkmark-circle' style={{color:'#00C497'}}/>
  <Input placeholder='Textbox'/>
</InputGroup>

Upvotes: 8

Related Questions