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

Basic Usage

General Syntax

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

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

                <Content>
                    <Text>This is body section</Text>
                </Content>
            </Container>
        );
    }
}
  • NativeBase provides its own frame component, named after <Container>.
  • All the components should be included within the Container.
  • Container takes mainly two components: <Header> and <Content>.
  • 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>.
  • The Content component of Container is nothing but the body section of your screen.
  • 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, Content, Button, Icon } from 'native-base';
import { Text } from 'react-native';

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

                    <Title>Header</Title>

                    <Button transparent>
                        <Icon name='md-menu' />
                    </Button>
                </Header>

                <Content>
                    <Text>This is body section</Text>
                </Content>
            </Container>
        );
    }
}

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>

results matching ""

    No results matching ""