Components

NativeBase is made from effective building blocks referred to as components. The Components are constructed in pure React Native platform along with some JavaScript functionality with rich set of customisable properties. These components allow you to quickly build the perfect interface.

NativeBase includes components such as anatomy of your app screens, header, textbox, buttons, badge, icon, inputgroup, form, checkbox, radio-button, list, card, thumbnail, progress bar, spinner, layout, search bar etc.

Anatomy

Automatically animates views to their new positions.
A common way to use NativeBase screen structure is to have all the components within <Container>.

Contents:
Header
Content

General Syntax

import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon } from 'native-base';

export default class AnatomyExample extends Component {
    render() {
        return (
            <Container> 
                <Header>
                    <Title>Header</Title>
                </Header>

                <Content>
                    // Your main content goes here
                </Content>

                <Footer>
                    <FooterTab>
                        <Button transparent>
                            <Icon name='ios-call' />
                        </Button>  
                    </FooterTab>
                </Footer>
            </Container>
        );
    }
}

NativeBase provides its own frame component, named after <Container>.
All the components should be included within the Container.
Container takes mainly three components: <Header>, <Content> and <Footer>.
Container comes with its predefined stylesheet, with an added advantage of accepting user-defined styles.
Usage of Container's Header component is very similar to your HTML <head>. So is with Footer.
The Content component of Container is nothing but the body section of your screen.

Configuration

Property	Default	Option	Description
<Header>	-	-	Renders as Header (navbar) of your screen. Input values: Button, Title (Text). ^{read more}
<Content>	-	-	Represents the main content of your screen. There can be only one `<Content>` component in a screen.
<Footer>	-	-	Renders as Footer of your screen. Input values: FooterTab

Header

NativeBase component that renders as Header (navbar) for your screen.
There can be a single Header component into your Container.
To have Header for your screen, include <Header> component within <Container>.
NativeBase gives you flexibility to define your Header component anywhere in the bounds of Container.
Header takes input as: Button and Title (Text)
The components those are defined within <Header> will be rendered in the same order that you define them.
Header provides you with stylesheet.
User can add custom styles while defining <Header> within their app.
Replacing Component: React Native <View>

Syntax

import React, { Component } from 'react';
import { Container, Header, Title, Button, Icon } from 'native-base';

export default class HeaderExample extends Component {
    render() {
        return (
            <Container>
                <Header>
                    <Button transparent>
                        <Icon name='ios-arrow-back' />
                    </Button>
                    
                    <Title>Header</Title>
                    
                    <Button transparent>
                        <Icon name='ios-menu' />
                    </Button>
                </Header>
            </Container>
        );
    }
}

Configuration

Property	Default	Option	Description
backgroundColor	iOS: #F8F8F8 Android: #039BE5	user-defined	Background color for header
height	-	user-defined	Height for header

Content

This is a NativeBase component which renders as body element of your screen.
Each screen can have only one <Content> component and can be defined anywhere within the Container.
Content takes in the whole collection of React Native and NativeBase components.
Content provides you with stylesheet.
User can add custom styles while defining <Content> within their app.
Replacing Component: React Native <ScrollView>

Syntax

import React, { Component } from 'react';
import { Container, Content } from 'native-base';

export default class ContentExample extends Component {
    render() {
        return (
            <Container> 
                <Content>
                    // Your main content goes here
                </Content>
            </Container>
        );
    }
}

Badge

All of us must have seen notification badges somewhere, such as on smart phones or facebook. NativeBase is here to include this into your collection of readymade components. Badges are numerical indicators of how many items are associated with an element. Badges can notify you that there are new or unread messages or notifications. These can be very effective in alerting the user to new things on your app.

Syntax

import React, { Component } from 'react';
import { Container, Content, Badge } from 'native-base';

export default class BadgeExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Badge>2</Badge>
                    <Badge primary>2</Badge>
                    <Badge success>2</Badge>
                    <Badge info>2</Badge>
                    <Badge warning>2</Badge>
                    <Badge danger>2</Badge>
                    <Badge style={{width: 30, backgroundColor: 'black'}} 
                            textStyle={{color: 'white', fontSize: 20, lineHeight: 20}}>
                        2
                    </Badge>
                </Content>
            </Container>
        );
    }
}

NativeBase spectrum of colors are compatible with Badge.
Replacing Component: React Native <View>

Configuration

Property	Default	Option	Description
backgroundColor	red	user-defined	Background color for badge.
width	-	user-defined	Width of badge.
color	-	user-defined	Text color for badge.
fontSize	-	user-defined	Text font size of badge.
lineHeight	-	user-defined	Padding on top of Text

Button

Button is a pure NativeBase component.
Buttons are the integral part of an application. They are used for various purposes like, submit or reset a form, navigate, performing interactive actions such as showing or hiding something in an app on click of the button, etc.

