Thursday, 23 January 2020
NativeBase Picker
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
} from 'native-base';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
pick: ''
};
}
render() {
return (
<Container>
<Header>
<Body>
<Title>Picker input</Title>
</Body>
</Header>
<Content>
<Form>
<Item picker>
<Picker
mode="dropdown"
iosIcon={<Icon name="arrow-down" />}
style={{ width: undefined }}
placeholder="Select your SIM"
placeholderStyle={{ color: "#bfc6ea" }}
placeholderIconColor="#007aff"
selectedValue={this.state.pick}
onValueChange={(e) => this.setState({ pick: e })}
>
<Picker.Item label="Wallet" value="key0" />
<Picker.Item label="ATM Card" value="key1" />
<Picker.Item label="Debit Card" value="key2" />
<Picker.Item label="Credit Card" value="key3" />
<Picker.Item label="Net Banking" value="key4" />
</Picker>
</Item>
</Form>
</Content>
<Footer>
<FooterTab>
<Button vertical>
<Text>Picked:</Text>
<Text>{this.state.pick}</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment