Menu
I try using below code (a Form inside a Card component)
<Card>
<CardItem header style={{ backgroundColor: 'lightgray' }}>
<Right>
<Text>This is Right align text </Text>
</Right>
<Badge primary>
<Text>step 1</Text>
</Badge>
</CardItem>
<CardItem>
<Body>
<Text style={{color: 'red'}}>{this.state.error}</Text>
<Form style={{alignSelf: 'stretch'}}>
<Item>
<Label>number:</Label>
<Input keyboardType="numeric"/>
</Item>
<Item>
<Label>date:</Label>
<Input />
</Item>
<Item>
<Label>number 2:</Label>
<Input keyboardType="numeric"/>
</Item>
<Item>
<Label>date 2:</Label>
<Input />
</Item>
<Button success block
>
<Text>submit</Text>
<Icon name='check' size={20} color="#FFFFFF"/>
</Button>
</Form>
</Body>
</CardItem>
</Card>
But in my device Nexus 7 Tab with android 5 footer not visible.
Do you have any suggestion for find the issue and fix it?
I'm using NativeBase 2.0.12 and React-Native 0.42.0.
I think it's maybe related to this issue: https://github.com/GeekyAnts/NativeBase/issues/668
Try 1:
I change my code a little and add style={{backgroundColor: 'red'}} for CardItem that not appear and find it on the outer card component. This is my new code:
<Card>
<CardItem header style={{ backgroundColor: 'lightgray' }}>
<Right>
<Text>This is Right align text </Text>
</Right>
<Badge primary>
<Text>step 1</Text>
</Badge>
</CardItem>
<CardItem style={{backgroundColor: 'red'}}>
<Body>
<Text style={{color: 'red'}}>{this.state.error}</Text>
<Form style={{alignSelf: 'stretch'}}>
<Item>
<Label>number:</Label>
<Input keyboardType="numeric"/>
</Item>
<Item>
<Label>date:</Label>
<Input />
</Item>
<Item>
<Label>number 2:</Label>
<Input keyboardType="numeric"/>
</Item>
<Item>
<Label>date 2:</Label>
<Input />
</Item>
<Button success block
>
<Text>submit</Text>
<Icon name='check' size={20} color="#FFFFFF"/>
</Button>
</Form>
</Body>
</CardItem>
</Card>
And this is new screenshot:
When I remove Form component from CardItem it's render successfully like below:
<Card>
<CardItem header style={{ backgroundColor: 'lightgray' }}>
<Right>
<Text>This is Right align text </Text>
</Right>
<Badge primary>
<Text>step 1</Text>
</Badge>
</CardItem>
<CardItem style={{backgroundColor: 'red'}}>
<Body>
<Text style={{color: 'red'}}>{this.state.error}</Text>
</Body>
</CardItem>
</Card>
Why we can't use Form inside CardItem? Is it an undocumented limitation of Card component?
849
Your Card Component is having flex direction column property by default, change it to row so that the form can be visible to you below your first card.
`
<Card style={{ flexDirection: 'row' }}>
<CardItem header style={{ backgroundColor: 'lightgray' }}>
<Right>
<Text>This is Right align text </Text>
</Right>
<Badge primary>
<Text>step 1</Text>
</Badge>
</CardItem>
<CardItem style={{ backgroundColor: 'red' }}>
<Body>
<Text style={{ color: 'red' }}>{this.state.error}</Text>
<Form style={{ alignSelf: 'stretch' }}>
<Item>
<Label>number:</Label>
<Input keyboardType="numeric" />
</Item>
<Item>
<Label>date:</Label>
<Input />
</Item>
<Item>
<Label>number 2:</Label>
<Input keyboardType="numeric" />
</Item>
<Item>
<Label>date 2:</Label>
<Input />
</Item>
<Button success block
>
<Text>submit</Text>
<Icon name='check' size={20} color="#FFFFFF" />
</Button>
</Form>
</Body>
</CardItem>
</Card>
`
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