Contents:
Button Theme
Block Button
Rounded Button
Icon Button
Outline Button
Transparent Button
Button Size
Disabled Button
Capitalize Button Text

Syntax

import React, { Component } from 'react';
import { Container, Content, Button } from 'native-base';

export default class ButtonExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    // NativeBase default style
                    <Button> Click Me! </Button>
                </Content>
            </Container>
        );
    }
}

NativeBase provides Button component which is readily not available in React Native.
Supports React Native app on both iOS and Android devices.
Button component takes input such as: Text, Icon, ^{read more} Text with Icon.
NativeBase gives you privilege to customize the props of this component.
Example: To have custom style for button, include them in style prop of button.
Intakes user-defined styles.
NativeBase has provided its users with enormous list of props that can be used with Button.
Replacing Component: React Native <TouchableOpacity>

Configuration

Property	Default	Option	Description
style	-	-	Defines button style
textStyle	-	-	Defines button text style
block	-	-	Block level button
rounded	-	-	Renders button with slightly round shaped edges.
bordered	-	-	Applies outline button style.
transparent	-	-	Gives you effect of Icon-buttons. To have button with transparent background, include this prop.
small	-	-	For small size button
large	-	-	For large size button
iconLeft	-	-	Used for Icon alignment. Aligns icon to the left in button. By default, icons are aligned to the left in button.
iconRight	-	-	Used for Icon alignment. Aligns icon to the right in button.
disabled	true	true false	Disables click option for button
capitalize	true	true false	Displays Button text in uppercase. (only Android)

Button Theme

NativeBase provides buttons with wide range of colors, size and variuos other props.
NativeBase provides following color themes:

Primary (default)
Success
Info
Warning
Danger

Syntax

import React, { Component } from 'react';
import { Container, Content, Button } from 'native-base';

export default class ButtonThemeExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Button primary> Primary </Button>
                    <Button success> Success </Button>
                    <Button info> Info </Button>
                    <Button warning> Warning </Button>
                    <Button danger> Danger </Button>
                </Content>
            </Container>
        );
    }
}

Block Button

A block level button spans the entire width of the parent element. Create block level buttons by adding block prop with the Button.

Syntax

import React, { Component } from 'react';
import { Container, Content, Button } from 'native-base';

export default class BlockButtonExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Button block> Primary </Button>
                    <Button block success> Success </Button>
                    <Button block info> Info </Button>
                    <Button block warning> Warning </Button>
                    <Button block danger> Danger </Button>
                </Content>
            </Container>
        );
    }
}

Rounded Button

Include rounded prop with Button to easily style your buttons.

Syntax

import React, { Component } from 'react';
import { Container, Content, Button } from 'native-base';

export default class RoundedButtonExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Button rounded> Primary </Button>
                    <Button rounded success> Success </Button>
                    <Button rounded info> Info </Button>
                    <Button rounded warning> Warning </Button>
                    <Button rounded danger> Danger </Button>
                </Content>
            </Container>
        );
    }
}

Icon Button

The Icon Buttons, can take text and/or icon as child elements inside the Button. read more
This goes as simple as this: include your choice of icon using Icon component within the Button component.

Syntax

import React, { Component } from 'react';
import { Container, Content, Button, Icon } from 'native-base';

export default class IconButtonExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Button primary>
                        <Icon name='ios-home' />
                        Home
                    </Button>

                    <Button success iconRight>
                        Next
                        <Icon name='ios-arrow-forward' />
                    </Button>

                    <Button info>
                        Previous
                        <Icon name='ios-arrow-back' />
                    </Button>
                
                    <Button warning>
                        <Icon name='ios-star' />
                    </Button>

                    <Button danger>
                        <Icon name='ios-close-circle' />
                    </Button>

                    <Button style={{backgroundColor: '#384850'}} >
                        <Icon name='ios-search' style={{color: '#00c497'}}/>
                    </Button>
                </Content>
            </Container>
        );
    }
}

Outline Button

Include bordered prop with Button to apply outline button style.

Syntax

import React, { Component } from 'react';
import { Container, Content, Button } from 'native-base';

export default class OutlineButtonExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Button bordered> Primary </Button>
                    <Button bordered success> Success </Button>
                    <Button bordered info> Info </Button>
                    <Button bordered warning> Warning </Button>
                    <Button bordered danger> Danger </Button>
                </Content>
            </Container>
        );
    }
}

Transparent Button

Include transparent prop with Button. This will render button without border and background color.

Syntax

import React, { Component } from 'react';
import { Container, Content, Button } from 'native-base';

export default class TransparentButtonExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Button transparent> Primary </Button>
                    <Button transparent>
                        <Icon name='ios-home' style={{fontSize: 20, color: '#00c497'}} />
                    </Button>
                </Content>
            </Container>
        );
    }
}

Button Size

Want to have buttons of fancy size?
Include the following props with your Button.

