I am trying to use the code below (a Form inside the 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 on my device, the Nexus 7 Tab with android 5 footer is not visible. Do you have a suggestion to find the problem and fix it? I am using NativeBase 2.0.12 and React-Native 0.42.0 .
I think this may be due to this problem: https://github.com/GeekyAnts/NativeBase/issues/668
Try 1: I change my code a bit and add style={{backgroundColor: 'red'}} for CardItem , which is not displayed and cannot be found on the external component of the map. 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 a new screenshot: 
When I remove the Form component from CardItem , it looks successful, as shown 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 can't we use Form inside CardItem ? Is this an undocumented limitation of the Card component?
source share