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>
    );
  }
}

No comments:

Post a Comment