small: for small size button.
large: for large size button.

Syntax

import React, { Component } from 'react';
import { Container, Content, Button } from 'native-base';

export default class ButtonSizeExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    //Small size button
                    <Button small primary> Primary </Button>

                    //Regular size button
                    <Button success> Success </Button>

                    //Large size button
                    <Button large info> Info </Button>
                </Content>
            </Container>
        );
    }
}

Disabled Button

A disabled button is unusable and un-clickable.
The disabled prop of NativeBase Button is of type boolean. When present, it specifies that the button should be disabled. The disabled prop can be set to keep a user from clicking on the button until some other condition has been met (like selecting a checkbox, etc.). Then, a conditional code could remove the disabled value, and make the button usable.

Syntax

import React, { Component } from 'react';
import { Container, Content, Button } from 'native-base';

export default class DisabledButtonExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Button disabled> Disabled </Button>
                </Content>
            </Container>
        );
    }
}

Capitalize Button Text

To have Button text rendered with uppercase, include capitalize prop.
Note: This prop is applicable only for Android.

Syntax

import React, { Component } from 'react';
import { Container, Content, Button } from 'native-base';

export default class CapitalizeButtonTextExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    // NativeBase default style
                    <Button> Click Me! </Button>

                    // Using capitalize prop
                    <Button capitalize> Click Me! </Button>
                </Content>
            </Container>
        );
    }
}

Card

Card is a pure NativeBase component.
Card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
NativeBase Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create the card you need.

Contents:
Card Header and Footer
Card List
Card Image
Card Showcase
Card OnClick
Dynamic Card

Genertal Syntax

import React, { Component } from 'react';
import { Container, Content, Card, CardItem, Text } from 'native-base';

export default class CardExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Card>
                        <CardItem>                        
                            <Text>
                                //Your text here
                            </Text>
                        </CardItem>
                    </Card>
                </Content>
            </Container>
        );
    }
}

Card: This component adds a box-shadow by default. Also provides default spacing and alignment between cards.
CardItem: This is the child component of Card. Works very similar to the list items of list. Card takes any number of CardItem.
CardItem component takes input such as: Text, Button, Image, Thumbnail, Icon. ^{read more}
Replacing Component for Card: React Native <View>
Replacing Component for CardItem: React Native <View>

Configuration

Property	Default	Option	Description
header	-	-	Displays both as header and footer for cards.
note	-	-	Sub caption for Card header.
cardBody	-	-	Defines section for body of card. The child components are rendered with proper spacing and alignment.
button	-	-	To navigate on click of a card item.

Card Header and Footer

To add an optional header and/or footer within a card, include header prop with the CardItem.

Card Header: Include header prop with first instance of CardItem within Card.
Card Footer: Include header prop with last instance of CardItem within Card.

Syntax

import React, { Component } from 'react';
import { Container, Content, Card, CardItem, Text } from 'native-base';

export default class CardHeaderFooterExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Card>
                        <CardItem header>                        
                            <Text>Card Header</Text>
                        </CardItem>

                        <CardItem>                        
                            <Text>
                                //Your text here
                            </Text>
                        </CardItem>

                        <CardItem header>                        
                            <Text>Card Footer</Text>
                        </CardItem>
                   </Card>
                </Content>
            </Container>
        );
    }
}

Card List

Include CardItem subsequently within Card to create a card with lists.

Syntax

import React, { Component } from 'react';
import { Container, Content, Card, CardItem, Text, Icon } from 'native-base';

export default class CardListExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Card>
                        <CardItem>              
                            <Icon name='logo-google' />                
                            <Text>Google</Text>
                        </CardItem>
                   </Card>
                </Content>
            </Container>
        );
    }
}

Card Image

Want to have something more with Card Lists?
Include image with CardItem within Card along with some text before and after image to create a card with lists.
Here is your Card Image ready !

Syntax

import React, { Component, Image } from 'react';
import { Container, Content, Card, CardItem, Thumbnail, Text, Icon } from 'native-base';

export default class CardImageExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Card>
                        <CardItem>
                            <Thumbnail source={require('./img/guitar.jpeg')} />
                            <Text>Instrumental Songs</Text>
                            <Text note>Guitar</Text>
                        </CardItem>

                        <CardItem>                        
                            <Image style={{ resizeMode: 'cover' }} source={require('./img/music.png')} /> 
                        </CardItem>

                        <CardItem>
                            <Icon name='ios-musical-notes' style={{color : '#ED4A6A'}} />
                            <Text>Listen now</Text>                        
                        </CardItem>
                   </Card>
                </Content>
            </Container>
        );
    }
}

Card Showcase

Card Showcase is further customization of Card Image. It uses several different items.

Begins with the Card List component, which is similar to out List Avatar.
cardBody prop for images and text.

Syntax

