Banafshe Alipour
Banafshe Alipour

Reputation: 1110

multiple inputs in native base

I have a project in react native and use "native-base". I want to have inputs like this enter image description here

Can anyone help?

Upvotes: 1

Views: 1763

Answers (2)

Paras Korat
Paras Korat

Reputation: 2065

May be it's helpful for your requirement

import React, { Component } from "react";
import { Container, Header, Content, Item, Input } from "native-base";
export default class RoundedTextboxExample extends Component {
render() {
return (
  <Container>
    <Header />
    <Content
      contentContainerStyle={{
        flexDirection: "row",
        justifyContent: "space-between",
        marginTop: 20,
        borderColor: "black",
        borderWidth: 3,
        margin: 2,
        padding: 20
      }}
    >
      <Item rounded style={{ width: "23%", borderColor: "red" }}>
        <Input placeholder="Rounded" />
      </Item>
      <Item rounded style={{ width: "23%" }}>
        <Input placeholder="Rounded" />
      </Item>
      <Item rounded style={{ width: "23%" }}>
        <Input placeholder="Rounded" />
      </Item>
      <Item rounded style={{ width: "23%" }}>
        <Input placeholder="Rounded" />
      </Item>
    </Content>
  </Container>
);
}
}

**It's screenshot from my emulator**

Upvotes: 1

Supriya Kalghatgi
Supriya Kalghatgi

Reputation: 1155

Well thats possible with NativeBase, just give width of your choice to Item

The input mentioned in this screenshot is the width value given with each Input

enter image description here

Upvotes: 0

Related Questions