I am new to react native and I would like to add a new view each time the plus button is pressed I have tried a few things myself but I haven't been successful so far. My end goal is to add a input fields for passenger details each time the user hits the plus button something similar tothe google trips app. Following is the code that I have been trying to execute:-
import React, { Component } from 'react';
import {
Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text, Form, Item, Input,
Label, Grid, Col, Toast
} from 'native-base';
export default class AddBus extends Component {
constructor(props) {
super(props);
this.state = {
basic: true,
passengerListView: [],
info: "",
viewSection: false
};
}
renderBottomComponent() {
if (this.state.viewSection) {
for (count = 0; count <= 5; count++) {
return (
<Content>
<Grid>
<Col style={{ flex: 1 }}>
<Item floatingLabel>
<Icon name="ios-person" />
<Label>Passenger</Label>
<Input />
</Item>
</Col>
<Col style={{ flex: 0 }}>
<Button transparent >
<Icon name="close" />
</Button>
</Col>
</Grid>
<Item floatingLabel>
<Label>Seat</Label>
<Input />
</Item>
<Item floatingLabel last>
<Label>Confirmation number </Label>
<Input />
</Item>
</Content>
)
}
}
}
render() {
const { passengerListView } = this.state;
return (
<Container>
<Header>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title>Add bus</Title>
</Body>
<Right>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name="ios-folder" />
</Button>
</Right>
</Header>
<Content>
<Form>
<Item floatingLabel>
<Label>Where from?</Label>
<Input />
</Item>
<Item floatingLabel >
<Label>Where to?</Label>
<Input />
</Item>
<Item floatingLabel>
<Icon name="calendar" />
<Label>Departure date</Label>
<Input />
</Item>
<Item floatingLabel>
<Icon name="ios-calendar" />
<Label>Arrival date</Label>
<Input />
</Item>
<Grid>
<Col style={{ flex: 1 }}>
<Item floatingLabel>
<Icon name="ios-person" />
<Label>Passenger</Label>
<Input />
</Item>
</Col>
<Col style={{ flex: 0 }}>
<Button transparent onPress={() => this.setState({ viewSection: true })} >
<Icon name="add" />
</Button>
</Col>
</Grid>
<Item floatingLabel>
<Label>Seat</Label>
<Input />
</Item>
<Item floatingLabel last>
<Label>Confirmation number </Label>
<Input />
</Item>
{this.renderBottomComponent()}
</Form>
</Content>
</Container>
);
}
}
Any help or suggestion is highly appreciated. Thank you.