import React, { Component, Image } from 'react';
import { Container, Content, Card, CardItem, Thumbnail, Text, Button } from 'native-base';

export default class CardShowcaseExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Card>
                        <CardItem >                       
                            <Thumbnail source={require('./img/nativeBase-logo.png')} />
                            <Text>NativeBase</Text>
                            <Text note>April 15, 2016</Text>
                        </CardItem>

                        <CardItem cardBody> 
                            <Image style={{ resizeMode: 'cover' }} source={require('./img/wallpaper.png')} /> 
                            <Text>
                                //Your text here
                            </Text>
                            <Button transparent textStyle={{color: '#87838B'}}>
                                389 Stars
                            </Button>
                        </CardItem>
                   </Card>
                </Content>
            </Container>
        );
    }
}

Card OnClick

To navigate between screens on click of a card, include button prop with the <CardItem> component.

Syntax

import React, { Component } from 'react';
import { Container, Content, Card, CardItem, Text, Thumbnail } from 'native-base';

export default class CardOnClickExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Card>
                        <CardItem button onPress={function_call()}>
                            <Thumbnail source={require('./img/NSP.png')} />
                            <Text>Native Starter Pro</Text>
                        </CardItem>
                   </Card>
                </Content>
            </Container>
        );
    }
}

Dynamic Card

A center aspect designed for efficient representation of vertically scrolling lists of changing data. This can be achieved on the same lines as that of dataArray concept of List.
Create a Card dataArray, populate it with an easy array of data chunks, and instantiate a CardItem component with that chunk of data and a renderRow callback which takes a chunk from the whole data array and returns a renderable component.

Syntax

import React, { Component } from 'react';
import { Container, Content, Card, CardItem, Text, Thumbnail } from 'native-base';

let themes = [
    {
        name: 'Native Starter Pro',
        image: require('./img/NSP.png')
    },
    . . .
];

export default class DynamicCardExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Card dataArray={themes}
                          renderRow={(theme) =>
                            <CardItem>
                                <Thumbnail source={theme.image} />
                                <Text>{theme.name}</Text>
                            </CardItem>
                        }>
                    </Card>
                </Content>
            </Container>
        );
    }
}

Check Box

Check Box allows the user to select a number of items from a set of choices.
Replacing Component: React Native <View>

Syntax

import React, { Component } from 'react';
import { Container, Content, List, ListItem, Text, CheckBox } from 'native-base';

export default class CheckBoxExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <List>
                        <ListItem>
                            <CheckBox checked={true} />
                            <Text>Daily Stand Up</Text>
                        </ListItem>
                        <ListItem>
                            <CheckBox checked={false} />
                            <Text>Discussion with Client</Text>
                        </ListItem>
                    </List>
                </Content>
            </Container>
        );
    }
}

Configuration

Property	Default	Option	Description
checked	false	true false	Represents the state value of an item from set of choices.

Deck Swiper

Looking at data one piece at a time is more efficient when you consider people you might want to date, restaurants, streaming music, or local events you might want to check out.
NativeBase Deck Swiper helps you evaluate one option at a time, instead of selecting from a set of options.
Replacing Component: React Native <View>

Syntax

import React, { Component } from 'react';
import { Image } from 'react-native';
import { Container, Icon, View, DeckSwiper, Card, CardItem, Thumbnail, Text } from 'native-base';

const cards = [
    {
        name: 'One',
        image: require('./img/swiper-1.png'),
    },
    .  .  .
];

export default class DeckSwiperExample extends Component {

    render() {
        return (
            <Container>
                <View>
                    <DeckSwiper
                        dataSource={cards}
                        renderItem={item =>
                            <Card style={{ elevation: 3 }}>
                                <CardItem>
                                    <Thumbnail source={item.image} />
                                    <Text>Instrumental Songs</Text>
                                    <Text note>Guitar</Text>
                                </CardItem>
                                <CardItem>
                                    <Image style={{ resizeMode: 'cover', width: null }} source={item.image} />
                                </CardItem>
                                <CardItem>
                                    <Icon name="ios-heart" style={{ color: '#ED4A6A' }} />
                                    <Text>{item.name}</Text>
                                </CardItem>
                            </Card>
                        }
                    />
                </View>
            </Container>
        );
    }
}

Footer Tabs

Tabs are a horizontal region of buttons or links that allow for a consistent navigation experience between screens. It can contain any combination of text and icons, and is a popular method for enabling mobile navigation.
Replacing Component: React Native <View>

Syntax

import React, { Component } from 'react';
import { Container, Content, Footer, FooterTab, Button, Icon } from 'native-base';

