NativeBase: Form in card body not visible in Nexus 7 Tab (BUG)

Hi, 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.

screenshot_2017-03-22-12-00-35

I think it’s maybe related to this issue: https://github.com/GeekyAnts/NativeBase/issues/668

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 20 (4 by maintainers)

Most upvoted comments

A quick fix for me was to wrap the <Form> around a <View> component with flex: 1. After that the form showed properly.

codeofdiego on Jul 22, 2017

@Anima-t3d, Unfortunatly move body to above of the header didn’t work for me. The only solution for my code is to add extra padding with paddingTop: 30 and I don’t want use this approach because it’s very ugly and I’m in production now.

But in the end I use View as a container.

Yes I think simple View as a container is better because NativeBase card component seems very buggy now (For example #668 is another bug that I reported about card component). I switch to use react native elements card component as a temporary solution. Maybe useful for you too. I can switch back to NativeBase when this component bugs fix. Thanks for your attention ✋

cyclops24 on Mar 24, 2017

@cyclops24 It’s because of the header. If you move the “body” above it, it should show. There are a few ways to try: padding/margins or set fixed height. But in the end I use View as a container.

Anima-t3d on Mar 24, 2017

Anima-t3d on Mar 23, 2017