How can i use TextInput & Dropdown by using Nativebase on react-native

Question

am new react-native & nativebase. I try to use nativebase to build Textinput and Dropdown(Picker) in the same page but I cannot. I want to use both of them in the same page. Can u tell me how to. Thank you so much

//I want this to be Textinput
<CardItem style={{bottom: 60}}>
  <Text style={{fontSize: 20, fontWeight: 'bold' }}>Text Input</Text>
</CardItem>
<CardItem style={{bottom: 75}}>
  <Item rounded style={{borderColor: '#708090' }}>
    <Input placeholder="" />
  </Item>
</CardItem>

//I want this to be Dropdown
<CardItem style={{bottom: 75}}>
  <Text style={{fontSize: 20, fontWeight: 'bold' }}>Dropdown</Text>
</CardItem>
<CardItem style={{bottom: 90}}>
  <Item rounded style={{borderColor: '#708090' }}>
    <Input placeholder="" />
  </Item>
</CardItem>

score 0 · Accepted Answer · edited May 27 '21 at 18:25

try this

import React from "react";
import {
  Container,
  Header,
  Content,
  Card,
  CardItem,
  Body,
  Text,
  Form,
  Item,
  Input,
  Picker,
} from "native-base";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected1: "key1",
    };
  }
  onValueChange(value) {
    this.setState({
      selected1: value,
    });
  }

  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Card>
            <CardItem>
              <Body>
                <Text>Text Input</Text>
              </Body>
            </CardItem>
            <CardItem>
              <Body>
                <Item rounded style={{ borderColor: "#708090" }}>
                  <Input placeholder="" />
                </Item>
              </Body>
            </CardItem>
            <CardItem>
              <Body />
            </CardItem>
          </Card>

          <Card>
            <Text style={{ margin: 15 }}>Drop Down</Text>
            <Form style={{ marginLeft: 10, marginRight: 15 }}>
              <Picker
                iosHeader="Select one"
                mode="dropdown"
                selectedValue={this.state.selected1}
                onValueChange={this.onValueChange.bind(this)}
              >
                <Item label="Wallet" value="key0" />
                <Item label="ATM Card" value="key1" />
                <Item label="Debit Card" value="key2" />
                <Item label="Credit Card" value="key3" />
                <Item label="Net Banking" value="key4" />
              </Picker>
            </Form>
          </Card>
        </Content>
      </Container>
    );
  }
}

see this link

How can i use TextInput & Dropdown by using Nativebase on react-native

1 Answers1