export default class FooterTabsExample extends Component {
    render() {
        return (
            <Container>
                <Content />

                <Footer >
                    <FooterTab>
                        <Button>
                            Apps
                            <Icon name='ios-apps-outline' />
                        </Button>
                        <Button>
                            Camera
                            <Icon name='ios-camera-outline' />
                        </Button>
                        <Button active>
                            Navigate
                            <Icon name='ios-compass' />
                        </Button>
                        <Button>
                            Contact
                            <Icon name='ios-contact-outline' />
                        </Button>
                    </FooterTab>
                </Footer>
            </Container>
        );
    }
}

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-unlock' />
                                <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

Property	Default	Option	Description
inlineLabel	-	-	Label placed to the left of the input element. When the user enters text, the label does not hide. This can also be used along with placeholder.
stackedLabel	-	-	Places the label on top of the input element which appears like a stack. This can also be used along with placeholder.

Icon

Choose from 700+ Icons . . .
Perfect, crisp, high definition icons and pixel ideal fonts powered by NativeBase to preserve matters very high first-rate. You will continually have pixel perfect icons on your initiatives.
Features of React Native Vector Icons:

Can use your own custom icon sets. Supports SVG via Fontello or regular icon fonts.
Can use native TabBarIOS.
Can use icons inline with Text components as emojis or to create buttons.
Can use the icon as an image if a native component requires it (such as NavigatorIOS).

Syntax

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

export default class IconExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Icon name='ios-home' />
                    <Icon name='ios-menu' style={{fontSize: 20, color: 'red'}}/>
                </Content>
            </Container>
        );
    }
}

Icon takes two attributes: name, style.
In case if you want to include icon with custom color, size etc then that should go into style.
All the icons in the icon libraries of NativeBase, are scalable vector icons that can be customized size, color, etc.
Replacing Component: React Native Vector Icons <Icon>

Configuration

Property	Default	Option	Description read more
name	-	-	Name of the icon.
color	black	user-defined	Renders icon with defined color. Note: Include this prop within `style`
fontSize	27	user-defined	Renders icon with defined icon-size. Note: Include this prop within `style`

InputGroup

This is a NativeBase component built on top of React Native's <TextInput>.
A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. Provides a number of attributes that follows styling and interaction guidelines for each platform, so that they are intuitive for users to interact with.

Contents:
Regular Textbox
Underlined Textbox
Rounded Textbox
Icon Textbox
Success Input Textbox
Error Input Textbox
Disabled Textbox

General Syntax

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

export default class InputGroupExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <InputGroup>
                        <Input />
                    </InputGroup>
                </Content>
            </Container>
        );
    }
}

NativeBase extends React Native's <TextInput/> by adding several attributes and props to <Input />.
NativeBase defines textbox for you, by just defining <Input /> in your app.
Supports custom styles on both iOS and Android devices.
InputGroup component renders elements such as: Text, Input, Icon. ^{read more}
The props of <TextInput> are smoothly applicable to <Input>.
InputGroup also takes in props value.
Replacing Component for InputGroup: React Native <View>
Replacing Component for Input: React Native <TextInput>

Configuration

Property	Default	Option	Description
placeholder	-	-	The string that will be rendered before text input has been entered. Optional user-defined placeholder for textbox.
borderType	underline	regular underline rounded	Wraps the textbox with predefined border options.
secureTextEntry	false	true false	If true, the text input obscures the text entered so that sensitive text like passwords stay secure. This prop can be passed to `<Input>`.
iconRight	true	true false	If true, the icon in the input text box appears to the right.
success	-	-	The border color of textbox for valid input.
error	-	-	The border color of textbox for invalid input.
disabled	-	-	Disables inputting data.

Regular Textbox

To use the regular textbox which is rectangular in shape, include the borderType property and assign it with value as regular.

Syntax

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

export default class RegularTextboxExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    // Simple rectangular text input box
                    <InputGroup borderType='regular' >
                        <Input placeholder='Type your text here'/>
                    </InputGroup>
                </Content>
            </Container>
        );
    }
}

Underlined Textbox

To use the underlined textbox, include the borderType property and assign it with value as underline.

Syntax

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

export default class UnderlinedTextboxExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    // Underlined text input box with placeholder text and an icon
                    <InputGroup borderType='underline' >
                        <Icon name='ios-home' style={{color:'#384850'}}/>
                        <Input placeholder='Type your text here' />
                    </InputGroup>
                </Content>
            </Container>
        );
    }
}

Rounded Textbox

To have a textbox with round type border, include the borderType property and assign it with value as rounded.

Syntax

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

export default class RoundedTextboxExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    // Rounded text input box with icon
                    <InputGroup borderType='rounded' >
                        <Icon name='ios-home' style={{color:'#384850'}}/>
                        <Input placeholder='Type your text here'/>
                    </InputGroup>
                </Content>
            </Container>
        );
    }
}

Icon Textbox

Icons can be easily added to the NativeBase Textbox. To do so, include an icon within the <InputGroup>.
By default the icon will be aligned to the left in the textbox.
However, you can also render icon to the right. To display icon at the end of textbox, include iconRight prop with the <InputGroup>.

