Form

NativeBase makes use of List to design Forms that include group of related input components. Include any combination of NativeBase components to make up your form.

Syntax

import React, { Component } from 'react';
import { Container, Content, List, ListItem, InputGroup, Input, Icon } from 'native-base';

export default class FormExample extends Component {
  render() {
    return (
      <Container>
        <Content>
          <List>
            <ListItem>
              <InputGroup>
                <Icon name='ios-person' />
                <Input placeholder='EMAIL' />
              </InputGroup>
            </ListItem>

            <ListItem>
              <InputGroup>
                <Icon name='ios-unlocked' />
                <Input placeholder='PASSWORD' secureTextEntry={true}/>
              </InputGroup>
            </ListItem>

            <ListItem>
              <InputGroup >
                <Input inlineLabel label='NAME' placeholder='John Doe' />
              </InputGroup>
            </ListItem>

            <ListItem>
              <InputGroup >
                <Input stackedLabel label='Address Line 1' placeholder='Address' />
              </InputGroup>
            </ListItem>
          </List>
        </Content>
      </Container>
    );
  }
}

Configuration