NativeBase: [BUG] CardItem flex box issue in iOS on Plus version screen

There seems to be an issue revolving around iPhone Plus screens and usage of multiple CardItem components. In certain edge cases the CardItem can affect the display of the next CardItem. Possibly when width/height layout properties are incorrectly rounded, resulting in 1 pixel gap for flex-box items to stack horizontally.

react-native, react and native-base version

“native-base”: “^2.0.12”, “react”: “~15.4.1”, “react-native”: “0.42.0”,

Expected behaviour

When using CardItem having the content contained nicely inside the container element.

Actual behaviour

On iPhone Plus versions the content can break outside of the container element. (Floats on the right side, as if there is a 1 pixel gap for the content to position itself)

Steps to reproduce (code snippet or screenshot)

Possible causes

style with margin(top/bottom)/padding(top/bottom)/height/fontSize on for example H3
content of H3 too short

Possible quick fixes

style with margin(top/bottom)/padding(top/bottom)/height/fontSize on CardItem/Card or content in CardItem
move the affected CardItem above the CardItem that causes the issue
add a dummy CardItem with style with margin(top/bottom)/padding(top/bottom)/height

Possible affected elements

Button, CheckBox, Radio, Grid

Code

Working

<Card>
              <CardItem>
                <Body>
                  <H3>
                    Expected
                  </H3>
                </Body>
                <Right>
                  <Text note>OPTIONAL</Text>
                </Right>
              </CardItem>
              <CardItem>
                <Body>
                  <Button iconLeft bordered onPress={() => {console.log('clicked add assets')}}>
                    <Icon name="md-add" />
                    <Text>Add Things</Text>
                  </Button>
                </Body>
              </CardItem>
            </Card>

Not working

<Card>
              <CardItem>
                <Body>
                  <H3 style={{marginBottom: 20}}>
                    Broken
                  </H3>
                </Body>
                <Right>
                  <Text note>OPTIONAL</Text>
                </Right>
              </CardItem>
              <CardItem>
                <Body>
                  <Button iconLeft bordered onPress={() => {console.log('clicked add assets')}}>
                    <Icon name="md-add" />
                    <Text>Add Things</Text>
                  </Button>
                </Body>
              </CardItem>
            </Card>

Screenshot of emulator/device

Working on Android

android

Broken on Plus version

ios_plus

Note the red arrow indicating where the content was pushed outside of the view.

Is the bug present in both ios and android or in any one of them?

IOS plus version only

Any other additional info which would help us debug the issue quicker.

The issue only occurs on iPhone Plus (both 6 and 7 versions)

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 7
Comments: 22 (8 by maintainers)

Commits related to this issue

Fix for issue #1234 Issue : card ui breaks on iphoneX Possible fix for issue #612 — committed to GeekyAnts/NativeBase by akhil-ga 7 years ago

Most upvoted comments

For my issue at least, it looks like it is due to Card having flexWrap of 'wrap'. Created my own components with the same styles minus flexWrap and it now works fine.

+12

seanmadi on May 15, 2017

Fixed in the latest version (2.3.5)

Screenshots

iPhone 6 plus

simulator screen shot - iphone 6 plus - 2017-12-18 at 16 00 10

iPhone 7 plus

simulator screen shot - iphone 7 plus - 2017-12-18 at 15 58 19

akhil-ga on Dec 18, 2017