Syntax

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

export default class IconTextboxExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    // Text input box with icon aligned by default to the left
                    <InputGroup>
                        <Icon name='ios-home' style={{color:'#00C497'}}/>
                        <Input placeholder='Icon Textbox'/>
                    </InputGroup>

                    // Text input box with icon aligned to the right
                    <InputGroup iconRight>
                        <Icon name='ios-swap' style={{color:'#00C497'}}/>
                        <Input placeholder='Icon Alignment in Textbox'/>
                    </InputGroup>
                </Content>
            </Container>
        );
    }
}

Success Input Textbox

To display textbox with valid data, include the success prop with <InputGroup>.

Syntax

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

export default class SuccessInputTextboxExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <InputGroup iconRight success>
                        <Icon name='ios-checkmark-circle' style={{color:'#00C497'}}/>
                        <Input placeholder='Textbox with Success Input'/>
                    </InputGroup>
                </Content>
            </Container>
        );
    }
}

Error Input Textbox

To display textbox with invalid data, include the error prop with <InputGroup>.

Syntax

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

export default class ErrorInputTextboxExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <InputGroup iconRight error>
                        <Icon name='ios-close-circle' style={{color:'red'}}/>
                        <Input placeholder='Textbox with Error Input'/>
                    </InputGroup>
                </Content>
            </Container>
        );
    }
}

Disabled Textbox

To restrict inputting data into textbox, include the disabled prop with <InputGroup>.

Syntax

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

export default class DisabledTextboxExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <InputGroup iconRight disabled>
                        <Icon name='ios-information-circle' style={{color: '#384850'}}/>
                        <Input placeholder='Disabled Textbox'/>
                    </InputGroup>
                </Content>
            </Container>
        );
    }
}

Layout

The layout system is an essential concept that needs to be mastered in order to create great layouts and UIs. React Native uses Flexbox to create the layouts, which is great when we need to accommodate our components and views in different screen sizes or even different devices. Flexbox is awesome but it could be tiresome for newbies.

Not being very good at Flexbox?
Here comes the Easy Grid of NativeBase, a wrapper of Flexbox.

The layout system in NativeBase is very powerful and flexible. No more worries about props of Flexbox such as alignItems, flexDirection, justifyContent, margin, padding, position, width etc. You can create any layout with all the available options that we have. In order to build custom layouts and components, understanding how layout works in NativeBase is not as hard as Flexbox. Flexbox makes it look like percentages, however what actually is happening is just ratios. On the easier part, ratios are easier to represent than percentage/decimals. For this reason, the Easy Grid takes in ratios in place of percentage.
Performance wise, Easy Grid is noteworthy and works as fine as Flexbox, not much of calculation.

Syntax

import React, { Component } from 'react';
import { Container, Content } from 'native-base';
import { Col, Row, Grid } from 'react-native-easy-grid';

export default class LayoutExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Grid>
                        <Col style={{ backgroundColor: '#D954D7', height: 200 }}></Col>
                        <Col style={{ backgroundColor: '#D93735', height: 200  }}></Col>
                    </Grid>
                </Content>
            </Container>
        );
    }
}

NOTE: <Content> component uses <ScrollView>. This is required by <Col> and <Row> elements of Easy-Grid to have a defined height.

Replacing Component for Grid: React Native <View>
Replacing Component for Col: React Native <View>
Replacing Component for Row: React Native <View>

List

This component is completely built by NativeBase.
A base component for specifying lists of information. List must contain one or more list elements. Props provide configurability for several features. Provides a number of attributes that follows styling and interaction guidelines for each platform, so that they are intuitive for users to interact with.

Contents:
List Divider
List Icon
List Avatar
List Thumbnail
Dynamic List
List OnClick

Syntax

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

export default class ListExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <List>
                        <ListItem >
                            <Text>Simon Mignolet</Text>
                        </ListItem>
                        <ListItem>
                            <Text>Nathaniel Clyne</Text>
                        </ListItem>
                        <ListItem>
                            <Text>Dejan Lovren</Text>
                        </ListItem>
                    </List>
                </Content>
            </Container>
        );
    }
}

List: This component defines a section to include your list items.
ListItem:
- This is the child component of List.
- Defines a list item.
- Adds border at bottom of each ListItem.
- List takes any number of ListItem.
ListItem component takes input such as: Text, Badge, Thumbnail, Icon. ^{read more}
Replacing Component for List: React Native <View>
Replacing Component for ListItem: React Native <View>

Configuration

Property	Default	Option	Description
itemDivider	-	-	Helps to organize and group the list items.
note	-	-	Sub caption for List Item.
iconLeft	true	true false	Aligns icon to the left of ListeItem.
iconRight	true	true false	Aligns icon to the right of ListeItem.
dataArray	Array	user-defined array	Array of data chunks to render iteratively.
renderRow	Function	-	Callback which takes a chunk of data from `dataArray` and returns as a component.
button	-	-	To navigate on click of a list item.

