import React, { Component } from 'react';
import { Image } from 'react-native';
import { TextInputMask } from 'react-native-masked-text'
import {
Container, Header, Title, Content, Footer,
FooterTab, Button, Left, Right, Body, Icon, Text,
Accordion, Card, CardItem, Thumbnail, ListItem,
CheckBox, DatePicker, DeckSwiper, View, Fab,
Badge, Form, Item, Input, Label, Picker, Textarea,
} from 'native-base';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
success: true,
disable: true
};
}
render() {
return (
<Container>
<Header>
<Body>
<Title>Picker input</Title>
</Body>
</Header>
<Content>
<Form>
<Item rounded>
<Input placeholder='Rounded Textbox' />
</Item>
<Item>
<Icon active name='home' />
<Input placeholder='Icon Textbox' />
</Item>
<Item>
<Input placeholder='Icon Alignment in Textbox' />
<Icon active name='swap' />
</Item>
{this.state.success ?
<Item success>
<Input placeholder='Textbox with Success Input' />
<Icon name='checkmark-circle' />
</Item> :
<Item error>
<Input placeholder='Textbox with Error Input' />
<Icon name='close-circle' />
</Item>
}
{this.state.disable ?
<Item disabled>
<Input disabled placeholder='Disabled Textbox' />
<Icon name='information-circle' />
</Item> :
<Item >
<Input placeholder='Active Textbox' />
<Icon name='information-circle' />
</Item>
}
<Item>
<Textarea style={{ flex: 1 }} rowSpan={5} bordered placeholder="Textarea" />
</Item>
</Form>
</Content>
<Footer>
<FooterTab>
<Button vertical onPress={() => { this.setState({ success: !this.state.success }) }}>
<Text>{this.state.success ? 'error input' : 'success input'}</Text>
</Button>
</FooterTab>
<FooterTab>
<Button vertical onPress={() => { this.setState({ disable: !this.state.disable }) }}>
<Text>{this.state.disable ? 'enable input' : 'disable input'}</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
No comments:
Post a Comment