List Divider

The List Divider component creates a list separator, which can be used for grouping list items. To create a divider for any child element of the list, include itemDivider prop with ListItem component. The List Divider of NativeBase comes with default style which is easily customisable.

Syntax

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

export default class ListDividerExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <List>
                        <ListItem itemDivider>
                            <Text>Goalkeeper</Text>
                        </ListItem>                    
                        <ListItem >
                            <Text>Simon Mignolet</Text>
                        </ListItem>
                        <ListItem itemDivider>
                            <Text>Defenders</Text>
                        </ListItem>  
                        <ListItem>
                            <Text>Nathaniel Clyne</Text>
                        </ListItem>
                        <ListItem>
                            <Text>Dejan Lovren</Text>
                        </ListItem>
                    </List>
                </Content>
            </Container>
        );
    }
}

List Icon

Lists can have icons assigned either to the left and/or right side of each list item. Along with icons, list item can also have badges assigned. To have note kind of text for list item, include note prop with Text component of ListItem.

Syntax

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

export default class ListIconExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <List>
                        <ListItem iconLeft>
                            <Icon name='ios-chatboxes' />
                            <Text>Simon Mignolet</Text>
                        </ListItem>
                        <ListItem iconLeft>
                            <Icon name='ios-alarm' />
                            <Text>Nathaniel Clyne</Text>
                            <Badge>2</Badge>
                        </ListItem>
                        <ListItem iconLeft>
                            <Icon name='ios-notifications' />
                            <Text>Dejan Lovren</Text>
                            <Text note>Note here</Text>
                        </ListItem>
                        <ListItem iconLeft iconRight>
                            <Icon name='ios-mic' />
                            <Text>Mama Sakho</Text>
                            <Icon name='ios-mic-outline' />
                        </ListItem>
                    </List>
                </Content>
            </Container>
        );
    }
}

List Avatar

List Avatars are medium to showcase an image with your list item whose dimension lays between icon and dimension. To create a avatar list, nest <Thumbnail> component within <ListItem> component.

Syntax

import React, { Component } from 'react-native';
import { Container, Content, List, ListItem, Thumbnail, Text } from 'native-base';

export default class ListAvatarExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <List>
                        <ListItem>
                            <Thumbnail source={require('./img/hyundai-logo.png')} />
                            <Text>Hyundai</Text>
                            <Text note>1967</Text>
                        </ListItem>
                        <ListItem>
                            <Thumbnail source={require('./img/fiat-logo.jpg')} />
                            <Text>Fiat</Text>
                            <Text note>2007</Text>
                        </ListItem>
                    </List>
                </Content>
            </Container>
        );
    }
}

List Thumbnail

List Thumbnails are medium to exhibit an image with your list item. To create a thumbnail list, nest <Thumbnail> component within <ListItem> component with few props and style.

Syntax

import React, { Component } from 'react-native';
import { Container, Content, List, ListItem, Thumbnail, Text } from 'native-base';

export default class ListThumbnailExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <List>
                        <ListItem>
                            <Thumbnail square size={80} source={require('./img/hyundai-logo.png')} />
                            <Text>Hyundai</Text>
                            <Text note>1967</Text>
                        </ListItem>
                        <ListItem>
                            <Thumbnail square size={80} source={require('./img/infiniti-logo.jpg')} />
                            <Text>Infiniti</Text>
                            <Text note>1989</Text>
                        </ListItem>
                    </List>
                </Content>
            </Container>
        );
    }
}

Dynamic List

A center aspect designed for efficient representation of vertically scrolling lists of changing data. The simplest way is to create a List dataArray, populate it with an easy array of data chunks, and instantiate a ListItem component with that chunk of data and a renderRow callback which takes a chunk from the whole data array and returns a renderable component.

Syntax

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

export default class DynamicListExample extends Component {
    render() {
        
        var items = ['Simon Mignolet','Nathaniel Clyne','Dejan Lovren','Mama Sakho','Emre Can'];

        return (
            <Container>
                <Content>
                    <List dataArray={items}
                        renderRow={(item) =>
                            <ListItem>
                                <Text>{item}</Text>
                            </ListItem>
                        }>
                    </List>
                </Content>
            </Container>
        );
    }
}

For more advanced implementation of rendering list dynamically, take a look at nativebase-tutorial.

List OnClick

To navigate between screens on click of a list item, include button prop with the <ListItem> component.

Syntax

import React, { Component } from 'react';
import { Container, Content, List, ListItem, Text, Thumbnail } from 'native-base';

export default class ListOnClickExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <List>
                        <ListItem button onPress={function_call()}>
                            <Thumbnail source={require('./img/NSP.png')} />
                            <Text>Native Starter Pro</Text>
                        </ListItem>
                   </List>
                </Content>
            </Container>
        );
    }
}

Picker

Renders the native picker component on iOS and Android.
Replacing Component: React Native <Picker>

Syntax

import React, { Component } from 'react';
import { Container, Content, Picker } from 'native-base';

const Item = Picker.Item;
export default class PickerExample extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedItem: undefined,
            selected1: 'key1',
            results: {
                items: []
            }
        }
    }
    onValueChange (value: string) {
        this.setState({
            selected1 : value
        });
    }

    render() {
        return (
            <Container>
                <Content>
                    <Picker
                        iosHeader="Select one"
                        mode="dropdown"
                        selectedValue={this.state.selected1}
                        onValueChange={this.onValueChange.bind(this)}>
                        <Item label="Cats" value="key0" />
                        <Item label="Dogs" value="key1" />
                        <Item label="Birds" value="key2" />
                        <Item label="Elephants" value="key3" />
                   </Picker>
                </Content>
            </Container>
        );
    }
}

Radio Button

Radio buttons let the user select any one from a set of options.
Replacing Component: React Native <View>

Syntax

import React, { Component } from 'react';
import { Container, Content, List, ListItem, Text, Radio } from 'native-base';

export default class RadioButtonExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <List>
                        <ListItem>
                            <Radio selected={false} />
                            <Text>Daily Stand Up</Text>
                        </ListItem>
                        <ListItem>
                            <Radio selected={true} />
                            <Text>Discussion with Client</Text>
                        </ListItem>
                    </List>
                </Content>
            </Container>
        );
    }
}

Configuration

Property	Default	Option	Description
selected	false	true false	Represents the state value of an item from set of choices.

Search Bar

It’s kind of common on the Internet where – if we fail to get what we are looking for on a website, we resort to searching. Search box has always been an essential part of any application. We provide you with the one, which filters the list based on your search input.

Syntax

import React, { Component } from 'react';
import { Container, Header, InputGroup, Input, Icon, Button } from 'native-base';

export default class SearchBarExample extends Component {
    render() {
        return (
            <Container>
                <Header searchBar rounded>
                    <InputGroup>
                        <Icon name='ios-search' />
                        <Input placeholder='Search' />
                        <Icon name='ios-people' />
                    </InputGroup>
                    <Button transparent>
                        Search
                    </Button>
                </Header>
            </Container>
        );
    }
}

searchBar: Prop to be used with <Header> component to have Search bar onto the Header section of your screen.
Replacing Component: React Native <View>

Configuration

Property	Default	Option	Description
rounded	regular	-	Wraps the search bar with predefined border options.

Spinner

If you have certain screens of your app that take some time to load, you may want to consider a page loader. A page loader is any kind of animation that visually communicates to a visitor that the page is loading and to just sit tight for a few seconds. Without a page loader, user might think that the app is being unresponsive and just click away in frustration. A page loader also provides a small distraction which can actually makes the wait seem much shorter.
Replacing Component: React Native <ActivityIndicator>

Syntax

import React, { Component } from 'react';
import { Container, Content, Spinner } from 'native-base';

export default class SpinnerExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Spinner />
                    <Spinner color='red' />
                    <Spinner color='green' />
                    <Spinner color='blue' />
                </Content>
            </Container>
        );
    }
}

Configuration

Property	Default	Option	Description
color	#45D56E	user-defined	Color of Spinner.

Tabs

Syntax

import React, { Component } from 'react';
import { Container, Content, Tabs } from 'native-base';

import TabOne from './tabOne';
import TabTwo from './tabTwo';

export default class TabsExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Tabs>
                        <TabOne tabLabel='One' />
                        <TabTwo tabLabel='Two' />
                    </Tabs>
                </Content>
            </Container>
        );
    }
}

Configuration

Property	Default	Option	Description
tabLabel	-	-	Name for each tab

Thumbnail

Thumbnail component works very similar to Image. It helps you to showcase an image with variuos dimensions and shapes. By default, Thumbnail renders an image in circular shape.
Replacing Component: React Native <Image>

Syntax

import React, { Component } from 'react';
import { Container, Content, Thumbnail } from 'native-base';

export default class ThumbnailExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Thumbnail source={require('./img/flower.jpg')} />
                    <Thumbnail size={80} source={require('./img/flower.jpg')} />
                    <Thumbnail square source={require('./img/flower.jpg')} />
                    <Thumbnail square size={80} source={require('./img/flower.jpg')} />
                </Content>
            </Container>
        );
    }
}

Configuration

Property	Default	Option	Description
source	-	-	Image path for thumbnail.
square	-	-	Represents shape of thumbnail. By default thumbnail is circle in shape.
size	30	user-defined	Dimension of thumbnail.

Keep waiting for more from us . . .